> 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.
* 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 %}

## 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).