Color swatches
How to add color swatches to the District theme
Color swatches in District by Style Hatch: native support since 5.0.0, the product variant style setting, and collection pages.
- District Paid theme
- By Style Hatch
- $220
- Native swatches: yes
- Version 7.1.1
Shopify theme
The District Shopify theme.
District is a paid Shopify theme by Style Hatch, $220 in the Shopify Theme Store. The current version is 7.1.1 (December 2, 2025). It supports Shopify's native color swatches from version 5.0.0.
The facts.
From the Shopify Theme Store and Style Hatch's documentation. A setting we could not confirm in the vendor's own documentation says "not confirmed by the vendor".
Checked
| 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 |
| Last checked | October 23, 2026 |
Image sizes.
The sizes District's documentation gives, each linked to its page. The image size checker applies them to your own files.
| 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. |
Guides for District.
Tool
Theme image size checker
Drop in product photos, banners and logos to check them against Shopify's limits and District's documented sizes.
Swatch apps for District.
The apps the District swatch guide suggests, and what each App Store listing says about theme support (checked October 23, 2026). Ratings and the full comparison are on the color swatch hub.
| App | From | Theme support | Collection pages |
|---|---|---|---|
| GLO Color Swatch Variant Image | $9.90/month | Listing says it works with all themes | Yes |
| Color Swatch Pug | $6.99/month | Listing names no themes | Yes |
| OP Color Swatch Variant Images | $11.90/month | Listing offers theme setup help, names no themes | Not listed |
Sources.
Every fact above comes from one of these pages. The swatch guide lists the Shopify help pages its steps rely on.
Set up swatches on District.
Shopify's own swatches, an app or the code route, with the setting names for this theme.