Broadcast v6.2 has been released - Learn more about
What's new
Broadcast Documentation
NewSupport
Latest version
Latest version
  • About Broadcast
    • Broadcast theme documentation
    • Feature requests
  • Updates
    • What's new in Broadcast
      • Release Notes
      • About v6.2 release
      • About v6.1 release
      • About v6.0 release
      • About v5.8 release
      • About v5.7 release
      • About v5.6 release
      • About v5.5 release
      • About v5.4 release
      • About v5.3 release
      • About v5.2 release
      • About v5.1 release
      • About v5.0 release
      • About v4.0 release
  • Sections
    • Broadcast sections
      • Demo store sections
      • Accordion
        • Text column block
        • Image column block
        • Icon column block
        • Custom code block
        • Contact form block
      • Accordion group
        • Heading block
        • Question block
      • Before and After
        • Heading block
        • Subheading block
        • Text block
        • Button block
      • Blog posts
      • Collection list
        • Collection block
      • Collection list hover
        • Collection block
      • Countdown timer
        • Subheading block
        • Heading block
        • Text block
        • Buttons block
      • Contact form
        • Email block
        • Message block
        • Text line block
        • Text area block
        • Telephone block
        • Heading block
        • Spacer block
        • Single checkbox block
        • Select dropdown block
        • Radio buttons block
      • Custom code
      • Custom content
        • Image block
        • Text block
        • Newsletter block
        • Testimonial block
        • Product block
        • Video block
        • Collection block
        • Before and after block
      • Divider
      • Featured blog posts
        • Featured post block
      • Featured collection
      • Featured product
      • Highlights
        • Highlight block
      • Image banner
      • Image with scrolling text
      • Image with text
      • Image with text slider
      • Map
      • Multicolumn
      • Newsletter
      • Press logos
      • Products with image
      • Rich text
      • Rich text with columns
      • Scrolling text
      • Shop the look
      • Sidebar
      • Slideshow
      • Tab collections
      • Testimonials
      • Text columns with icons
      • Text columns with images
      • Text promo
      • Text with products
      • Timeline
      • Video
  • Theme settings
    • Theme settings
      • Colors
      • Typography
      • Buttons
      • Layout
      • Search
      • Social media
      • Product Grid
      • Product Form
      • Cart
  • Header
    • Announcement bar
      • Announcement bar settings
      • Free shipping message
      • Countdown timer
      • Text announcement
      • Custom code
      • Target settings
    • Header
      • Demo store header settings
      • Header section
      • Navigation images
      • Quantity indicators
      • Transparent header
      • Header icons
      • Social icons
      • Sticky header
      • Target settings
    • Toolbar
      • Header toolbar
      • Video walkthrough
    • Mobile menu
      • Getting started
      • Mobile menu blocks
  • Footer
    • Footer settings
    • Footer blocks
      • Link list
      • Newsletter
      • Social
      • Text
      • Page
  • Products
    • Product pages
      • Accordion section
      • Custom form field
      • FAQ Accordions
      • Final Sale
      • Free products
      • Low inventory message
      • Out-of-stock notification
      • Pre-order using metafields
      • Pre-order products using tags
      • Related products
      • Sale items
      • Settings and layout
      • Siblings
      • Size charts
      • Swatches (Updated)
      • Swatch collection styles
      • Tabs and accordions
      • Tab content using metafields
      • Unique image banners
      • Upselling
      • Variant images
  • Product Theme Blocks
    • Title
    • Price
    • Variant picker
    • Buy buttons
    • Siblings
    • Description
    • Upsell
    • Inventory countdown
    • Sharing
    • Local pickup
    • Text
    • Custom code
    • Icon
    • Divider
    • Line item property
    • Feature
    • Complementary products
    • Popup
  • Collections
    • Collection pages
      • Collection page settings
      • Swatch collection styles
      • Product badges
      • Product badges with metafields
      • Product filtering
      • Quick add
      • Sub-collections
      • Cutline second line
      • Featured image
  • Pages
    • Page templates
      • Demo store about page
      • Creating page templates
      • Page section
      • About page templates
  • Blogs
    • Blogs and articles
      • About blogs and articles
      • Featured posts
      • Article page
      • Product links in blog posts
      • Article theme blocks
  • Overlay
    • Popups
      • Popups Theme Blocks
      • Large newsletter
      • Text promo
      • Small newsletter
      • Cookie consent
      • Coupon codes
      • Popup Behavior and Target
  • Promotions
    • Upselling
      • Upselling with metafields
      • Upselling with tags
  • Siblings
    • Product siblings
      • About product siblings
      • How to setup siblings
      • Siblings metafields
      • Siblings color
      • Siblings collection
      • Siblings product setup
      • Siblings block
      • Customizations
  • FAQ
    • Frequently asked questions
      • How to update Broadcast
      • Default theme content
      • Share preview link
      • Hiding prices
      • How to use sections
      • Section blocks
      • How to remove Powered by Shopify
      • Improving the speed of your site
      • How to prevent your images from getting cropped
      • Check your theme version
      • CSS customizations
  • License
    • Theme license
  • Support
    • Contacting support
    • Hire a Shopify Expert
    • Missing Cart Drawer after Updating
Powered by GitBook
On this page
  • Solid color swatches
  • Customize colors
  • Trigger words
  • Swatch images
  • Siblings
  • Variant Images
  • Earlier versions of Broadcast
Export as PDF
  1. Products
  2. Product pages

Swatches (Updated)

Product variant swatches

PreviousSize chartsNextTabs and accordions

Broadcast makes swatches simple. The theme supports solid color swatches, variant images, and siblings. Let's discover these swatch types and how to use them with your store.

  • Solid color swatches - Pick solid colors to help customers find products and variant options. Broadcast lets you customize the color to match your variant color name.

  • Swatch images - Match images in your Shopify image library to variant names. Similar to solid color swatches, you can map images directly to variant names.

  • Siblings - Display product images as variant options. This option is ideal for earlier versions of Broadcast and requires each variant option to be a separate product. While this is a more complex method of setting up your products, it provides a professional look to collection and product pages.

  • Variant images - This option displays the image associated with a product variant to help shoppers choose the right variant. You'll need Broadcast v5.6 or higher for this feature.

Solid color swatches

  • Configure your swatch options in the Theme Settings -> Swatches. Here, you can customize the solid color swatches to appear in Regular or Large sizes and the shape, Circle or Square:

  • We've included HEX color codes that you can customize directly in the Theme Settings. Each variant name can be mapped to a custom HEX color code for the perfect solid color swatch.

Customize colors

Here's how we can customize the colors and match them with the names used for our variants:

We can use a site like Color Hunt to find HEX color codes easily:

Trigger words

  • The trigger word for color swatches is configured in the Content Editor. By default, Broadcast uses variant types "Color and Colour" to trigger swatches.

If your store uses different labels for the variant name, you can trigger swatches with a custom name:

Swatch images

Similar to customizing the colors for swatches, you can also use images to represent a swatch color. An image from your Shopify content library is used. Instead of using a HEX color code, the filename of your image is used in the swatch settings:

Siblings

The Siblings feature is a fully integrated feature that displays product images as swatches in the product grid and product pages:

  • The feature requires each variant option to be configured as a separate product, resulting in a much richer shopping experience for customers.

  • Product images are displayed as swatches on both the collection grid and product pages.

Learn more

There are several steps involved with the Siblings feature; we have an entire section to cover them:

Variant Images

Broadcast can also display images with a feature called Variant Images. This option shows the associated variant image as a variant option on the product form:

  • Variant images were introduced in Broadcast 5.6. Be sure your theme has been updated to use this feature.

  • The variant images feature is best suited for measurements or sizes:

  • It can be configured for color use but won't display in the product grid. Here are some important steps about the feature:

Learn more

Full details about variant images:


Earlier versions of Broadcast

The following instructions are for Broadcast 5.0 and earlier.

If you are using Broadcast 5.0 or earlier, please follow the instructions below to customize swatches

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:

To find additional HEX color codes, visit the link below.

Add custom images to the assets folder

Upload your own custom swatch images and display them on product and collection pages:

How to:

  • Create a small square image (60x60 or 100x100 for best results)

  • Upload to the Assets folder

  • Modify swatches.json to include your color name and image

Video tutorial

Reference from the video:

    {
      "Stripes": "stripes.jpg"
    },

Avoid spaces in the filename

We recommend if your image has spaces, replace them with an underscore or dash: Instead of 'Light Navy.png' use 'light_navy.png' or 'light-navy.png'.

For the JSON file, your multiword variant can look like this:

    {
      "Light Navy": "light_navy.png"
    },

The variant name can have spaces. However, we recommend for the filename of the image, use an underscore or dash instead of a space.

Video tutorial - More tips for custom images

In this short video, we'll look at filenames and an example of creating a custom image for a swatch:

Disabling swatches

Swatches can be toggled on and off in the Theme settings from the Swatches tab:

Broadcast can automatically detect 140 color names. A default grey color swatch represents all other more complex names. Here is a full list of color names that will automatically be converted to swatches:. You can easily override the colors, as shown in the above video.

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:

Color names list
Siblings
Variant images
Color names list
Variant images can be used as variant options
Collection filter panel
Product page form
Color Palettes for Designers and Artists - Color Huntcolorhunters
Color Palettes for Designers and Artists - Color Huntcolorhunters
How to trigger swatches for varant names other than Color and Colour
Video overview on using images instead of a color code
More tips on adding custom images
Logo
Logo