Variant image sets with alt-tags

Select which images to display for each product variant

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:

Images are matched for each variant

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 Product Siblings feature.

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

Add #color_black to each image that will be grouped as the Black variant set

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:

• Start with a hashtag character #

• Followed by the option name. Use lowercase letters for the variant name.

• Separate with an underscore _

• The variant-name. Use lowercase and hyphens instead of spaces.

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: