Product Options
      Back to home
      1. Knowledge Base
      2. Design Tokens
      3. Product Options

      Swatches

      Add & manage color swatches for your products on Nyla

      This article tells you everything you need to know on managing colour swatches in Nyla. 


      Introduction: What are Swatches? 

      Swatches display a Shopify option value (e.g colour, color or shade) to users so that they can click to select that option. 

      For example, in the image below, the product option "Shade" has a value "Dawn" selected. This  is represented by a swatch with a colour (hex value #E5AB87). 

      To use swatches in Nyla you need to:

      1. Set up your product option values in Shopify
      2. Have configured the ability to add swatch lists on your site (see how to do that here).
      3. Add swatches with colour(s) or an image to match the corresponding Shopify value
      4. Ensure all changes are published on Shopify and Nyla

      Adding colour swatches

      Provided you have swatch lists configured on your site (e.g you have products where you have swatches already showing/swatch styles set up), you then need to add 1x swatch for each product option value you want it to display. 

      For example, if you have 10 colours on your site (Red, Blue, Green, Yellow, Purple, Black, Grey, White, Silver, Gold), you need to enter at least 10 swatches so that Nyla knows what to show for each colour. Otherwise at least one will show up blank. 

      For each swatch, you can add a hex value or an image depending on your preference.  

      To add a swatch you need to:

      • Navigate to Swatches (Design > Swatches)
      • Add a new Swatch
      • Add the corresponding Shopify option name in Shopify option (e.g Colour, Color, Shade). This field is case sensitive, and will take additional spaces into account, so make sure that the text is matches exactly as it is entered in Shopify.  
      • Add the corresponding Shopify option value in Shopify option value (e.g Yellow, Green, Orange, Light, Dark etc). This field is case sensitive, and will take additional spaces into account, so make sure that the text is matches exactly as it is entered in Shopify.  
      • Add an image or a colour
      • Optional: if you want want add stripes to your swatches, you can select either horizontal or vertical stripes under "Display" and add mulitple colours, or simply add an image with the stripes already present. 

      For example, if you are adding a swatch for "Red" that should show up under "Colour" then you should add Colour as the Shopify Option and Red as the Shopify option value. 

      See this video on adding swatches end to end: 

       

      In the image below, you can see how the Morning swatch has been configured to show hex value #BCCCE4 whenever the Shade "Morning" is present: 

      In this image, you can see how the Noon swatch has been configured to show hex value #D8B684 whenever the Shade "Noon" is present: 

      Tip: it's a good idea to select the PDP you want to edit before adding your swatch so that you can see your changes in the live preview:

       

      How to have multiple swatches for the same option name

      It is possible to have multiple swatches for the same option name. A use case for this is if two of your products have "Green" as a "Colour" option value, but you want to display different swatch styles for each (e.g a different hex colour or image for each).  

      In order to do this, you should use the "Category" feature under swatches. 

      You need to add a product variant metafield with the following settings:  

      namespace:"nyla_options", key: "category"

      It should be a single line text field.

       

      Once you have this you should populate the category metafield for all of the product variants that have that product option, for example: 

      • Product 1:
        • Populate the metafield for all variants with colour green with nyla_options.category: Dresses
      • Product 2: nyla_options.category: Shirts
        • Populate the metafield for all variants with colour green with nyla_options.category: Shirts

      After doing so, you can then create two swatches with the same name (Green). Once should have the settings: 

      • Product 1:
        • Shopify Option: Colour
        • Shopify Option Value: Green
        • Category:  Dresses
        • Image/colour of your choosing
      • Product 2: 
        • Shopify Option: Colour
        • Shopify Option Value: Green
        • Category:  Shirts
        • Different image/colour of your choosing

      Building Swatch Styles from Scratch

      In Nyla, when building out your site (or PDP, PLP etc) you set up how your swatch list design will look like in the Options design token. This is to set things like the spacing between the swatch list, how they look when they are selected, in stock, out of stock and so on. You can then add a swatch list to your site by adding the Product Options content item and selecting the correct design token under "display". See here on how to build a PDP with blocks and templates. 

      Troubleshooting empty swatches

      If swatches are showing up blank, this means that either: 

      1. You haven't added a swatch for that option value, or the swatch you added doesn't match the naming in Shopify
      2. You haven't published your changes

      We suggest to check first in the Editor:

      If the swatch is populated on the Editor, but not on the live site, then you need to publish your changes. To solve this, either publish the page or publish the design tokens with the recently added swatch. 

      If the swatch is showing blank in the Editor, then you either need to: 

      1. Add a swatch for that option value (see here for how to do this)
      2. Ensure the swatch settings are set correctly. Make sure that: 
        1. The name of the option value matches what is set in Shopify
        2. The name of the option matches what is set in Shopify 
      3. After adding your swatch and ensuring the values match what are set in Shopify, then you should publish your changes so that they reflect on your live site. 

      Troubleshooting the wrong swatch showing up

      If the wrong swatch is showing up on one of your products, this means that: 

      1. The swatch image or colour needs to be updated. To check this, you should navigate to Swatches (Design > Swatches), navigate to the corresponding swatch and update the image or colour to be the right one 
      2. If you have multiple swatches with the same name but a different display, you may need to use the Category feature in order to show the correct swatch for your use case. See here for how to do this.