> 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/overview.md).

# Appearance overview

Browse the swatch styles available to your store and fine-tune how each one looks.

**Options** decides *which* style each product option uses.

**Appearance** decides *what the chosen style looks like* — shape, size, spacing, borders, hover effects, sold-out treatment, and more.

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-b170072b9bdcaa139b829629e896ca789a601e42%2Fappearance-list.png?alt=media" alt="The Appearance page showing the Product page and Collection page tabs, the category chips, and two style cards with live previews"><figcaption><p>Each style card previews the style with your own swatches, and shows In use when an option already uses it.</p></figcaption></figure>

## How the page is organised

The Appearance setting is set up for Product page / Collection page individually.

The two tabs at the top separate the two surfaces. A style's settings are stored separately for each, so the same **Color or custom image swatch** can be 35 px chips on the product page and 20 px dots on collection pages.

{% hint style="info" %}
There are no surface tabs inside a style's editor. Pick **Product page** or **Collection page** on this list first, then open the style.
{% endhint %}

### Category chips

**All**, **Swatches**, **Buttons** and **Dropdowns** filter the list. Each chip shows how many styles it holds.

### Style cards

Each card shows a live preview built from your own settings, a one-line description, and:

* **In use** — a badge on styles at least one of your options is currently using.
* **Customize** — opens that style's settings.
* **Remove** — moves the style out of the list and into **Explore more…** below. Not available for a style that's **In use**, or for the three core styles.

Below the main grid, **Explore more product page styles** (or **…collection page styles**) holds the styles you aren't using. Click **Add** on one to bring it into the list.

{% hint style="info" %}
Adding or removing a style here only changes this list. What shoppers see is still decided by the style you pick per option on the [Options](/swatch/options/choose-a-display-style.md) page.
{% endhint %}

Locked styles show **Unlock** and a note pointing at the pricing page — see [Plans and pricing](/swatch/pricing/plans-and-pricing.md).

## Where to go next

* [Customize a swatch style](/swatch/appearance/customize-a-swatch-style.md) — how the editor works and what the shared setting groups do.
* [Swatch styles reference](/swatch/appearance/swatch-styles-reference.md) — what each of the twelve styles offers.
* [Out-of-stock styles](/swatch/appearance/out-of-stock-styles.md)
* [Sale badge and in-stock message](/swatch/appearance/sale-badge-and-in-stock-message.md)