New way to add color swatches
Add Color Swatches
Color swatches are colorful buttons that can be placed on a product page. They replace the traditional drop-down menu or pills and allow customers to ‘click’ on the color button to see different colors of product.
Add Color Swatches — Product Page
In the Shopify admin, assign a category with a Color metafield to a product. Alternatively, the category can appear by default based on the product name.
Navigate to variants and click on Add options...
When the popup appears, select a Color
Click on dynamic source Color
You will see default entries — colors. You can add them, marking the checkboxes and save changes,
or
You can also create new ones by clicking “Add New Entry.”
You can edit default entry after adding
or
Create new entries. Edit the HEX value of the color in the variant and fill appropriate values.
- Do the same for each variant.
- Save the changes.
Preview the applied changes:
You can preview color swatches on the Product detail page in the Customizer of the theme. For this, on the Product detail page choose the “Product information” section and click on the “Variant picker” block, then slide the button “Enable color swatches for variant color”, save your changes.
