Brickspace Lab
Contact usContact ShopifyTry a theme
Paper
Paper
  • Paper documentation
  • Getting started
    • Theme basics
    • Theme settings
      • Colors
      • Typography
      • Borders
      • Quick Add
  • Guides
    • Products
      • Product badges
      • Product subtitles
      • Variant swatches
      • Fixed buy buttons
      • Replacing “Add to cart”
      • Dynamic variant images
      • Variant filtering
      • Disabling Quick add
      • Customizing Filters
      • Gift cards
      • Quantity picker
      • Subscription options
      • Sibling products
      • Bundled products
      • Custom fields
      • Content drawers
  • Collections
    • Adding Tag Filtering
    • Adding Nested Menu
    • Collection Blocks
  • Sitewide
    • Using device specific visibility
    • Dynamic discount popups
    • Creating a Mapbox API key
    • Designing your menu
    • Migrating custom changes
    • Blog template
    • Search results
  • Sections
  • Sitewide
    • Header
    • Cart drawer
    • Custom liquid
  • Navigation
    • Navigation slider
  • Content and Media
    • Slideshow
    • Collage
    • Video
    • Alternative banner
    • Banner
    • Collapsible content
    • Blog posts grid
    • Icon grid
    • Discount banner
    • Rich text
    • Logo list
    • Slider
    • Testimonials
    • Countdown
    • Image comparison
    • Image hotspot
  • Products and Collections
    • Featured product
    • Featured collection grid
    • Featured collection slider
    • Collection list grid
    • Alternative collection grid
    • Comparison table
    • Recently viewed
    • Collection list slider
  • Forms
    • Email sign-up
    • Contact form
    • Store locator
  • General
    • Changelog
      • v8.0.2
      • v8.0.1
      • v8.0.0
      • v7.6.2
      • v7.6.1
      • v7.6.0
      • v7.5.0
      • v7.4.0
      • v7.3.0
      • v7.2.1
      • v7.2.0
      • v7.1.2
      • v7.1.1
      • v7.1.0
      • v7.0.0
      • v6.2.0
      • v6.1.7
      • v6.1.6
      • v6.1.5
      • v6.1.4
      • v6.1.3
      • v6.1.2
      • v6.1.1
      • v6.1.0
      • v6.0.1
      • v6.0.0
      • v5.2.0
      • v5.1.0
      • v5.0.1
      • v5.0.0
      • v4.1.1
      • v4.1.0
      • v4.0.0
      • v3.0.2
      • v3.0.1
      • v3.0.0
      • v2.0.0
      • v1.2.2
      • v1.2.1
      • v1.2.0
      • v1.0.0
    • Known issues and troubleshooting
      • v8.0.1
    • Cloning a demo theme
      • Poster
      • Parts
      • Pastel
      • Page 3
      • Page 4
Powered by GitBook
LogoLogo

Try a theme

  • Paper
  • Space
  • Keystone

Resources

  • Get theme support
  • Services
  • Contact
On this page

Was this helpful?

Edit on GitHub
  1. Guides
  2. Products

Variant swatches

Last updated 1 month ago

Was this helpful?

Swatches are used to make variant selections easier and more intuitive for customers when they are selecting an option with color. Swatches appear throughout your theme in various places and can be used with custom images or hex code colors.

In order to display swatches on a product page or within a product card we can use metafield connected variant options. This might sound complicated but it's super easy to setup and works great out of the box.

1

Go to the product you want to update

2

Scroll to Category

3

Select the Category of your Product

4

Scroll to Variants

5

Click Add variant

6

Add a new option like Color or Material

7

Right of Option name, click matching metafield

eg. "Color" or "Material"

8

Enter Swatch names

From here you'll be able to change the hexcode or image of each swatch by clicking into it.

9

Hit Save