Swatch showcase
Swatch showcase puts one product center stage, such as a lipstick in six shades or a sofa in four fabrics. Its option values show as large swatches. When a shopper picks one, the stage takes on that color, the variant's image swaps in, and the add to cart button adds that variant.
How to set it up
Step 1: Add the section
- In the theme editor, open the page and click Add section.
- Choose Swatch showcase. Drag it to where you want it on the page.
Step 2: Choose the product
- Under Product, choose the Product.
- In Swatch option names, enter the option that holds the colors, such as
Color, Shade. The first option with one of these names becomes the swatches; otherwise the first option is used. - Write the Button label, and turn on Show product link to link to the full product page.
Step 3: Style the stage
- Under Stage, choose the Shape (Arch, Rounded or Pill) and the Media (1): Float the product for a cut-out on the tinted stage, or Fill frame for a full image.
- Set the Background tint: how strongly the stage takes the picked swatch color.
- Turn on Show the picked value behind the product (a large word such as "Rosewood"), Show counter (01 / 06) and Tilt the product with the pointer.
- Under Layout, put the stage on the left or the right.
Step 4: Add the text
- Add a Subheading, Heading and Text block for the copy beside the swatches.
Step 5: Add a note and a cut-out to each variant (optional)
- Create a variant metafield
custom.variant_note(single line text) to describe each shade, for example "A soft brick-rose. The everyday red for every skin tone." - For Float the product, create a variant metafield
custom.cutout_image(File) and add a transparent PNG of each variant. Without one, the variant image shows as a card.
Step 6: Review the settings
- See the settings reference below for every option.
Settings reference
Swatch showcase
| Product | |
|---|---|
| Product | A product. |
| Swatch option names | The first option with one of these names becomes the swatches. Otherwise the first option is used. |
| Button label | |
| Show product link | Turns this on or off. |
| Product link label | |
| Layout | |
| Stage position | Options: Left, Right. |
| Stage | |
| Shape | Options: Arch, Rounded, Pill. |
| Media | Float works best with transparent cut-outs: add a PNG to each variant's custom.cutout_image metafield (File). Without one, the variant image shows as a card. Options: Float the product, Fill frame. |
| Background tint | How strongly the stage takes the picked swatch colour. |
| Show the picked value behind the product | Turns this on or off. |
| Show counter | Turns this on or off. |
| Tilt the product with the pointer | Turns this on or off. |
| Corners | |
| Make section rounded | Rounds this section's corners with the radius set for each one. |
| Top left radius | Slider. |
| Top right radius | Slider. |
| Bottom right radius | Slider. |
| Bottom left radius | Slider. |
Full width, section layout, color scheme, spacing and mobile overrides work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Swatch colors come from the same sources as everywhere else: your custom color codes in Theme settings > Variants & swatches, then the swatch set on the option value in Shopify Admin, then the color name.
- Sold out values stay in the row and show as sold out.