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

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2F9XqztTTzUMiIaUXXz3xa%2FScreenshot.png?alt=media&amp;token=103927d1-875c-4dc1-af9f-3157aa32a065" alt=""><figcaption></figcaption></figure>

## How styling works

* Styling is set **per display type**: Swatch, Swatch card, Pill swatch, Button, Button without border, 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.

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fsy208LLbofp4Qur4vgqA%2F2.png?alt=media&amp;token=8b0aed69-88d4-468e-a447-3b98fff66e71" alt=""><figcaption></figcaption></figure>

{% 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 %}

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2FE9Pu0QvxvLjy7jqGbDkx%2F3.png?alt=media&amp;token=89e8ee91-a047-4ada-a161-51dd73da0c4c" alt=""><figcaption></figcaption></figure>

## Where to find it

{% stepper %}
{% step %}

### Open Styling

In the app, go to the **Styling** page.

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2FZVdJwr2M7Z7pwIKObdZ5%2F4.png?alt=media&amp;token=95514b1e-c779-4b8c-b6f5-9aebd0196d32" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Pick a display type

Choose the display type you want to customize: **Swatch / Swatch card / Pill swatch / Button / Button without border / Dropdown**.

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fkf0LQJATGZAe5rJHVfQY%2F5.png?alt=media&amp;token=abef2dc7-ce84-40e9-9edf-9dc8d9a837a9" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Choose the page

Switch between the **Product Page** and **Collection Page** tabs to style each surface independently.

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2FyQSjS9TWtQiqVnOI7bt7%2F6.png?alt=media&amp;token=d282445f-f45b-4711-adac-fbf0a0b9a98c" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Adjust and save

Change the settings, watch the live preview, then click **Save**.

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Frlzkr5gm0YXiyinrWdpu%2F7.png?alt=media&amp;token=c07b6580-b69f-46a0-a11d-4606939a812f" alt=""><figcaption></figcaption></figure>
{% 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.

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fc7lmNYmpcEc80bWTnTON%2Fimage.png?alt=media&amp;token=a8f87822-94cc-400b-ba22-91af57b3b1a7" alt=""><figcaption></figcaption></figure>

{% 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 %}

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2FMfXuDMPp9DlzXlB7E6AN%2Fimage.png?alt=media&amp;token=d7db1acc-58f1-4875-8ce1-c2bd74fe9f38" alt=""><figcaption></figcaption></figure>

## Good to know

* **Swatch card** and **Pill swatch** are styled for the **product page only** (they are not available on collection pages).

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2F7RtlZbPjiUY4O1CPSz6Q%2Fimage.png?alt=media&amp;token=86912544-e1a5-40a9-8d2f-955adfa74c9d" alt=""><figcaption></figcaption></figure>

* **Button without border** is a premium, borderless variant of Button with its **own** styling settings (no border options; it uses a hover glow and an active divider instead). See [Styling settings reference](/swatch/styling/styling-settings-reference.md#button-without-border).
* For the full list of every setting and what it does, see [Styling settings reference](/swatch/styling/styling-settings-reference.md).