> For the complete documentation index, see [llms.txt](https://awecommerce.gitbook.io/awe-color-swatches/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://awecommerce.gitbook.io/awe-color-swatches/getting-started/settings.md).

# Settings

Store-wide settings — tooltip, sold-out display, position and custom CSS.

**Settings** apply to every option style and product group in your store. The **Preview** on the right shows your changes before you save. Switch between **Product page** and **Collection page**, then use **Choose option styles** to check each style.

To get started:\
Go to **Settings** in the app menu. Change what you need, then click **Save** in the save bar.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-da823abe0e449febd320ccc4d0a337a1b82d306d%2Fsettings-05-preview.png?alt=media" alt="Settings preview"><figcaption></figcaption></figure>

***

## 1. **Hovering label tooltip**

Shows a small label when a shopper hovers a swatch. On by default. Choose what it shows:

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-43ffb1dcd45cc2a7859b9be942cd246304ed7022%2Fsettings-01-tooltip.png?alt=media" alt="Hovering label tooltip"><figcaption></figcaption></figure>

* **Text only** (default) — the value name.
* **Image only** — the swatch picture or color.
* **Image + Text** — both.

→ *Dropdowns don't use tooltips.*

## 2. **Sold-out variant display**

How sold-out values look, on product pages and collection cards:

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-8c33cb6ba17e19381d4c7dd48749669148eebc54%2Fsettings-02-sold-out.png?alt=media" alt="Sold-out variant display options"><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="160"></th><th></th></tr></thead><tbody><tr><td><strong>No change</strong> (default)</td><td><ul><li>Sold-out values look like the rest and can still be clicked.</li></ul></td></tr><tr><td><strong>Cross-out</strong></td><td><ul><li>A diagonal line through the value.</li></ul></td></tr><tr><td><strong>Grey-out</strong></td><td><ul><li>The value is faded.</li></ul></td></tr><tr><td><strong>Hidden</strong></td><td><ul><li>Sold-out values are removed.</li></ul></td></tr></tbody></table>

→ *A value that's only sold out with the current selection stays clickable and switches the other options, just like Shopify's own picker.*

## 3. **Change variants position**

Want the swatches above or below your title, price or buy buttons? Click **Change position** and our team moves them for you.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-e980d9195ffe2e818ddf1d2cea9a0e903e35e2ab%2Fsettings-03-position.png?alt=media" alt="Change variants position"><figcaption></figcaption></figure>

## 4. **Add custom CSS**

Write your own CSS to fine-tune the swatches. It's added to every page of your store while the app embed is on. The app won't save while your CSS has an error.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-fc3ceab92824e71f0c842e28d4d665d4bb09f610%2Fsettings-04-custom-css.png?alt=media" alt="Add custom CSS"><figcaption></figcaption></figure>

→ *E.g. hide the option name above the swatches with `.awe-swatch-group__name, .awe-swatch-group__separator { display: none; }`.*

***

💬 If you have any related questions, please contact us via **Live chat** in the app.