- Impulse Paid theme
- By Archetype Themes
- $500
- Native swatches: yes
- Version 10.0.0
Color swatch guide
How to add color swatches to the Impulse theme.
Impulse is a paid theme from Archetype Themes, listed at $500 in the Theme Store and at version 10.0.0 (October 9, 2026) when we checked on October 23, 2026. It supports Shopify's native swatches through an Enable color swatches setting in the Variant picker block, and it can show the same swatches on product tiles in collection grids. Archetype still documents an older color-name method, which matters if your store set swatches up years ago.
Which route fits Impulse?
Route 1
Shopify's native swatches.
-
Give each product a category
In Products, open a product and choose the most specific match in the Category field. Categories come from Shopify's Standard Product Taxonomy, and picking one adds that category's attributes to the product as category metafields. You want a category that lists Color (or a color attribute such as Frame color or Band color). If Color is missing under Category metafields, try a narrower category.
-
Add the colors you sell
Under Category metafields, open Color and select every color your variants come in. Each color is a reusable entry. You can rename an entry, set its exact hex value or upload a pattern image later in Content > Metaobjects, and the change shows everywhere that entry is used.
-
Link the Color option to the metafield
In the Variants section, add an option and pick Color from the suggestions so its values come from the entries you just chose. If the product already has a Color option, open it, use the connect icon beside the option name and choose the Color category metafield. Swatches only appear for options linked this way, so do this on every product you want swatches on in Impulse.
-
Turn on Enable color swatches in the Variant picker
In the theme editor, pick Products > Default product, open the Product section and select its Variant picker block. Turn on Enable color swatches and save.
-
Turn on swatches for product tiles
Open Theme settings > Product tiles and turn on Enable color swatches, so collection grids show each product's colors. For swatches in collection filters, Archetype documents a separate Enable color swatches option in the Product grid section of Collections > Default collection.
-
Check it on a real product page
Save, then open a product in a private browser window and on your phone. Click each swatch and confirm the price, photo and stock message change with it. If Impulse shows plain text buttons instead, go back to the linking step: the option is probably not linked to the Color category metafield yet.
Route 2
A swatch app.
Impulse already shows swatches on product pages and product cards, so an app is for extras. Platmart Color Swatches joins separate products into one color picker, Rubik Variant Images & Swatch shows only the chosen color's photos, and GLO Color Swatch Variant Image adds product grouping and a hide-sold-out option.
-
Duplicate Impulse first
In Online Store > Themes, open the menu beside Impulse and choose Duplicate. Set up the app on the copy, preview it, and publish the copy only when the swatches look right. Your live store keeps working while you test.
-
Install the app and start its trial or free plan
Install the app from the Shopify App Store and approve the access it asks for. Every app suggested on this page had a free plan, a free listing or a free trial of 7 to 30 days when we checked on October 23, 2026, so you can test before you pay.
-
Switch on the app embed
Open the theme editor on your copy (Online Store > Themes, then Customize or Edit theme), click the App embeds icon in the left sidebar, switch on the app's embed and click Save.
-
Match each color name to a swatch
In the app's own settings, give each color name a hex value or a small image. Apps read your option values as text, so Navy on one product and Navy Blue on another need two swatches. Tidy the names first and you only set each color once.
-
Avoid two sets of swatches
If the app draws its own swatches, turn off Enable color swatches in Impulse's Variant picker block and under Product tiles.
-
Preview a product page and a collection page
Use the theme editor preview, then a phone, to check both page types in Impulse. If the app adds collection-page swatches, click one on a product card and confirm the card's photo or link changes to that color.
Apps that fit Impulse
| App | From | Rating | What it does |
|---|---|---|---|
| Platmart Color Swatches | $9.99/month | 5.0 (144 reviews) | Made for stores that list each color as its own product: it joins them into one listing with swatches and lists collection-page support. |
| Rubik Variant Images & Swatch | $25/month | 5.0 (495 reviews) | Best known for showing only the selected color's photos, with swatches included and ThemeForest themes named under Works with, but paid plans start at $25 a month. |
| GLO Color Swatch Variant Image | $9.90/month | 4.9 (1,906 reviews) | A dedicated swatch app whose free plan already covers collection-page swatches and hiding sold-out options; image swatches start on the $9.90 Silver plan. |
Prices and ratings change often; check the listing before you install. This site is not affiliated with any of these publishers.
Alternatives: Variants King & Color Swatch also groups separate products by color, and FB Variant Image, Color Swatch is free. Both were listed in the Shopify App Store on October 23, 2026.
Route 3
Editing the theme code.
You don't need to edit code for swatches in Impulse. Impulse reads Shopify's swatch data in its variant picker and product tiles, and both are switched on with settings.
Collection pages.
Impulse shows swatches on product tiles through one theme setting, Product tiles > Enable color swatches, so every collection grid picks them up.
-
Turn on swatches for product tiles
Open Theme settings > Product tiles and turn on Enable color swatches, so collection grids show each product's colors. For swatches in collection filters, Archetype documents a separate Enable color swatches option in the Product grid section of Collections > Default collection.
-
Add color filters with swatches (optional)
Open the Search & Discovery app, go to Filters > Add filter, choose Color with the type Category metafield, then open Manage values and turn on Include swatch. For patterns, turn on Use images when available so the filter shows each entry's image.
Impulse at a glance.
The theme's facts from the Shopify Theme Store and Archetype Themes' documentation, checked October 23, 2026. Anything we could not confirm says so.
| Theme | Impulse |
|---|---|
| Vendor | Archetype Themes |
| Price | $500 One-time license price in the Shopify Theme Store, in US dollars, checked October 23, 2026. |
| Free or paid | Paid |
| Where it is sold | Shopify Theme Store |
| Status | Current theme |
| Online Store 2.0 | Yes |
| Current version | 10.0.0 (October 9, 2026) |
| Native color swatches | Yes |
| Variant picker block | Variant picker |
| Swatch setting | Theme editor > Products > Default product > Product section > Variant picker block > Enable color swatches |
| Swatches on product cards | Theme settings > Product tiles > Enable color swatches |
| Swatches in collection filters | Collections > Default collection > Product grid section > Enable color swatches |
| Theme Store swatch features | Color swatches, combined listings |
| Swatch documentation | Archetype Themes' documentation |
| Product images | 1065 x 1420 px 3:4 recommended; minimum 532 x 710; 2x zoomable 2130 x 2840. Square 1:1 also suggested. Source: Archetype Themes' documentation. |
| Slideshow and hero | 2880 x 1620 px Heroes, slideshows, collection headers, 16:9; minimum 1440 x 810. Source: Archetype Themes' documentation. |
| Slideshow on phones | 800 x 800 px Minimum, 1:1. Source: Archetype Themes' documentation. |
| Collection header | 2880 x 1620 px Same row as heroes/slideshows. Source: Archetype Themes' documentation. |
| Blog post images | 2880 x 1410 px Doc states 4:3 ratio with minimum 440 x 330 and "recommended" 2880 x 1410 (ratio and size disagree in the source). Source: Archetype Themes' documentation. |
| Mega menu images | 510 x 234 px Approx. 17:8, pulled from the collection image. Source: Archetype Themes' documentation. |
| Video | 1920 x 1080 px 16:9; minimum 1280 x 720. Source: Archetype Themes' documentation. |
| Last checked | October 23, 2026 |
Swatch problems on Impulse, and fixes.
-
Swatches not showing
Work through three checks in order: the product has a category that includes Color, its Color option is linked to the Color category metafield, and the swatch setting is on in Impulse. In Impulse, that means Enable color swatches in the Variant picker block for product pages and under Theme settings > Product tiles for grids. Each product template you use needs its own Variant picker setting.
-
Wrong colors
A native swatch takes its color from the entry in Content > Metaobjects, not from the color's name. Open the entry, correct the hex value and save, and every product linked to it updates at once. If two products show different shades of the same color, they're probably linked to two separate entries, so point both at one.
-
Pattern or image swatches
Upload a square image to the color's entry. Crop it to the fabric or finish itself rather than a product photo, because at swatch size a busy photo turns into a blur. Multicolor has no preset hex value, so it always needs an image. Archetype's older method used .png files in Content > Files; for native swatches, put the image on the color's entry instead.
-
Out-of-stock variants
How a sold-out color looks is decided by the variant picker in Impulse, so test it: set one color to zero stock and open the product. If you'd rather hide sold-out colors completely, Color Swatch Pug and GLO Color Swatch Variant Image both list that option (checked October 23, 2026).
-
Speed
Native swatches are drawn by Impulse itself, so they add no app script to your pages. A hex swatch costs nothing extra to load; an image swatch adds one small image per color, so keep those files small. The swatch loading speed guide shows how to measure a collection page before and after a change. Archetype's product photo advice is 1065 x 1420 px at 3:4; swatch images need only a small fraction of that.
Impulse swatch questions.
Which Impulse setting turns on color swatches?
In the theme editor, open Products > Default product, then the Product section's Variant picker block, and turn on Enable color swatches. Archetype's swatch article and theme comparison chart, checked October 23, 2026, confirm Impulse supports swatches from category metafields.
How do I show swatches on Impulse collection pages?
Turn on Theme settings > Product tiles > Enable color swatches. Archetype also lists an Enable color swatches option in the Product grid section of the default collection template, which covers the collection's filters.
Do I still need Impulse's older swatch method?
Only for products you haven't linked to the Color category metafield. Archetype's older method matched an option named Color to HTML color names or to .png files uploaded in Content > Files. Native swatches are easier to keep tidy, because fixing one entry fixes that color on every product.
What image size suits Impulse product photos?
Archetype recommends 3:4 images at 1065 x 1420 px, with 532 x 710 as the minimum and 2130 x 2840 for sharp zoom (checked October 23, 2026). Square images work too. Swatch images can be far smaller, since they show at button size.
Does Impulse show swatches in collection filters?
The Theme Store doesn't tag Impulse with swatch filters (checked October 23, 2026), although it tags color swatches. Add a Color filter in Search & Discovery, turn on Enable color swatches in the collection's Product grid section, and preview; if the values show as plain text, Impulse isn't drawing filter swatches, and the filter still works as a list.
Related guides and tools.
Themes like Impulse
- Color swatches on every theme
- Impulse theme profile
- Color swatch generator, for swatch images and hex values
- Image size checker, with Impulse's sizes
About this page
This page replaces "CSP App setup for Impulse Theme", a guide first archived in September 2021 on this domain for an earlier version of the Color Swatch Pug app. The domain changed hands in September 2026, and the app's setup has changed since the old guide was written.
Sources
- Shopify Theme Store: Impulse listing
- Archetype Themes help: How to add color swatches with Shopify's built in swatch feature
- Archetype Themes help: Comparison of themes and their features
- Archetype Themes help: How do I set up color swatches
- Archetype Themes help: Impulse release notes
- Archetype Themes help: Image and video size recommendations
- Shopify Help Center: adding color swatches using category metafields
- Shopify Help Center: adding category metafields
- Shopify Help Center: Search & Discovery filters
- Shopify Help Center: apps in your theme (app embeds and app blocks)
Make the swatch files.
Turn your colors into hex values, swatch images and a printable sheet, ready for Shopify.