Techiepugs
Open the tools Theme guides

Color swatch guide

How to add color swatches to the District theme.

District is a paid theme by Style Hatch, $220 in the Theme Store and at version 7.1.1 (December 2, 2025) when we checked on October 23, 2026. Its changelog confirms support for Shopify's native swatches from 5.0.0, released September 19, 2024, but the settings articles date from 2019 to 2021, so current labels may differ from the ones below.

Checked District theme profile

Which route fits District?

Route 1

Shopify's native swatches.

Native swatch support in District from version 5.0.0.

  1. Update District to 5.0.0 or later

    District's changelog adds support for Shopify's native swatches in 5.0.0 (September 19, 2024). Check your version in Online Store > Themes.

  2. 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.

  3. 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.

  4. 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 District.

  5. Turn on swatches in the product page section

    In the theme editor, open the product page section settings, set Product variant style to Swatches and pick circle or square for Swatch shape. These labels come from a 2019 Style Hatch article, written before native support arrived in 5.0.0.

  6. Product cards: not documented

    Style Hatch's articles don't document product card swatches for District. Check the collection template; if there's no setting, see Collection pages below.

  7. 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 District 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.

District's own swatches cover the product page, but Style Hatch doesn't document product card swatches. GLO Color Swatch Variant Image and Color Swatch Pug both list collection-page swatches, and OP Color Swatch Variant Images restyles the product-page picker with stock badges.

  1. Duplicate District first

    In Online Store > Themes, open the menu beside District 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.

  2. 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.

  3. 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.

  4. 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.

  5. Avoid two sets of swatches

    If the app replaces the product-page picker, set Product variant style back to its default.

  6. Preview a product page and a collection page

    Use the theme editor preview, then a phone, to check both page types in District. 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 District

Swatch apps for District, from each App Store listing on October 23, 2026
AppFromRatingWhat 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.
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.
OP Color Swatch Variant Images $11.90/month 5.0 (802 reviews) Replaces your theme's text picker with color and image swatches plus stock badges; pricing follows your Shopify plan, from $11.90 a month.

Prices and ratings change often; check the listing before you install. This site is not affiliated with any of these publishers.

Alternatives: Swatchy (Color Swatches) has a free plan for one product, and option builders such as Globo Product Options and Aris Product Options include swatches alongside text fields and add-on prices. Prices and ratings are in 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 District. District's product page section already reads native swatches from 5.0.0.

Collection pages.

Product card swatches aren't documented for District. Swatch filters and apps are the two dependable routes.

  1. Add color filters with swatches (optional)

    The Theme Store lists swatch filters for District (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.

  2. Or add an app for card swatches

    GLO Color Swatch Variant Image and Color Swatch Pug both list collection-page swatches. Test on a duplicate of District first.

District at a glance.

The theme's facts from the Shopify Theme Store and Style Hatch's documentation, checked October 23, 2026. Anything we could not confirm says so.

Full District profile Check images against District's sizes
District: theme facts
Theme District
Vendor Style Hatch
Price $220 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 7.1.1 (December 2, 2025)
Native color swatches Yes From version 5.0.0.
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, combined listings
Swatch documentation Style Hatch's documentation
Favicon 32 x 32 px PNG (article updated Sept 2020). Source: Style Hatch's documentation.
Slideshow and hero 1500 x 600 px All slides identical size (article updated Dec 2020). Source: Style Hatch's documentation.
Product images 2048 x 2048 px Ideal for zoom; at least 1000 x 1000 (article updated Sept 2019). Source: Style Hatch's documentation.
Swatch images (older swatch method) 100 x 100 px PNG named after the color option. Source: Style Hatch's documentation.
Last checked October 23, 2026

Swatch problems on District, 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 District. In District, check you're on 5.0.0 or later and that the product page section's variant style is set to swatches.

  • 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. Style Hatch's older method used 100 x 100 px PNGs named after the color; for native swatches, upload the image to the color's entry instead.

  • Out-of-stock variants

    How a sold-out color looks is decided by the variant picker in District, 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 District 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.

District swatch questions.

When did District add native swatches?

In 5.0.0, released September 19, 2024, according to District's changelog. The Theme Store listed District 7.1.1 from December 2, 2025 on October 23, 2026.

Why don't the District labels match my editor?

Style Hatch's settings articles were last updated between 2019 and 2021, before native swatches existed. Look in the product page section for a variant style or swatch setting.

What size were District's old swatch images?

Style Hatch asked for 100 x 100 px PNGs named after each color option. Native swatches replace that with an image on the color's entry.

What product image size suits District?

Style Hatch's products article suggests 2048 x 2048 px for zoom, and at least 1000 x 1000, though that article dates from September 2019.

Where did the old Color Swatch Pug guide for District go?

This page replaces it. The old guide, from March 27, 2018, described a manual install of an earlier version of the app. The independent setup guide for today's app is at /csp-app-setup-guide/.

Related guides and tools.

Themes like District

About this page

This page replaces "CSP App setup for District Theme", a guide published March 27, 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.

Checked

Sources

Make the swatch files.

Turn your colors into hex values, swatch images and a printable sheet, ready for Shopify.

Open the swatch generator All theme guides