New way to add color swatches to product
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:
Product cards — Collection page, search page and sections with product cards
Product detail page
Choose type pills to preview color swatches on a Product Detail Page or Featured product section (PDP):
1) In the 'Product information' template of Product detail page, find the 'Variant Picker' block;
2) In the 'Variant picker' block, choose type Pills to see color swatches on the page.
