Filter media by variant

This guide applies to Aurora version 3.1.0 and newer

The feature allows you to show for every product only the media associated with the selected option value. To set up media filtering, add a rule with a product option (color, or any other) and option values, one (for example, blue) or more (for example, blue, sunny yellow, black/white), as alt text to the corresponding product media.

To add alt text to the product media, follow the steps below:

  1. From your Shopify admin, go to Products.

  2. Click the name of the product to open the product details.

  3. Click a product media item to open the Media preview.

  4. Click Add alt text.

  5. Enter a rule with the option and the option value (or values) as shown below. The letter case doesn’t matter.

#color_blue (for one value)

#color_blue, sunny yellow, black/white (for multiple values)

  • start with a hash character (#)

  • add option name (ex. color)

  • add an underscore

  • add one option value (ex. blue) or multiple values separated by a comma (ex. blue, sunny yellow, black/white)

  1. Click Save alt text.

  2. Use left and right arrows to navigate through the media gallery, and add alt text with the corresponding option values to all the product media.

  3. Repeat the steps for all the products you want to filter the media for.

IMPORTANT:

  • You can filter media for one product by the ‘color’ option and for another product - by the ‘material’ option, but you can’t use more than one option within one and the same product.

  • If you add any other data to the alt text field, for SEO or accessibility reasons, you need to place it BEFORE the media filtering rule (i.e. before the #).

  • If you have a multi-language store, the media filtering will work only with the store’s default language.

To enable product media filtering in the theme, follow the steps below:

  1. Open the product page and select the Product information section, or add the Featured product section to any page in your store.

  2. Select the checkbox Show only selected variant’s media.

  3. Save the changes in the theme editor.

If a product variant has no media assigned with alt text, all the media available for this product will show when the variant is selected.

Video Guide (Aurora 2.4.0–3.0.3)

Watch the video below to learn how to filter media by variant in older Aurora versions:

Last updated