Skip to content
English
Need a hand? Contact Us Sign in
nyla.app
  • There are no suggestions because the search field is empty.

Setting Product Option Defaults

Set product option defaults for your products

This article walks you through the different options to set product variant and option defaults in Nyla and how to manage them.  
Product option defaults can be used to: 
  • Set default variant or option values for product
  • Default to having no option selected for a product
  • Limit a product to only show a specific variant within a source: product 
Contents: 
  1. Ways to set product option defaults and limits
  2. Rules precedence
  3. Feature details & configuration instructions
    1. Set default product option values via Shopify metafields
    2. Set a product variant default via a URL Query String
    3. Limiting to a specific variant within the Source Product

Ways to set product option defaults and limits

There are four ways that you can apply product defaults in Nyla, allowing you to manage your product defaults at a granular level according to different use cases:
 
You can set product option defaults on a per product basis using metafields in Shopify. The choices you enter here will apply sitewide (unless overridden by other methods of defaulting).
This feature also enables you to set your product to have no variant selected as default (meaning that customers actively need to select the variant they want in order to add to cart).
Example use cases: 
  • Set your product to default to the most common size everywhere it shows on the site
  • Set your product to default to having no variant selected in order to force customers to select their size
Set a default variant based on a URL query string. When customers click on the link with the variant set, they are defaulted to that 
Example use cases:
  • Create a link that defaults to a specific variant, so that traffic that clicks on an ad campaign is taken to the variant that was featured in the ad. 
A product can be limited to show only one variant from within the Source Product setting. 
Example use cases:
  • Used in specific upsells or merchandising that highlight only one specific option for your product on a certain part of your site. 
Within the Source: Product, you can set that Source: Product to default to a specific variant. This will only apply to that specific case wherever it is configured on your site in Nyla. 
  • If you want to override a global default in one specific location, for example for a one off campaign highlighting a certain colour or size that differs from the global default. 

Rules Precedence

Product option defaults apply in order precedence, which enables you to use multiple rules in different places across your site without them clashing. If a product has multiple rules applied, whichever rule is highest in this hierarchy will apply to the product in question, with #1 taking the highest priority: 
  1. Limiting to a specific variant within the Source Product (see more info)
  2. Set a product variant default via a URL Query String (see more info)
  3. Set a default product variant in the source product settings (see more info)
  4. Set default product option values via Shopify metafields (see more info)
  5. If none of the above are set, and the first variant is out of stock, then the product defaults to the first variant that is in stock.
  6. If none of the above are set and the first product is in stock, then the product defaults to the first variant listed in the Shopify product admin.

Setting Product Options Via Metafields

It is possible to set a global product option default using metafields. It is also possible to configure a product not to have any options selected by default.
Product option defaults that are set via metafields apply globally to all use cases of the product across your entire site (unless overridden by other ways of setting a default). This includes Bundles that include a product with a global default set. 
Use cases: 
Default to common sizes: A common use case of this feature is to allow merchants to default items to the most popular or median options so that customers have less work to do in order to add to cart.
Defaulting to no option selected: Some merchants also choose to default to no option in order to force customers to make a selection which can help to keep returns to a minimum because the customer will have to make an explicit selection prior to being able to add to cart. If you do that, you can also set the "No option selected" state on your add to cart to inform customers they need to make an option selection (e.g "Select your size"). 

Note: Using global product option defaults with Sorting by price on collections might create an effect where the sort order appears broken depending on how you configure your price to display. Read here for more details.  

See a video of how to set global product option defaults:

In order to set product defaults via metafields:

  1. Add the following product metafields to your Shopify store with the namespace nyla_options and the keys defaultValue1, defaultValue2, defaultValue3. The values 1,2 and 3 correspond to the order of the product options in Shopify. Make sure that the metafields can be accessed through Storefront API. Shopify's official documentation for how to do this is accessible here.
    • nyla_options.defaultValue1
    • nyla_options.defaultValue2
    • nyla_options.defaultValue3
  2. Add the value for each default product option for one or more products in your store (generally, if you're using this feature, you'd want to set it up for all products for consistency). The values should exactly match the name of the product option as it is exists in Shopify. (e.g. 34, Large or 12oz).
  3. In order to have your product option default to having no value selected, add false to the corresponding metafield (instead of a named value).
  4. If the value is left blank then no custom default value will be applied.

Note: Choosing having no option set to false will impact how your compare at pricing displays on your products and product grids. This is because the product.variant.compareAtPrice property will not be accessible given that no variant is selected.

In order to work around this, you can: 

  • If all the variants have the same compare-at-price, you can use product.variants.0.compareAtPrice instead, which will get the compare-at-price from the first variant. 
  • You can also use compareAtPrice in order to show a range of the compare at prices for the variants of your product. 

For example, consider a Shopify product with the following options: 

Screen Shot 2022-08-30 at 11.36.13 AM.png
If we want Nyla to show 50ml as the default Size, and Morning as the default Shade everywhere this product appears on the site, after configuring metafields as described above, we'd see the following in Shopify:
Screen Shot 2022-08-30 at 11.36.21 AM.png
NOTE: "Default Option 1" and "Default option 2" are just the backend names of the metafields in Shopify. If you were to click on each of those names, you would be able to see their namespace and keys are nyla_options.defaultValue1 and nyla_options.defaultValue2, correspondingly.
 

Specifying a product variant via a URL Query String

This feature enables your page to default to a specific product variant when a customer has clicked on a link containing the variant ID in the URL query string. The product variant is set directly after the page load. 

A common use case for this method is to direct advertising traffic directly to a specific variant that has been featured in the campaign.

Configuration instructions: 

To set this up, append a query string containing the Shopify variant ID onto your product page URL in this format: ?variant=variantID .

For example:

  • Product page URL: https://mysite.com/products/my-product
  • Should default to variant ID: 12345678910
  • URL with query string: https://mysite.com/products/my-product?variant=12345678910

Note: This feature only works with product sources that are set to be a "PDP detail view". If your product page is using the page source, then this setting is set to on automatically, however if you are not referencing the page source, then you need to activate this setting inside the product source for this feature to work. 

Tip: You can retrieve the ID of the Variant from the URL in the Shopify admin when viewing the variant, see screenshot below:

SEO considerations: 

Using this method requires the browser to update the variant after the page has loaded for the customer. The default variant is initially rendered on the page and then changes to the variant ID in the URL. Given that most crawlers/etc execute javascript successfully, this method is deemed acceptable from an SEO and advertising standpoint.   
From an SEO standpoint, the query string is ignored; crawlers will thus use https://mysite.com/products/my-product directly, and the on-page JSON-LD schema contains information for all variants on the page. 
 

Limiting to a specific variant within the Source Product

This setting is used in cases where you want to limit a product source to show one variant only. For example, maybe you have a campaign where you only want to offer customers the chance to buy a white t-shirt (rather than pick from all of the colors for that t-shirt). This setting can also occasionally be used in features like upsells or gift with purchase, where a specific variant of the product is set deliberately.
To use this option, within source product, go to settings > single variant. You can then select in the dropdown which variant you want to limit the product to.
In this example, this instance of where the gel cleanser product is shown on the site will only include the 100ml variant and none of the others that exist in Shopify.  
 

Setting a default product variant in the Source Product settings

Another approach you can take is to configure a source product to default to a specific variant. This will only apply to the specific case it is configured in Nyla.
This is useful in cases where you want to default to a specific usage of a product to a variant. For example, in a specific campaign or blog page, you might want to feature the white version of a product default on the page, even though globally the product defaults to the red version. 
A benefit of this method is that the specifically selected variant is included in the pre-generated version of your page, so there is no "flicker" in the browser when you apply this method as there is with the previous approach.
You can configure this option from within source product > settings > default variant.