> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/swatch/settings/swatch-on-product-page.md).

# Swatch on product page

How swatches behave on product pages — single variants, carousels, dynamic variant images and required options.

**Settings → Swatch on Product Page** holds the storewide behaviour of swatches on product pages. A live **Preview** on the right shows the effect.

The section starts with a master switch, **Enable and customize swatch display settings**. Turn it off and the app leaves your product pages alone.

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FSnjNjdtTCr9JAcaAK9z2%2FScreenshot%20at%20Oct%2012%2010-41-13.png?alt=media&amp;token=c7081a26-2570-4554-9c78-58a0be0922e1" alt=""><figcaption></figcaption></figure>

## Product Page Appearance

| Setting                        | What it does                                                                                                                                                   |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show single variant swatch** | Display the swatch option even if the product only has one variant. Off by default — most stores don't want a lone swatch on a product with nothing to choose. |
| **Show Carousel**              | Show the variant swatch in the single line, instead of letting it wrap. Useful for options with many values.                                                   |
| **Use dynamic variant image**  | Automatically show the variant image when a swatch is selected.                                                                                                |

**Show Carousel** here covers product pages only, and applies to every style. Collection pages have their own **Carousel** switch, set per style in **Appearance → Collection page → Customize → Shape and layout** — see [Customize a swatch style](/swatch/appearance/customize-a-swatch-style.md). Turning one on does not turn the other on.

### Use dynamic variant image

**Use dynamic variant image** — *Automatically show the variant image when a swatch is selected.* — is off by default. It's the setting that makes image grouping work on products with several options — see [Group images by swatch](/swatch/assign-images/group-images-by-swatch.md).

With it on, the app matches every choice to the full variant — all of the shopper's options together, not one at a time:

* **The gallery follows every option.** Without it, only options shown with a colour or image change the gallery; buttons and the plain **Dropdown** don't. With it on, they all do, so the photos always belong to the exact combination picked.
* **Image swatches follow the selection.** On **Variant image swatch**, **Variant image swatch with price** and **Variant image dropdown**, each swatch shows the variant it would select, given what's already chosen.
* **Prices follow the selection.** On **Variant image swatch with price**, **Color or custom swatch with price** and **Button with price**, each value shows the price of the combination it leads to.

**Example.** A shoe comes in two models (**Sneaker**, **Slide**), three colours (**Black**, **Sand**, **Gray**) and nine sizes. Model and Color are shown as **Variant image swatch**, Size as **Button**. Each model-and-colour pair has its own featured image in Shopify and four photos in [Assign images](/swatch/assign-images/assign-images-to-option-values.md). With **Use dynamic variant image** on:

1. The page opens on the Sneaker in Black. The gallery shows the four Sneaker-Black photos, and the Color swatches show the Sneaker in each colour.
2. The shopper picks **Slide**. The gallery switches to the Slide-Black photos, and the Color swatches turn into the Slide in Black, Sand and Gray.
3. They pick **Sand**. The gallery shows the Slide-Sand photos, and the Model swatches now show both models in Sand.
4. They pick a size. The photos stay put — every size shares its model-and-colour photos.

What it needs:

* A featured image on every variant in Shopify, so the image swatches have something to switch to. If you assign images in the app, **Overwrite main variant images in Admin** sets these for you.
* **Update data** after you change images in Shopify — see [Sync product data](/swatch/getting-started/sync-product-data.md).
* A paid plan. On Free the checkbox is greyed out with the note *This feature is available with one of our premium plans.*, and downgrading to Free turns it off — see [Plans and pricing](/swatch/pricing/plans-and-pricing.md).

{% hint style="info" %}
Product cards on collection pages have their own **Use dynamic variant image** — see [Swatch on collection page](/swatch/settings/swatch-on-collection-page.md).
{% endhint %}

## Required swatch options

Turn on **Required swatch options** — *swatch options must be selected before adding items to cart* — to stop shoppers adding a product before they've chosen every option. It prevents orders where the colour was never picked.

Switching it on shows two messages you can word yourself:

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FnXP2xGiwHj5rM5TUU5Jq%2FScreenshot%20at%20Oct%2012%2010-42-50.png?alt=media&amp;token=9af2b7e7-ab5b-454a-9d66-230198c35518" alt=""><figcaption></figcaption></figure>

Keep both short and specific — `Choose a colour` reads better than `This field is required`.

## Change the Globo variant position

From the Theme Customize page > Choose the Product template > Add the app's block **Variant swatches**&#x20;

Drag & drop this app block to move its position.&#x20;

Click **Save** to finish!

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fg1oLI6lh2LLjz48wNPJa%2Fimage.png?alt=media&amp;token=c1f065ce-e063-4740-9cc2-ae067f9268a6" alt=""><figcaption></figcaption></figure>

## Save

Click **Save** at the top of the page.

## Related pages

* [Group images by swatch](/swatch/assign-images/group-images-by-swatch.md)
* [Swatch on collection page](/swatch/settings/swatch-on-collection-page.md)