> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.optis.me/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Styling overview

1. [OPTIS Color Swatch](/swatch)
2. [Styling](/swatch/styling)

# Styling overview

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

![](https://storage.crisp.chat/users/helpdesk/website/-/2/d/a/e/2dae120751bd2000/2a3e84ca-d9d9-4793-a1fc-0f5954_1fq1tjt.png)

## 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](/swatch/styling/styling-overview#desktop-and-mobile-settings) below.
* A **live preview** shows your changes instantly. Click **Save** to apply them to your store.

![](https://storage.crisp.chat/users/helpdesk/website/-/7/b/c/5/7bc5b8e718153000/4a721e04-f18f-4e8e-9944-5bb0e6_1qrf2m.png)

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.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/0/a/d/90ad4d937fea2000/c15c8f60-0508-4ad2-b418-e387fc_b0onbk.png)

## Where to find it

1. Open Styling

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

![](https://storage.crisp.chat/users/helpdesk/website/-/3/7/b/0/37b05d1642e15e00/9dd59e25-0c45-4311-9e9b-ce61f8_1nwjm22.png)

2. Pick a display type

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

![](https://storage.crisp.chat/users/helpdesk/website/-/4/6/7/6/4676664c26b93000/bf02a472-7601-403e-b584-f12296_qu7sas.png)

3. Choose the page

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

![](https://storage.crisp.chat/users/helpdesk/website/-/7/d/6/5/7d65b190bb735800/e811010a-dfe2-49bc-b18d-5d675b_z4j876.png)

4. Adjust and save

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

![](https://storage.crisp.chat/users/helpdesk/website/-/4/7/c/a/47ca2df115908800/5694e2a9-c1cd-47f6-a8e4-326eb2_1xje06e.png)

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

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F4026661835-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F50cmOdvfYj3qqQaTzKEI%252Fuploads%252Fc7lmNYmpcEc80bWTnTON%252Fimage.png%3Falt%3Dmedia%26token%3Da8f87822-94cc-400b-ba22-91af57b3b1a7&width=768&dpr=3&quality=100&sign=85420f5ae1140e9618ffcfcdb8373887&sv=3)

On the Product page tab, the "+N" click behavior setting only appears on Desktop — Mobile inherits it from Desktop rather than overriding it there.

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F4026661835-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F50cmOdvfYj3qqQaTzKEI%252Fuploads%252FSg3XRtc2rkpGohUWjX4B%252Fimage.png%3Falt%3Dmedia%26token%3D53fe9060-a3f2-4807-a385-5d0a468de179&width=768&dpr=3&quality=100&sign=981041b0fde9270882ec6eec0ec940f3&sv=3)

## Good to know

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

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F4026661835-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F50cmOdvfYj3qqQaTzKEI%252Fuploads%252F7RtlZbPjiUY4O1CPSz6Q%252Fimage.png%3Falt%3Dmedia%26token%3D86912544-e1a5-40a9-8d2f-955adfa74c9d&width=768&dpr=3&quality=100&sign=de5826321523be7335b2d2229cc28691&sv=3)

* **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#button-without-border).
* For the full list of every setting and what it does, see [Styling settings reference](/swatch/styling/styling-settings-reference).