> 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/options/choose-a-display-style.md).

# Choose a display style

Pick how each product option is displayed — swatch, button, price tile or dropdown.

Every option is displayed with one of twelve styles. You pick it separately for desktop and mobile, and separately for product pages and collection pages.

## Set a style

1. Go to **Options** and choose the **Product page** or **Collection page** tab.
2. Find the option you want to change.
3. Click the **Display on Desktop** button and pick a style from the list.
4. Set **Display on Mobile** too, or leave it on **Same as Desktop**.
5. Click **Save**.

## Which styles to set up for option names

There are total of 12 styles offered. The styles are grouped into four main families: Color/Image type, Button type, Displayed price type, and Dropdown type.\
\
Each row shows a small live preview built from your own settings. Below is details of each style:

### Color/Image type

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-608b23282495f78117f8f957a1618e7a13151253%2Fimage%20(7).png?alt=media" alt=""><figcaption></figcaption></figure>

| Style                            | What shoppers see                                                 |
| -------------------------------- | ----------------------------------------------------------------- |
| **Color or custom image swatch** | A chip filled with a colour, two colours, or an image you upload. |
| **Pill swatch**                  | The same chip inside a pill, with the value name next to it.      |
| **Variant image swatch**         | The variant's own product image, used as the swatch.              |

### Button type

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-61658b3da3df22b550d1a36b696b088bf2ead468%2Fimage%20(8).png?alt=media" alt=""><figcaption></figcaption></figure>

| Style                     | What shoppers see                      |
| ------------------------- | -------------------------------------- |
| **Button**                | A bordered button with the value name. |
| **Button without border** | Text only, no box.                     |
| **Pill button**           | A rounded button with the value name.  |

### Displayed price type

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-9a321477fcbb47509479774a914454374f5ed632%2Fimage%20(10).png?alt=media" alt=""><figcaption></figcaption></figure>

| Style                                 | What shoppers see                                                              |
| ------------------------------------- | ------------------------------------------------------------------------------ |
| **Variant image swatch with price**   | The variant image, its name and its price in one tile. Product pages only.     |
| **Color or custom swatch with price** | The colour chip, the value name and the price in one tile. Product pages only. |
| **Button with price**                 | A button with the value name and its price.                                    |

### Dropdown type

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-570a3c123d69defbecbdb6901b525860f11117db%2Fimage%20(11).png?alt=media" alt=""><figcaption></figcaption></figure>

| Style                               | What shoppers see                                   |
| ----------------------------------- | --------------------------------------------------- |
| **Dropdown**                        | A plain select list.                                |
| **Color or custom swatch dropdown** | A select list with a colour chip beside each value. |
| **Variant image dropdown**          | A select list with a thumbnail beside each value.   |

## Extra choices on the pickers

* **Same as Desktop** — the first choice on every **Display on Mobile** picker. Mobile follows whatever desktop uses.
* **Same as Product page** — on the **Collection page** tab, the desktop picker can simply mirror the product page.
* **Do not show (Default)** — on the **Collection page** tab only. Swatches will not be shown on collection page. This is the starting value for every option.

## Which styles need swatches set up

Four styles render a colour or an image you provide, so they also need every value filled in: **Color or custom image swatch**, **Pill swatch**, **Color or custom swatch with price** and **Color or custom swatch dropdown**. For those, the option card shows a **Set swatches** button and flags any values that are still missing.

**Variant image swatch**, **Variant image swatch with price** and **Variant image dropdown** use the image already assigned to each variant in Shopify, so there is nothing to fill in — but each variant does need a featured image. The button and plain dropdown styles use the value's text and need nothing at all.

### Use the variant's own image as the swatch

Those three styles have no **Set swatches** step, but the images have to be in place in Shopify before they render:

1. In **Shopify admin → Products**, open the product and give every variant of the option a **featured image**. A variant with no image has nothing to show.
2. Back in the app, go to **Options** and click **Update data** in the **Sync your online store** card, so it picks the new images up — see [Sync product data](/swatch/getting-started/sync-product-data.md).
3. Set the option's **Display on Desktop** to **Variant image swatch**, **Variant image swatch with price** or **Variant image dropdown**, then **Save**.

If a swatch comes out blank, it is almost always one of these two: the variant has no featured image, or the images were added after the last sync.

{% hint style="info" %}
Some styles are part of a paid plan. On a plan that doesn't include one, its row reads ***style name*****&#x20;(Upgrade to a higher plan)** and can't be selected — see [Plans and pricing](/swatch/pricing/plans-and-pricing.md).
{% endhint %}

## Related pages

* [Set color and image swatches](/swatch/options/set-color-and-image-swatches.md)
* [Customize a swatch style](/swatch/appearance/customize-a-swatch-style.md)
* [Show swatches on collection pages](/swatch/options/show-swatches-on-collection-pages.md)