Brickspace Lab
Contact usContact ShopifyTry a theme
Keystone
Keystone
  • Keystone documentation
  • Getting started
    • Theme basics
    • Theme settings
      • Colors
      • Typography
      • Borders
      • Prices
      • Quick add
  • Guides
    • Products
      • Product badges
      • Product subtitles
      • Custom content for tables
      • Replace "Add to cart"
      • Disable quick add
    • Wholesale
      • Wholesale basics
      • Account restrictions
    • Color and option swatches
    • Device specific visibility
    • Discount popups
  • Templates
    • Collection template
    • Product template
    • Blog template
    • Article template
  • Sections
    • Global Sections
      • Header
      • Footer
      • Navigation links
      • Announcement
      • Cart drawer
      • Account drawer
      • Search drawer
      • Menu drawer
    • Media & Promotional
      • Slideshow
      • Video
      • Split banner
      • Marquee
      • Image hotspot
      • Countdown
      • Discount
      • Banner
      • Slider
      • Testimonial slider
      • Search banner
    • Product & Collection Displays
      • Product grid
      • Product slider
      • Product table
      • Product comparison
      • Recently viewed
      • Collection list grid
      • Collection list slider
      • Featured product
      • Comparison table
    • Content & Marketing
      • Rich text
      • Blog posts grid
      • Testimonial grid
      • Logo list
      • Icon grid
      • Collapsible content
      • Tabs
      • Collage
    • Utility & Custom
      • Custom liquid
      • Tool tip
      • Store locater
    • Forms & CTAs
      • Email sign-up
      • Sign-up form
      • Contact form
  • General
    • Changelog
      • v1.3.0
      • v1.2.0
      • v1.1.0
      • v1.0.1
      • v1.0.0
    • Known issues and troubleshooting
    • Cloning a demo theme
      • Knit
      • Kingpin
      • Kindred
      • Kettle
      • Kaleidoscope
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. Guides

Color and option swatches

Swatches help customers select variants (colors/materials) more easily. Customize them using:

  • Images

  • Hex color codes

Using Swatch Options

To show swatches on product pages/cards:

  1. Update product's "Category" field

  2. Add new option (Color/Material)

  3. Connect option to a metafield

  4. Customize each swatch:

    • Change hex code

    • Upload custom image

Using Swatch Filtering

Customize filters with Shopify Search & Discovery:

Create Swatch Filter from Metafield

  1. Go to Shopify Settings > Custom Data

  2. Create Metaobject Definition:

    • Name: "Swatch"

    • Add fields:

      1. Label (required): Single line text

      2. Color (optional): Color field

      3. Image (optional): Image file

  3. Create Product Metafield:

    • Type: Metaobject (List of values)

    • Reference your Swatch metaobject

  4. Assign values to products:

    • Edit product > Product Metafields

    • Add color/material options

  5. Connect to filter:

    • Open Search & Discovery app

    • Add new filter using your metafield

    • Label it (e.g., "Color") and save

Important Notes

  • You must manually update metafields for all products

  • Changes don't happen automatically

Filter by Color Option

  1. In Search & Discovery:

    • Add new filter

    • Select "Color" option

    • Save

  2. For missing swatches:

    • Upload 64x64 JPG files

    • Name format: swatch-[color].jpg (lowercase)

    • Only works with default CSS color names

Last updated 23 days ago

Was this helpful?