Story theme
Latest
Latest
  • About Story
    • Story theme documentation
  • Updates
    • What's new in Story
      • Story Releases
  • Sections
    • Story sections
      • Accordion group
      • Blog posts
      • Collection list
      • Collection marbles
      • Collection split
      • Contact form
      • Custom liquid
      • Custom content
      • Featured collection
      • Featured product
      • Gallery
      • Icon columns
      • Image banner
      • Image with text
      • Logo list
      • Map
      • Mosaic
      • Newsletter
      • Overlapping images
      • Page
      • Policy links
      • Press
      • Rich text
      • Slideshow
      • Tabs
      • Team
      • Testimonials
      • Text columns with images
      • Timeline tree
      • Timeline with banner
      • Video banner
      • Video player
  • Settings
    • Theme settings
      • Global theme settings
      • Typography
      • Colors
      • Layout
      • Social
      • Cart
      • Search
      • Product grid
      • Currency format
      • Favicon
      • Advanced
      • Checkout
      • Custom CSS
  • Header
    • Header
      • Header styles
      • Toolbar
      • Navigation images
      • Image menus
      • Transparent header
      • Mega-menu navigation
      • Drop-down navigation
  • Products
    • Product pages
      • Static product tabs
      • Unique product tabs
      • Product tabs
      • Color swatches
      • Inventory countdown
      • Pre-order products
      • Static size chart
      • Unique size charts
      • Creating pages
      • Size Charts
      • Product image sizes
  • Collections
    • Collection pages
      • Product badges
      • Sale badge
      • Savings badge
      • Sold-out badge
      • Custom badges
      • Badge settings
      • Custom filter options
      • Collection filtering
      • Collection sorting
      • Collection navigation
      • Feature image
  • Cart
    • Story cart
      • Cart styles
      • Shipping message
      • Estimate shipping calculator
      • Cart settings
  • Promotions
    • Upselling
      • Upsell promotions
      • How to setup
      • Static upsell promotion
      • Custom upsell promotion
  • Overlay
    • Popups
      • Cookies consent message
      • Newsletter popup
  • Siblings
    • Product siblings
      • About product siblings
      • Multiple images per variant
      • How to setup siblings
      • Siblings metafields
      • Cutline
      • Siblings collection
      • Siblings product setup
      • Siblings block setup
      • Variant image sets with alt-tags
  • Pages
    • Page templates
      • Page navigation
      • How to use page templates
      • Story page templates when using a different theme
      • Contact page
      • Lookbook
      • Team
      • Timeline
  • Blogs
    • Blogs and posts
      • Blogs
      • Articles
  • FAQ
    • Frequently asked questions
      • Where to make CSS changes
      • How to download latest version
      • How to add a line break in your headings
      • Share preview link
      • Remove Shopify link in footer
      • Check your theme version
      • How to use sections
      • Adding a section
      • Hiding a section
      • Reordering sections
      • Section blocks
  • License
    • Theme license
  • Support
    • Contacting support
Powered by GitBook
On this page
  • How to use
  • Customize the trigger words
  • Swatch color names
  • Customizing
  • Add custom color names and values to swatches.json
  • Adding custom swatch images
  1. Products
  2. Product pages

Color swatches

Add visually appealing color and color swatches

PreviousProduct tabsNextInventory countdown

Last updated 3 years ago

Story can display color variants as swatches on product pages and collections:

Collection filtering helps customers find items by color:

Multiple swatches can be selected for greater control. For example, clicking on both red and blue in the filters would show all products that match the colors red and blue.

How to use

Manage color swatch settings under the Theme settings -> Product grid. By default, swatches are enabled:

When enabled, Story will detect if your variant label is Color or Colour and automatically display swatches

When unchecked or disabled, the swatches turn into variant option boxes:

Customize the trigger words

To customize the trigger words which activate swatches, use the Language Editor (Edit languages) and add or modify the values:

Trigger words are the variant label names in your product setup, these are matched with the Language editor:

Swatch color names

Story can easily detect simple color names and convert them to swatches. There are a total of 140 color names Pipeline can detect, all other more complex names will be represented by a default grey color swatch. You can upload your own custom color names and graphics as described below. Here is a full list of color names that will automatically be converted to swatches:

Swatches are generated using the variant color names. If you have simple color names or color names that are listed in the above list, Story will display that color on the product page as a swatch:

If your variant color name is not listed in the above list, a default grey color swatch will be used:

Customizing

Add custom color names and values to swatches.json

Use the swatches.json file located in the Assets folder to add your own custom names and HEX color values:

For example, to change the color displayed for Ink, we can change the HEX value of #696969:

    {
      "ink": "#696969"
    },

Change to a darker black:

    {
      "ink": "#323232"
    },

Adding custom swatch images

The process is exactly the same when using with Story theme.

Learn how to add custom images:

If your products have color names other than the listed colors in the , you can add your own color names and values or upload images to the Assets folder:

To find additional HEX color codes, visit:

With Story, you can add your custom images to represent swatch colors. We have a full tutorial on how to add custom images and display them as swatches on our Pipeline theme support page:

Color names list
https://colorhunt.co
https://pipeline.groupthought.com/products/color-swatches#add-custom-images-to-the-assets-folder
Swatch Color Namesgroupthought
Click to view list of supported default color names
Color Palettes for Designers and Artists - Color Huntcolorhunters
Color swatches|  Pipeline theme
There is a 3-minuite video with full walk-through on how to add custom images
Logo
Color swatches can be used when product variants have colors
Product grid listing on Collection page
Open the Languge Editor (Edit languages)
Change the trigger words under General -> Swatches
Tip: Products that have two color variants like "Top" and "Bottom" can be added to this list.
Swatches are generated using these variant color names
Logo