- Loft Paid theme
- By Trailblaze Media
- $180
- Native swatches: unconfirmed
- Version 2.4.1
Color swatch guide
How to add color swatches to the Loft theme.
Loft is a paid theme by Trailblaze Media, $180 in the Theme Store and at version 2.4.1 (October 2, 2025) as of October 23, 2026. The Theme Store tags it with color swatches and swatch filters, but the vendor's help center has no swatch article, so we couldn't confirm native support or the setting names. Loft is one of the themes this domain covered in 2018.
Which route fits Loft?
Route 1
Shopify's native swatches.
Route 2
A swatch app.
Until native swatches are confirmed for Loft, an app is the route you can count on. GLO Color Swatch Variant Image covers product and collection pages on its free plan, Swatchy (Color Swatches) turns option menus into swatches, and Color Swatch Pug covers both page types.
-
Duplicate Loft first
In Online Store > Themes, open the menu beside Loft 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 your test showed Loft has its own swatch setting, switch it off while the app is on, so the page shows one picker.
-
Preview a product page and a collection page
Use the theme editor preview, then a phone, to check both page types in Loft. 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 Loft
| App | From | Rating | What it does |
|---|---|---|---|
| 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. |
| Swatchy ‑ Color Swatches | $8.99/month | 4.6 (25 reviews) | A newer Built for Shopify app that turns option menus into color, image and size swatches; the free plan covers one product, so it's mainly a way to test. |
| Color Swatch Pug | $6.99/month | 4.6 (55 reviews) | One $6.99 monthly plan with a 14-day trial for color and pattern swatches on collection and product pages; it isn't Built for Shopify, and its listing still links to this site, which is independent of the publisher. |
Prices and ratings change often; check the listing before you install. This site is not affiliated with any of these publishers.
Alternatives: OP Color Swatch Variant Images and Rubik Variant Images & Swatch restyle the product-page picker, and FB Variant Image, Color Swatch is free. See the apps table on the color swatch guide hub.
Route 3
Editing the theme code.
You don't need to edit code for swatches in Loft. Loft is a current Theme Store theme, so test for native swatches first and use an app if they're missing; either is safer than editing the theme.
Collection pages.
Product card swatches aren't documented for Loft. An app is the dependable way to put colors on collection pages.
-
Add an app for card swatches
GLO Color Swatch Variant Image (free plan lists collection-page variants) and Color Swatch Pug both add swatches under product cards. Test on a duplicate of Loft first.
-
Add color filters with swatches (optional)
The Theme Store lists swatch filters for Loft (checked October 23, 2026). 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.
Loft at a glance.
The theme's facts from the Shopify Theme Store and Trailblaze Media's documentation, checked October 23, 2026. Anything we could not confirm says so.
| Theme | Loft |
|---|---|
| Vendor | Trailblaze Media |
| Price | $180 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 | 2.4.1 (October 2, 2025) |
| Native color swatches | Unconfirmed |
| Variant picker block | Not confirmed by the vendor |
| Swatch setting | Not confirmed by the vendor |
| Swatches on product cards | Not confirmed by the vendor |
| Theme Store swatch features | Color swatches, swatch filters |
| Swatch documentation | Trailblaze Media's documentation |
| Slideshow and hero | 700 x 900 px "Slideshow with promotions" with the slide next to featured links; above the links use 1920/1480/1280px wide; mobile hero 760 x 1250; double sizes for text-heavy images. Article may describe older Loft versions. Source: Trailblaze Media's documentation. |
| Last checked | October 23, 2026 |
Swatch problems on Loft, 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 Loft. If Loft has no swatch setting anywhere in the product template, native swatches aren't available in your version, and an app is the way forward.
-
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. Trailblaze Media's only image guide covers slideshows and may describe older versions; keep swatch images small.
-
Out-of-stock variants
How a sold-out color looks is decided by the variant picker in Loft, 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 Loft 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.
Loft swatch questions.
Does Loft support Shopify's native color swatches?
The Theme Store lists color swatches for Loft, but Trailblaze Media doesn't document them, so we couldn't confirm it (checked October 23, 2026). Test one product before you plan around it.
How do I test Loft for native swatches?
Link one product's Color option to the Color category metafield, then open the product template in the theme editor and look for a swatch setting in the variant picker or product section.
Which Loft version is current?
The Theme Store listed Loft 2.4.1 from October 2, 2025 on October 23, 2026. The newest release note in Trailblaze Media's help center was for 2.3.8, from May 2025.
Which app should I use for swatches in Loft?
Start with GLO Color Swatch Variant Image's free plan if you want swatches on product cards too, or Color Swatch Pug's 14-day trial. None of the apps we checked names Loft, so test on a duplicate.
Where did the old Color Swatch Pug guide for Loft go?
This page replaces it. The old guide, published on this domain on June 21, 2018, covered a manual install of an earlier version of the app; today's setup is at /csp-app-setup-guide/.
Related guides and tools.
Themes like Loft
- Color swatches on every theme
- Loft theme profile
- Color swatch generator, for swatch images and hex values
- Image size checker, with Loft's sizes
About this page
This page replaces "CSP App setup for Loft Theme", a guide published June 21, 2018 on this domain for an earlier version of the Color Swatch Pug app. The domain changed hands in September 2026, and the old guide's manual code steps no longer apply to the app.
Make the swatch files.
Turn your colors into hex values, swatch images and a printable sheet, ready for Shopify.