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

# Shopify Options Styling (Overview)

#### What this feature does

**Shopify Options Styling** lets you **customize the visual appearance** of Shopify option selectors (colors, images, buttons, dropdowns) so they look more engaging and consistent with your storefront design.

> ⚠️ **Disclaimer (Important)**\
> This feature **only affects the visual presentation** of options (styling, layout, and display).\
> It **does not create or modify Shopify variants**.
>
> Before applying styling, you must **set up your product variants correctly in Shopify Admin**.\
> Shopify Options Styling simply enhances how those existing variants are displayed on the storefront.
>
> (Adapted from the official disclaimer in the Shopify Options Styling documentation.)

***

#### Supported styling types (visual only)

You can visually style option selections in multiple formats, such as:

* Color swatches

<figure><img src="/files/TjtbUw2BJGqEtIgZU4a5" alt=""><figcaption></figcaption></figure>

* Image swatches

<figure><img src="/files/wjp1nhZSUMVYJOOrPLNb" alt=""><figcaption></figcaption></figure>

* Dropdowns with colors

<figure><img src="/files/8nDAegCEt2QJjlsENSDX" alt=""><figcaption></figcaption></figure>

* Dropdowns with images

<figure><img src="/files/4i3DmkwsmBfO7YBXFi7n" alt=""><figcaption></figcaption></figure>

* Button-style swatches

<figure><img src="/files/TIkoxf1zas2qns7AfZtj" alt=""><figcaption></figcaption></figure>

* Swatches with prices

<figure><img src="/files/rhJaWg8pBGTFdweUHDcu" alt=""><figcaption></figcaption></figure>

These styles help customers understand choices faster without changing product logic.

***

#### Where styles are displayed

**Collection page**

Styled options can be shown directly on **collection pages**, allowing customers to preview and interact with options before opening the product page.

<figure><img src="/files/FKhZcegcoutkoZvZA1iD" alt=""><figcaption></figcaption></figure>

**Product page**

On the **product page**, options are displayed with enhanced visuals while still mapping to the variants you’ve already created in Shopify Admin.

***

#### When to use Shopify Options Styling

This feature is ideal when you want to:

* Improve option clarity and UX without touching variant logic
* Make color or image-based choices more intuitive
* Keep Shopify variant management unchanged while upgrading the storefront look