> 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/set-up-your-first-swatches.md).

# Set up your first swatches

From your product options to swatches on your store in a few clicks.

**📌 How does it work?**

The app finds every option your products use — like **Color** or **Size** — and lists it once in **Option styles**. You pick a style for each option, and every product with that option shows it on your store.

## 🛠️ Steps

### **Step 1: Enable the app embed**

If you haven't yet, turn the app on in your theme. See [Enable the app embed](/awe-color-swatches/getting-started/enable-app-embed.md).

### **Step 2: Pick a style for each option**

Go to **Option styles**. For each option, choose a **Product page display** and a **Collection page display**, then click **Save**.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-fab3b2b0c6bff8aab91330924af4aadc0b048d76%2Foption-styles-01-table.png?alt=media" alt="Option styles list with product and collection page display"><figcaption></figcaption></figure>

→ *A good start: **Color** → **Auto image swatch** on both pages, **Size** → **Button** on the product page and **No show** on the collection page.*

See [Option styles](/awe-color-swatches/getting-started/option-styles.md) and [Swatch styles explained](/awe-color-swatches/getting-started/option-styles/swatch-styles.md).

### **Step 3: Add your own colors (optional)**

Picked **Custom swatch** or **Custom card**? Click the gear icon next to it to set a color, two colors or an image for each value. See [Custom colors & images](/awe-color-swatches/getting-started/option-styles/custom-colors-and-images.md).

### **Step 4: Fine-tune the look (optional)**

Go to **Design** to change shape, size, spacing and colors. See [Design](/awe-color-swatches/getting-started/design.md).

### **Step 5: Check your store**

Open a product page and a collection page on your store. The swatches replace the theme's own variant picker for the options you styled.

{% hint style="info" %}
Swatches look off in your theme? Click **Get quick fix!** on the Option styles page, or **I want customization** in the Setup guide — our team adjusts it for free.
{% endhint %}

***

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