Add color swatches to your Product Detail Page to visually distinguish between product variants and improve the overall shopping experience. Swatches use standard HTML color names, helping customers quickly recognize and compare available options.
This feature works with all Shoplazza themes, including those without advanced image support. To enable images that change with variant selections, visit: Setting up variant thumbnails.
To start setting up variant options, go to: Adding multiple variants for your products.
Setting color cards by variant name
Follow these steps to display color swatches based on the variant names added to your product. This setup uses standard HTML color values to control how the swatches appear on the Product Detail Page.
1. Edit the product: From your Shoplazza admin, go to Products > All products, then click the edit icon next to the product you want to update.
2. Create variant options and enter color values: Click Edit variants, then enter the name of your option, such as Color, and add values like Red, Blue, or Black. These values must match accepted HTML color names to be displayed correctly as color swatches. For a full list of supported values, see HTML Color Names . Click Confirm to save.
3. Open the Theme editor: From your Shoplazza admin, go to Online Store > Themes, then click Customize in your Life Style or Pluto themes.
4. Navigate to the product page: At the top of the editor, click the dropdown menu that says Home page, then go to Products > Default product to load the product detail page.
5. Open Theme settings: Scroll to the bottom of the left-hand panel and click Theme settings.
6. Enable the display setting: Under Product, scroll down to the Color swatches section and turn on Enable color swatches on product page.
7. Save your changes: Click Save draft or Publish in the upper-right corner to apply the update.
Enable color cards to create a more visual, accessible, and confidence-boosting shopping experience. Customers can quickly scan and compare color variants without clicking through each one. This simple setup improves clarity and supports faster decision-making on the Product Detail Page.
Comments
Please sign in to leave a comment.