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 Shogun 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".
Shogun will automatically detect colors based on the variants’ names.
Note: In order for the swatches to be detected, the word "color" must appear within the name of the variant group.
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" section of the Shogun dashboard, 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.
