Displaying Product Options on your site
In order to understand using product options in Nyla, you first need to understand what they are in Shopify. Product Options are an entity in Shopify that enable you to have more than one variant of your products.
For example, in the image below, the product has Options of Shade and Size. And the customer on the site has chosen the variant which is the combination of:
- Option name: Shade
- Option Value: Morning
- Option name: Size
- Option Value: 50ml
On Nyla, Product Options are used as:
- Design tokens: to choose how your product options will appear on your site
- Options: you can create Product Option design tokens so that your product option UI is consistent throughout everywhere you use it on your site.
- Swatches: you can use the Swatches content item to choose what your swatches look like for each corresponding option value in a swatch list.
- Content item: you use the Product Options content item to choose how to use product options in a specific part of the site you are configuring. For example you can choose how to display your options (as a tile list, or a swatch list), whether or not to have your option quick add to cart, and so on.
- Properties pulled from Shopify (source: product, source: collection)
Configuring the Options design token
The Options design token enables you to set the styles of your product options wherever they are shown on site.
When building product options, we'd recommend to start from a Nyla Templates version and then customize from there. See how to build a PDP details section with templates & blocks here.
There are two main groups of options to configure:
- Swatch: when you configure a swatch list or swatch dropdown, your options will pull in whatever corresponding Swatch has been set for that option value. The design settings for the swatch list or swatch dropdown are set in the Option design token.
- Tile: when you configure a tile list or tile dropdown, your options will pull in the name of the option value as set in Shopify. The design settings for the tile list or tile dropdown are set in the Option design token.
You set the styling for both styles in the Option design token by configuring the corresponding "Tile" or "Swatch" settings.
Option has the following states which you would configure in order to ensure the styling of your options works for the key states in the shopping flow:
