Techiepugs
Open the tools Theme guides

Color swatch guide

How to add color swatches to the Venue theme.

Venue is a paid theme by Safe As Milk, $380 in the Theme Store and at version 18.2.2 (June 9, 2026) as of October 23, 2026. From version 18.0.0 it detects Shopify's native Color attribute automatically, with no setting to find, and shows swatches on product pages, product cards and Quick Shop. It still supports its older theme swatches, so mixed setups work during a switch.

Checked Venue theme profile

Which route fits Venue?

Route 1

Shopify's native swatches.

Native swatch support in Venue from version 18.0.0.

  1. Update Venue to 18.0.0 or later

    Safe As Milk says native swatch detection starts in Venue 18.0.0. 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 Venue.

  5. Nothing to switch on in the theme

    Venue 18.0.0 and later detect Shopify's Color attribute and show native swatches by themselves, on product pages, product cards and Quick Shop. Native swatches take priority over Venue's own swatches, so you can switch products over one at a time.

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

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

  1. Duplicate Venue first

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

    Venue shows native swatches automatically whenever a Color option is linked, so pick one system per product: keep the link and leave that product out of the app, or leave the option unlinked and let the app draw its swatches.

  6. Preview a product page and a collection page

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

Swatch apps for Venue, 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.
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 Venue. Venue detects the Color attribute and shows swatches without any setting.

Collection pages.

Venue shows native swatches on product cards automatically, as well as on product pages and in Quick Shop.

  1. Check a collection page

    Once a product's Color option is linked, open any collection it's in and confirm the card shows swatches. There's no card setting to change.

  2. Add color filters with swatches (optional)

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

Venue at a glance.

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

Full Venue profile Check images against Venue's sizes
Venue: theme facts
Theme Venue
Vendor Safe As Milk
Price $380 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 18.2.2 (June 9, 2026)
Native color swatches Yes From version 18.0.0.
Variant picker block No block of that name documented
Swatch setting None required: the theme automatically detects Shopify's native Color attribute (native swatches take priority over theme swatches)
Swatches on product cards None required: native swatches show on product cards, product pages and Quick Shop automatically
Theme Store swatch features Color swatches, swatch filters, combined listings
Swatch documentation Safe As Milk's documentation
Product images 900 x 900 px Minimum, 1:1 (or 900 wide). Source: Safe As Milk's documentation.
Collection images 1400 x 788 px Minimum, 16:9. Source: Safe As Milk's documentation.
Slideshow and hero 1400 x 788 px Minimum, 16:9; mobile image 800 wide. Source: Safe As Milk's documentation.
Blog post images 1400 x 788 px Minimum, 16:9. Source: Safe As Milk's documentation.
Collection list images 800 x 450 px Override image, 16:9. Source: Safe As Milk's documentation.
Last checked October 23, 2026

Swatch problems on Venue, 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 Venue. In Venue there's no setting to miss, so check the version (18.0.0 or later) and the option link.

  • 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. Safe As Milk's image sizes are minimums, such as 900 x 900 px for product photos; swatch images can be far smaller.

  • Out-of-stock variants

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

Venue swatch questions.

Do I need to turn on swatches in Venue?

No. Venue 18.0.0 and later detect Shopify's Color attribute and show swatches automatically.

Can Venue mix native swatches and its own swatches?

Yes. Safe As Milk says hybrid setups work, and native swatches take priority where both exist.

Where does Venue show native swatches?

On product pages, product cards and Quick Shop, according to Safe As Milk.

What product image size suits Venue?

Safe As Milk gives 900 x 900 px as the minimum for square product images (checked October 23, 2026).

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

This page replaces it. The old guide, published on this domain on March 16, 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 Venue

About this page

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