Techiepugs
Open the tools Theme guides

Color swatch guide

How to add color swatches to the Pitch theme.

Pitch is one of the ten free Horizon themes from Shopify, sharing Horizon's version number, 4.3.0 (October 9, 2026). Its Theme Store listing includes color swatches, swatch filters and combined listings, so you can set up color pickers from the Shopify admin alone. The labels on this page are Horizon's, since Pitch's own code isn't public.

Checked Pitch theme profile

Which route fits Pitch?

Route 1

Shopify's native swatches.

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

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

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

  4. Check the Swatches setting in the variant picker

    In the theme editor, pick Products > Default product from the page menu. Open the Product information section, then its Details block, then the Variant picker block, and make sure Swatches is checked; it's on by default. The block's Style setting switches between Buttons and Dropdowns. Swatch width, height, corner radius and borders live in Theme settings > Swatches.

  5. Keep the Swatches block on product cards

    Switch the page menu to Collections > Default collection and open the Product card block in the Collection section. The default template already holds a Swatches block that shows each product's swatches on its card. If you removed it earlier, add a Swatches block back inside the Product card block and save.

  6. 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 Pitch 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.

Pitch already shows swatches on product pages and product cards, so an app is for extras. Platmart Color Swatches joins separate products into one swatch picker, Rubik Variant Images & Swatch shows only the selected color's photos, and OP Color Swatch Variant Images restyles the picker and adds stock badges.

  1. Duplicate Pitch first

    In Online Store > Themes, open the menu beside Pitch 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 draws its own swatches, uncheck Swatches in Pitch's Variant picker block and remove the Swatches block from product cards, so shoppers don't see two sets.

  6. Preview a product page and a collection page

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

Swatch apps for Pitch, from each App Store listing on October 23, 2026
AppFromRatingWhat 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.
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: Variants King & Color Swatch also groups separate products by color, and FB Variant Image, Color Swatch is a free variant-gallery app with its own swatches. 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 Pitch. Pitch already reads Shopify's swatch data in its variant picker and in the Swatches block for product cards, so every part of the job is a setting.

Collection pages.

Pitch puts swatches on collection product cards through a Swatches block inside the Product card block, and the default collection template already includes it, going by Horizon's code.

  1. Find the Swatches block on product cards

    Switch the page menu to Collections > Default collection and open the Product card block in the Collection section. The default template already holds a Swatches block that shows each product's swatches on its card. If you removed it earlier, add a Swatches block back inside the Product card block and save.

  2. Add color filters with swatches (optional)

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

Pitch at a glance.

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

Full Pitch profile Check images against Pitch's sizes
Pitch: theme facts
Theme Pitch
Vendor Shopify
Price Free Free in the Shopify Theme Store, checked October 23, 2026.
Free or paid Free
Where it is sold Shopify Theme Store
Status Current theme
Online Store 2.0 Yes
Current version 4.3.0 (October 9, 2026)
Theme family One of the Horizon themes
Native color swatches Yes
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 Shopify Help Center
Product images 2048 x 2048 px Shopify help, all themes: "For square product images, a size of 2048 x 2048 px usually displays best." Product and collection images up to 5000 x 5000 px / 25 MP and under 20 MB. Source: Shopify Help Center.
Last checked October 23, 2026

Swatch problems on Pitch, 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 Pitch. Then open Products > Default product in the theme editor and confirm Swatches is checked in the Variant picker block. A product using a different product template needs the same check in that template.

  • 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. If the image doesn't show, check the entry has the image saved, then reload the product page.

  • Out-of-stock variants

    How a sold-out color looks is decided by the variant picker in Pitch, 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 Pitch 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. On collection pages, Pitch only shows the swatches of each product's own options, so a grid of 24 products with five colors each means up to 120 swatches. Hex colors keep that cheap.

Pitch swatch questions.

Does Pitch support Shopify's native color swatches?

Yes. Pitch is in Shopify's Horizon collection, and the Theme Store lists color swatches and swatch filters among its features (checked October 23, 2026). Once a product's Color option is linked to the Color category metafield, the variant picker shows swatches without an app.

Is Pitch the same theme as Horizon?

Not the same design, but the same foundation as far as public information shows. Pitch sits in the Theme Store's Horizon collection and carries the same version number, 4.3.0 from October 9, 2026, which is why this guide uses Horizon's setting names. Shopify doesn't publish Pitch's code, so treat the labels as a strong lead rather than a promise.

Can Pitch show swatches in collection filters?

Yes, the Theme Store lists swatch filters for Pitch. Add a Color filter in the Search & Discovery app (Filters > Add filter, source Color, type Category metafield), then turn on Include swatch under Manage values. Use images when available shows pattern images instead of flat colors.

Can Pitch show swatches on collection pages?

Very likely, in the same way as Horizon: look for a Swatches block inside the Product card block of the default collection template. Pitch's code isn't public, so check your copy before you rely on it, and add the block if your preset left it out.

Where do I change swatch size and shape in Pitch?

In Theme settings > Swatches, going by Horizon's code. Width, height, corner radius and borders are set there once and apply to the variant picker and to product cards alike. If Pitch has no Swatches group in Theme settings, the size options may sit inside the Variant picker block instead.

Related guides and tools.

Themes like Pitch

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