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.
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.
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-greenIf our variant color has multiple words, we add a hyphen to separate the words:
#color_olive-greenUse 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 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.
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]
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:
Last modified 1yr ago