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

# Styling overview

The **Styling** page lets you control how each display type looks on your storefront, with a live preview and no coding required.

## How styling works

* Styling is set **per display type**: Swatch, Swatch card, Pill swatch, Button, and Dropdown. Each type has its own settings.
* Each type is styled separately for the **Product page** and the **Collection page** (two tabs), so you can use a larger swatch on the product page and a compact one on collection listings.
* Each type also has separate **Desktop** and **Mobile** tabs — see [Desktop and Mobile settings](#desktop-and-mobile-settings) below.
* A **live preview** shows your changes instantly. Click **Save** to apply them to your store.

{% hint style="info" %}
Styling applies **globally** to every product using that display type. To change how a single option is displayed (for example, switch from Swatch to Button), use **Configure Variants** instead.
{% endhint %}

## Where to find it

{% stepper %}
{% step %}

### Open Styling

In the app, go to the **Styling** page.
{% endstep %}

{% step %}

### Pick a display type

Choose the display type you want to customize: **Swatch / Swatch card / Pill swatch / Button / Dropdown**.
{% endstep %}

{% step %}

### Choose the page

Switch between the **Product Page** and **Collection Page** tabs to style each surface independently.
{% endstep %}

{% step %}

### Adjust and save

Change the settings, watch the live preview, then click **Save**.
{% endstep %}
{% endstepper %}

## Desktop and Mobile settings

Each display type has a **Desktop** tab and a **Mobile** tab, so layout and "hide extra swatches" behavior can differ by device.

* **Desktop** holds the base settings — size, spacing, alignment, hide-extra behavior, and more.
* **Mobile** starts out inheriting every Desktop value. Tick a field on the Mobile tab to give it its own value on phones; anything left unticked keeps following Desktop.

{% hint style="info" %}
On the Product page tab, the "+N" click behavior setting only appears on Desktop — Mobile inherits it from Desktop rather than overriding it there.
{% endhint %}

## Good to know

* **Swatch card** and **Pill swatch** are styled for the **product page only** (they are not available on collection pages).
* For the full list of every setting and what it does, see [Styling settings reference](/swatch/styling/styling-settings-reference.md).