# Variant options

On product pages, the **Variant selector** allows customers to choose the product options they want. The selector can display variants as either a **dropdown list**, **color swatches,** or **chips (boxes)**.

By default, swatches are enabled for options named "Color" and chips are enabled for options named "Size".

<div><figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FghVp4zphJq1eVcNadwQW%2Fvariants-dropdown.png?alt=media&#x26;token=7ffceb52-8954-4b4f-ab0c-7afcc77315e2" alt=""><figcaption><p>Dropdown</p></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FP9CaLsXWLVnNS2r8y3Gn%2Fvariants-chip.png?alt=media&#x26;token=35e937ab-9924-4b64-944b-5303815a9da9" alt=""><figcaption><p>Chips</p></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F3it4eT7HzFEvIc3vSATp%2Fvariants-swatches.png?alt=media&#x26;token=47665f1c-6d7a-4f9c-90bf-3cc801c9cf99" alt=""><figcaption><p>Swatches</p></figcaption></figure></div>

{% hint style="success" %}
To add and edit variants for products with multiple options (e.g. colors, sizes) go to *Products* in the Shopify admin. Learn more in [Shopify's variant options guide](https://help.shopify.com/en/manual/products/variants).
{% endhint %}

## Change variant selector style

***

In the theme editor, go to **Theme settings > Products** to change the style of the variant selector for different product options.

<div><figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fj2YVMifBjVK2oXr97Y5o%2Ftheme-setting-product.jpg?alt=media&#x26;token=f67866e9-1590-4ed6-985c-5c0f9dafe45a" alt=""><figcaption><p>Go to Theme settings > Product</p></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F2fPUtqRs08MLnIJet7vg%2Fvariant-options-swatches.png?alt=media&#x26;token=716c700d-580f-4675-b78d-0d864f9db19d" alt=""><figcaption><p>Add or remove options for swatches</p></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F2g8sO0KVGdKfzsqHffpR%2Fvariant-option-chips.png?alt=media&#x26;token=8a42698e-5815-44c5-add7-5d5e7d2e6273" alt=""><figcaption><p>Add or remove options for chips</p></figcaption></figure></div>

###

### Dropdown list

***

Dropdowns are the default variant selector for all variant options *except* "Color" and "Size". To use dropdowns, remove the options names from both **Variant options for swatches** and **Variant options for chips**.

### Swatches

***

By default, all product options named "Color" will display swatches. To change which product options should use swatches, add or remove the option names in **Variant options for swatches** in **Theme settings > Products**.

Support for Shopify swatches for product page variant selectors, product item swatches, and filter swatches.

{% hint style="warning" %}
**Required** Set up colors for swatches using [custom colors](https://help.fluorescent.co/cornerstone/product-pages/variant-options/variant-swatches/use-custom-colors) or [uploaded images](https://help.fluorescent.co/cornerstone/product-pages/variant-options/variant-swatches/use-custom-images). After setting up, you can choose to display swatches in [product listings](https://help.fluorescent.co/cornerstone/products/product-listings#product-card-elements) and [collection filters](https://help.fluorescent.co/cornerstone/collection-pages/filters-and-sorting).
{% endhint %}

### Chips (buttons)

***

By default, all product options named "Size" will display chips (rectangles around variant names). To change which product options should use chips, add or remove the option names in **Variant options for chips** in **Theme settings > Products**.

> Learn more about enabling chips and customize their style in the [Variant chips guide](https://help.fluorescent.co/cornerstone/product-pages/variant-options/variant-chips).

## Sibling product swatches

***

Cornerstone's **Sibling products** feature lets you set up variants as individual products with their own images and product details. Sibling products appear as variant swatches that link to separate product pages.

> Learn more about [Sibling product swatches](#sibling-product-swatches).

\\

***

> **Related**\
> [Swatches](#swatches)\
> [Chips](https://help.fluorescent.co/cornerstone/product-pages/variant-options/variant-chips)\
> [Product template](https://help.fluorescent.co/cornerstone/product-pages/product-template)\
> [Product overview blocks](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks)