Swatch King replaces your theme's default variant pickers — dropdowns and radio buttons — with colour swatches, image swatches, buttons or styled dropdowns, on your product pages and your product grids.
The Setup guide on your Swatch King home page walks you through it. This article follows the same three steps.
Step 1 — Activate the app
Swatch King works through a Shopify app embed. Until it is switched on for your published theme, nothing appears on your storefront, no matter how the app is configured.
Go to App settings → Theme status, find your published theme, and click Manage block. That opens your theme editor with the Swatch King embed ready to switch on. Toggle it on and click Save.
A green tick next to your published theme means it is active.
Looking for it in the theme editor? It is listed as Swatch King. You can switch the embed on for an unpublished theme first if you want to preview everything before going live.
Step 2 — Assign styles to your product options
On the home page Setup guide, choose where you want swatches first:
Product page swatches — the variant picker on an individual product page
Collection page swatches — the options shown on product cards across collection, search and home page grids
Pick one to start with. You can come back and set up the other at any time — this is not a permanent choice, and most stores end up using both.
Then click Assign styles. You will see every unique option name in your store — Color, Size, Material and so on — and you can choose a style for each, separately for desktop and mobile.
Styles include swatches, buttons, dropdowns and radio buttons. For swatch styles you also choose what the swatch shows: the variant's first, second or last image, or a colour or custom image you upload yourself.
Two things worth knowing:
Option names are case sensitive. If one product uses "Color" and another uses "color", they appear as two separate options and each needs its own style.
Size options are not styled automatically. Swatch King recognises colour-like option names — Color, Colour, Farbe, Kleur, Couleur, Shade, Finish, Material, Pattern, Style and their equivalents in other languages — and gives them a swatch style on its own. Size is not one of them, so it keeps the default style[available in the Customise Styles page] until you assign a style here. Once you choose a style for an option, Swatch King never overwrites it.
Step 3 — Customize how your styles look
Open Customize styles to adjust any style until it matches your theme — selected and unselected states, hover behaviour, borders and sizes, labels, tooltips, out-of-stock treatment and badges.
Start from any of the built-in templates, adjust it, rename it, and save it as your own. Your store can hold up to 20 saved styles.
Changes here apply everywhere that style is used, so you only need to set it up once.
Finally — check your storefront
Open a product page on your live store and confirm the swatches are showing.
If you don't see them:
Go back to App settings → Theme status and check the embed is on for your published theme — not a draft or a duplicate
Check App settings → Page settings. This controls which pages the app runs on, and if a page type is switched off there, the app loads nothing on it
Check if you have assigned the desired style for option in the product page/collection page settings page.
Still stuck? Click chat with us on your home page. Setup assistance is free and our team can look at your store directly.
Where to go next
Product page settings and Collection page settings — assign styles and upload swatch colours and images
Customize styles — the full styling reference
App settings — badges, size chart, forced option selection, and which pages the app runs on
Localization — translate the text Swatch King adds to your storefront
Pricing — your plan, your charge, and how billing works
Need help? Our support team is always here. Hit the chat button and we will get you sorted.