> 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/about-us/readme.md).

# AWE Combined Listings Swatch

Turn plain variant options into color swatches, image swatches, cards and buttons.

Turn plain variant options into clickable **color swatches**, **image swatches**, **cards**, **buttons** or **dropdowns** — on your product pages and your collection cards.

**AWE Combined Listings Swatch** reads the options your products already have (Color, Size, Material…) and shows them the way shoppers expect. No theme code, no manual setup per product.

Key features include:

* 🎨 **7 option styles**: Auto image swatch, Custom swatch, Auto card, Custom card, Button, Dropdown, and your theme's default
* 🖌️ **Custom colors & images**: set a color, a two-color split or your own image for any value
* 🛍️ **Swatches on collection cards**: hover to preview, click to switch the card's image, price and link
* 🔗 **Product groups**: link separate products (one per color) as swatches
* 🖼️ **Variant images**: show only the photos that match the selected variant
* ✨ **Design**: shape, size, spacing and colors — separately for product and collection pages

## Where to start

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Enable the app embed</strong></td><td>Turn the app on in your theme — a one-time step.</td><td><a href="/awe-color-swatches/getting-started/enable-app-embed.md">Enable the app embed</a></td></tr><tr><td><strong>Set up your first swatches</strong></td><td>From options to swatches in a few clicks.</td><td><a href="/awe-color-swatches/getting-started/set-up-your-first-swatches.md">Set up your first swatches</a></td></tr><tr><td><strong>Swatches not showing?</strong></td><td>A quick checklist to find out why.</td><td><a href="/awe-color-swatches/faq-and-support/frequently-asked/swatches-not-showing.md">Why are swatches not showing on my store?</a></td></tr></tbody></table>