> 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/appearance/swatch-styles-reference.md). # Swatch styles reference What each of the twelve styles offers, and which settings it exposes. All twelve styles are configured the same way — open **Appearance**, pick the **Product page** or **Collection page** tab, click **Customize**. This page is a quick guide to what each one gives you.
{% hint style="info" %} **Sale badge** and **In stock message** are product-page groups. The **Carousel** toggle is a collection-page setting. Both are noted per style below. {% endhint %} ## 1, Swatches ### Color or custom image swatch Colour or image swatches with a smooth hover animation. The most flexible style, and the default. Groups: **Shape and layout**, **Border**, **Hover behavior**, **Sold out**, **Image**, plus **Sale badge** and **In stock message** on product pages, and **Carousel** on collection pages. ### Pill swatch Swatches inside pill shapes for a refined look — the chip plus the value name. Good when colour names matter as much as the colours. Groups: **Layout** (**Shape**, **Corner radius**, **Picture size**, **Font size**, **Spacing**, **Align content**), **Default style** / **Hover style** / **Selected style**, **Sold out**, **Image**. ### Variant image swatch Uses each variant's own featured image as the swatch. Needs a featured image on every variant in Shopify — no swatches to set up in the app. ### Variant image swatch with price Variant images with prices for a quick comparison. Product pages only. Adds a **Price and labels** group: **Show variant name**, **Show price**, **Show compare-at price** (with **Compare-at price color** and **Sale price color**), and its own **Show sale badge** controls. ### Color or custom swatch with price Colour swatches with prices for a rich selector. Product pages only. Groups: **Layout** (with **Box width**, **Box radius**, **Swatch width**, **Swatch height**), **Default style** / **Hover style** / **Selected style** with separate **Variant name** and **Price** blocks, **Sale badge**, **Sold out**, **Image**, **In stock product message**. ## 2, Buttons ### Button Clean, flexible buttons for a bold product page. Groups: **Layout** (**Corner**, **Size**, **Spacing**, **Align content**), **Default style** / **Hover style** / **Selected style**, **Sold out**. ### Button without border Minimal, text-only variant options. Its **Selected style** adds an **Underline** toggle, and its **Sold out** treatment has an extra **Strikethrough** choice. ### Pill button A rounded button style that's easy to scan. ### Button with price Prices directly on buttons to highlight savings. **Default style** splits into a **Variant name** block and a **Price** block, with **Show compare-at price**, **Compare-at price color** and **Sale price color**. ## 3, Dropdowns ### Dropdown A compact, space-saving variant selector. Groups: **Field** (**Corner radius**, **Border thickness**), **Icon** (**Style**: **Arrow**, **Chevron**, **Caret**, **Plus**; and **Icon color**), **Default style** / **Hover style** / **Selected style**. On product pages a **Price** group can show the price, the compare-at price and a sale badge inside the list. ### Color or custom swatch dropdown A dropdown with swatches for style and flexibility — a small colour chip beside each value. Adds **Picture size**, **Picture type** (**None**, **Single**, **Double**), **Picture thickness** and **Picture border color**, plus an **Image** group. ### Variant image dropdown Product thumbnails in a compact dropdown. Same settings as above, with a larger default thumbnail. {% hint style="info" %} Dropdown styles don't have a **Sold out** group or a **Carousel** toggle, and the tooltip setting in **Settings → General** does not apply to them. {% endhint %} ## Related pages * [Customize a swatch style](/swatch/appearance/customize-a-swatch-style.md) * [Choose a display style](/swatch/options/choose-a-display-style.md)