Setting up Color Swatches
Learn here how to set up color swatches associated to your product variants in the context of the Shogun Product Box
James Power avatar
Written by James Power
Updated over a week ago

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

  1. Navigate to the product in Page Builder where you wish to render color swatches.

  2. Click on the Product Variant element to focus the sidebar on that element.

  3. Look for an option that says "Detect Color Swatches"

  4. Page Builder will automatically detect colors based on the variants’ names

  5. 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.

Did this answer your question?