One of the most requested features that merchants look for on a product page is color swatches, and now thanks to the power of Products 2.0, swatches are natively available for Shopify themes.
Shopify's Products 2.0 feature enables new opportunities for merchants to automate and control the organization of products. When a new product is added to a store, Shopify suggests a standard category, which unlocks related category metafields.
One of these metafields is for color, and when this attribute is associated with individual product variants, these hex values, or images, will be accessible in Liquid, where they can be displayed on the product page. This allows theme developers to expand the variant picker by rendering these color swatches as interactive options within a product section.
In this blog post we'll explore the native color swatches feature, describe how to enable it on your own store, and examine how swatches are implemented on Dawn, so you can reference a working model.
What are swatches?
Before we look at implementing swatches on Shopify themes, let's explore what swatches are, and how they can improve the customer experience.
Swatches are visual representations of product variants, or options, that have a number of benefits:
- Simplify the variant selection process enabling customers to easily compare and choose the variant they want
- Provide instant visual feedback to customers by changing the main product image when a swatch is selected.
- Improve the visual appeal of a page by adding an interactive color component.
- Reduce cognitive load and decision fatigue by presenting options visually.
- Improve the layout of a product section, as swatches are a space-efficient way to present multiple options, compared to text.
- Allow for more precise representation of colors and patterns, ensuring that the product's appearance on the website is consistent with the brand's aesthetic.
Previously theme developers had to resort to using unreliable methods to display color swatches ranging from embedding images from files added to the admin, relying on HTML colors, and employing over-complex regex exercises to fetch and display color information.
With swatches now being exposed in the admin, and available in Liquid, developers can easily access and render swatch information in variant pickers, making for a more robust solution. Developers can also determine how exactly these swatches can appear, and how merchants can customize them through the theme editor.
To view an example of what this could look like, check out this product page, which is using the Dawn theme with swatches enabled.
New additions to Liquid
The color swatches feature introduces new additions to Liquid that allow visual representations of swatches to be displayed, as well as expanding the possible values for the product option to include info related to swatches.
The new swatch Liquid object will output color and image data based on a variant's information, that can be used to generate color strings or image URLs that will be displayed on products. These are the current attributes of the swatch object:
-
swatch.coloroutputs the hexcode of a variants swatch value -
swatch.color.rgbconverts the color hexcode to an RGB string -
swatch.imageoutputs the path to an image
Additionally the product_option.values property can now return the swatch object as a possible value. This will be helpful when setting up your variant pickers to accept and store information related to swatches.
Implementing swatches into themes
To add support for swatches on the product page of your theme, you'll need to update the functionality of the variant picker, add input settings that merchants can interact with and implement styling and Javascript. The general approach could be:
1. Create section settings for customizing swatches
Within your theme's product schema settings, you can create different settings that merchants can customize to change how the product variant picker appears when there are variants that contain swatches. Depending on the options you want to provide to merchants, you could allow swatches to appear as different shapes, or to be selected in different ways (eg: listed in a dropdown menu).
2. Update the product variant picker
You'll need to set up new logic for how product options are handled, that will allow the product variant picker to check for, and loop through swatch values. The theme's variant picker will also need to conditionally render different types of swatch pickers based on the available section settings, and loop over each individual swatch.
3. Build a swatch component
To actually display the visual representations of product variants, your theme should have a swatch component that renders each individual swatch that customers will be interacting with as an input element. This component will be able to generate colors, and image URLs for the individual swatch based on the data passed by the variant picker.
4. Adjust Javascript to handle dynamic page updating
To ensure that the variant picker displays correct information during customer interactions, you'll need to update how your Javascript handles variant changes. You may need to add a new function to your theme's Javascript files that updates the visual display of swatches to reflect currently selected values, or mark swatches as unavailable, if a swatch is out of stock.
5. Add new CSS and translations as necessary
Once the functionality is working as expected and all possible variant scenarios have been thoroughly tested, you could create styling to match the aesthetic of your theme, and add translations for settings in the theme's locale files. If you've implemented more complex settings, you could also write documentation for use that can be linked from the settings on the theme editor.
How swatches are supported on Dawn
Dawn V13 was launched at Shopify Winter Edition '24, and ships with support for swatches, which means developers can leverage it as a model for implementing swatches in your own themes. Let's take a closer look at the different components that are used to display swatches on Dawn, based on the steps we've already described:
1. Section settings
Dawn's main-product.liquid section schema settings contains the section settings for swatches where merchants can choose different styles that would appear to customers. The options available are swatch only, drop down with swatch, and options without swatches. Merchants can also choose settings for adjusting which shapes the swatches could be, in Dawn's case these options are circle or square, but this could be implemented differently in your theme.
2. Variant picker and options
The product-variant-picker snippet is where the structure and logic for displaying different types of variant selection methods (swatches, buttons, dropdowns) is defined. The code below checks if the current variant value has an associated swatch, and depending on the availability of swatches and which block settings are selected, it will create a fieldset for each product option to group these related elements.
Inside the fieldset, a product-variant-options snippet is rendered which handles the specifics of each option within the chosen picker type. It contains logic to display variant options like swatches, buttons, or dropdowns based on the availability and type of the product variant.
This snippet checks if a swatch image is associated with the current variant option value, and if so generates an image URL for it. Otherwise it checks if a specific color is associated with the option, and can generate a RGB color string for the option.
3. Rendering swatches
The swatch component in Dawn is split into two elements, the input selector that customer will interact with, and the actual visual representation of the product option whether that's a color or image. You can see these in the swatch-input.liquid and swatch.liquid snippets respectively.
The swatch-input.liquid snippet contains a radio button input that can accept parameters that were based by its parent snippet, as well as a label that's associated with the radio button. The label will have different class names depending on shape selected by the merchant in the theme editor, and adding the title="{{ value }}" property provides a tooltip with the value of the swatch when hovered over.
Finally, the swatch.liquid snippet renders the visual swatch itself. If the swatch is an image, a URL will be generated, or if it's a color it will generate an RBG string for that color. The image or color will be rendered inside a span element, and will receive classes based on the settings selected:
4. Expanded Javascript
Dawn's global.js file contains logic that dynamically updates the product page when different variants are selected, and this has been expanded to account for swatches.
The theme has a new updateSelectedSwatchValue({ target }) function that updates the visual display of the selected swatch, when a different swatch is selected. Depending on what type of swatch picker is enabled, the function employs different conditions to update the inner HTML of the selected swatch display element to reflect the new value, or updates the swatch's background style to reflect the selected variant.
This new function is called within the existing onVariantChange(event) function, which is triggered when a customer changes the current variant. You could model your own approach on how this is implemented on Dawn, but ensure that you're creating logic to manage your specific settings options, and can handle scenarios when swatches or variants are unavailable.
5. New CSS
Dawn also introduces new styling for visual rules that apply to swatches, which can be seen in the component-swatch-input.css and component-swatch.css files. Again, the styles that are used on the page will depend on the settings that the merchant has selected, eg: circular swatch labels will have a 50% border radius.
Hover effects are applied to swatch labels, which is helpful to provide text based visual feedback when a customer hovers over a swatch, and adding a distinct focus style ensures that when swatch inputs are navigated to via keyboard, it's easy to identify the current position on the page.
Different styling rules are used for different variant states, for example when a variant is sold out, a semi-transparent overlay and a crossed-out line is displayed on the swatch. When creating your own styling rules for swatches, ensure you take a similar approach to visually communicate when variants are unavailable.
Reliable visual elements with native swatches
By implementing Shopify's native swatches on your product pages, you can reliably display variant visual representations, and improve the customer experience for merchants using your theme.
To learn more about swatches in themes check out our documentation, and to request early access to Products 2.0, visit the Winter Editions page.
