Athora Pages & Homepage Sections Product Page

Config Product Group Media

By default, Shopify themes typically display product media based on a single variant option, such as Color.

Athora's Product Group Media feature lets you display different images or videos based on multiple variant options, such as Color + Size or Color + Size + Fabric.

Key benefits

  • No image alt text configuration required

  • No additional SEO impact

  • Works across all store languages without additional configuration

1. Create the Metafield

Go to:

Settings → Metafields and metaobjects → Metafield definitions → Products → Add definition

Create the metafield with the following settings:

  • Name: Product group media

  • Namespace and key: theme.group_media_obj

  • Type: JSON

Click Save.

2. Configure Product Group Media

Go to:

Theme Customize → Products → only_config_group_media

Step 1: Select the variant options

  1. Click Preview.

  2. Select the product you want to configure.

  3. Select the variant option(s) you want to use for grouping media.

You can combine up to 3 options, such as:

  • Color

  • Size

  • Fabric

Step 2: Assign media to variant values

For each image or video, select how it should be displayed:

  • Specific variant value: Choose the variant value that you want the image to be grouped with.

    Example: Alabaster, Dark Olive, 20×20, or 12×21.

  • * — The media is displayed for all values of the selected option.

    Example: If the selected option is Color, using * displays the media for all colors.

Step 3: Apply the configuration

After configuring the media:

  1. Click COPY CODE.

  2. Open the configured product.

  1. Click the Edit (pencil) icon.

  2. Scroll to the Product group media metafield.

  3. Paste the copied code.

  4. Click Save.

For a complete overview of the setup, see the guide below:

FAQ

1. Why don’t “Pick first variant” or “Pick first variant available” show the correct first variant image?

You will follow option is enabled: Product page → Media → Show first media

When enabled, the theme always displays the first product media, regardless of the selected variant. So you will disable Show first media to display the correct variant image.

2. How many options can I combine?

You can combine up to 3 options (e.g. Color – Size – Fabric).

This is due to Shopify’s limitation:

  • Maximum 3 product options

  • Maximum 2,048 variants per product

As a result, Product Group Media can only be configured within these limits.

3. Where does Product Group Media work?

Besides the product page, Product Group Media also works on:

  • Quick view

  • Featured product section