> 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/design/swatch.md).

# Swatch

Shape, size, spacing and border colors of color and image swatches.

The **Swatch** design is used by **Auto image swatch** and **Custom swatch** — the small circles or squares that show a color or a picture.

To get started:\
**Design** → **Swatch** → **Custom**. Pick the **Product page** or **Collection page** tab.

***

## 1. **Shape & size**

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-538b0debdb63bc4f3b95082c29a17e7461d7c1b9%2Fdesign-swatch-01-shape-size.png?alt=media" alt="Swatch shape and size"><figcaption></figcaption></figure>

### **1.1 Shape**

**Circle** (default), **Square**, **Rectangle** or **Star**.

### **1.2 Size**

<table data-header-hidden><thead><tr><th width="200"></th><th></th></tr></thead><tbody><tr><td><strong>Size</strong></td><td><ul><li>For <strong>Circle</strong>, <strong>Square</strong> and <strong>Star</strong>: 8–120 px.</li><li>Default: 40 px on the product page, 24 px on the collection page.</li></ul></td></tr><tr><td><strong>Width size</strong> / <strong>Height size</strong></td><td><ul><li>For <strong>Rectangle</strong>: 8–120 px each.</li></ul></td></tr><tr><td><strong>Corner radius</strong></td><td><ul><li>For <strong>Square</strong> and <strong>Rectangle</strong>: 0–40 px (default 0).</li></ul></td></tr><tr><td><strong>Border thickness</strong></td><td><ul><li>0–8 px (default 1).</li></ul></td></tr></tbody></table>

→ *Swatches keep the size you set on mobile too — make sure they're big enough to tap easily on a phone.*

## 2. **Layout**

* **Alignment**: **Left** (default), **Center** or **Right**.
* **Spacing**: the gap between swatches, 0–40 px (default 8).

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-137ff2043ad121a5b77715471eebd71f065663a5%2Fdesign-swatch-02-layout.png?alt=media" alt="Swatch alignment and spacing"><figcaption></figcaption></figure>

## 3. **Compact display**

Only on the **Collection page** tab. Keeps busy product cards tidy — see [Compact display on collection cards](/awe-color-swatches/getting-started/design/compact-display-on-collection-cards.md).

## 4. **Color**

**Border color** has 3 states — **Default**, **Hover** and **Selected** (defaults `#CECECE` / `#000000` / `#000000`). Click a color to pick it or type a hex code.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-d143172ee09fa28242042954283741a79505e787%2Fdesign-swatch-03-color.png?alt=media" alt="Swatch border colors"><figcaption></figcaption></figure>

→ *The selected swatch is shown by its border, so pick a **Selected** color that stands out from your swatches.*

***

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