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 setup
  • Alt-tag format
  • Adding alt-tags to your product images
  • Alt-tag checklist
  • Results
  1. Siblings
  2. Product siblings

Variant image sets with alt-tags

Select which images to display for each product variant

PreviousSiblings block setupNextPage templates

Last updated 2 years ago

Feature introduced in Story 3.2.0

Story supports alt-tags to group product images together and assign to each variant option. This is an entirely different and separate method to Product Siblings for grouping images to variants.

In the below example, clicking a color swatch will display only images for the selected variant rather than all the product images:

How to setup

Start editing your product in the Shopify Product Editor. Setup all your variant options:

After uploading all your images, start assigning each variant option with the First image that will appear in the group set. In our example, we would like the same image to appear first for all sizes in each color option:

Next, we can start adding alt-tags to group our images to variants. In our example, we would like to group the variant images by color.

Alt-tag format

The alt-tag format to use in Story is:

#[group]_[variant]

In our example, we are grouping by color so each of the alt-tags will begin with #color, then an underscore and the variant name.

Examples:

#color_pink #color_grey #color_black #color-green

If our variant color has multiple words, we add a hyphen to separate the words:

#color_olive-green

Use lowercase letters to match the variant names. Be sure you match the variant names you've used in your product setup with each tag.

Adding alt-tags to your product images

Adding your alt-tags are simple. Click on each image uploaded for that product and add the correct tag for each image.

In our example below, this image will be grouped for the black variant set. The alt-tag used is #color_black

Continue to add alt-tags to each of the variant images and Save your product when all alt-tags have been added. You can new preview your product and make sure the variant options are linked to the image sets you've assigned them.

Alt-tag checklist

Here's a quick checklist for your alt-tags to ensure you've created them correctly:

Final format:

#[group]_[variant]

Or for variants with spaces:

#[group]_[variant-name]

Results

Before Without alt-tags, all product images appear every variant option:

After Only assigned images are shown when a variant option is chosen by the customer:

The alt-tag method uses standard swatches and colors. If you require a more customized solution with image based swatches and color names, please refer to Story's feature.

Product Siblings
Images are matched for each variant
Add #color_black to each image that will be grouped as the Black variant set