Instead of displaying each product variant as a separate product, color swatches enable visitors to your pages to easily select and view different color options for the same product on a single page.
How to set up color swatches in Shogun
Navigate to the product in Page Builder where you wish to render color swatches.
Click on the Product Variant element to focus the sidebar on that element.
Look for an option that says "Detect Color Swatches"
Page Builder will automatically detect colors based on the variants’ names
Once the color swatches have been detected, you may need to adjust their appearance or order to ensure they are displaying correctly.
Customizing colors for your swatches
Under the "Advanced" settings section of the Page Builder, there is an option to customize color swatches. By selecting "Color Swatches" from the advanced settings menu, you can customize the colors of your product variants by entering the product variant name and assigning a color to it.
Note: To delete a color swatch simply clear the name of the swatch.
Handling sold-out variants
When some of the product variants are not available swatches will be crossed out (see image below) and visitors to the page will not be able to select that product variant.
