Skip to content

The4 BFCM is LIVE: 15% off Athora & Vetro + free setup. Explore offers

Cart

Your cart is empty.

Looks like you haven't added anything to your cart yet.

Continue shopping

Config Product Group Media

This feature is available starting from Vetro version 2.1 . By default, most Shopify themes only support media display based on a single option (usually Color …

2 min read

On this page

    This feature is available starting from Vetro version 2.1.

    By default, most Shopify themes only support media display based on a single option (usually Color).

    Vetro supports multiple combined options (e.g. Color + Size) with a simple setup:

    • No image alt text required

    • No SEO impact

    • Fully compatible with all store languages (no reconfiguration needed)

    Unlike other solutions that require complex metafield setup for each variant, Vetro keeps everything clean, simple, and easy to manage.

    1. Create the metafield

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

    Set up the metafield as follows:

    • Name: Product group media

    • Namespace and key (Required): theme.group_media_obj

    • Type: JSON then Save.

    2. Theme Configuration

    Step 1: Configuration template

    Go to Theme Customize → Products → only_config_group_media

    Notes:

    • Click Preview → Change product to the product you want to configure

    • Tick the checkbox(es) of the variant option(s) you want to group media

    Step 2: Assign media to option values

    For each image / video, choose one of the following values:

    • Specific variant value
      Example: Alabaster, Dark Olive, 20*20, 12*21 → Media shows only when that variant is selected

    • None → Media does not show for any variant

    • * → Media shows for all values of the selected option
      Example:
      Option = Color → * → Alabaster, Dark Olive… all display this media

    Step 3: Copy and apply the code to the product

    • Click COPY CODE

    • Click the Edit (pencil) icon of the configured product

    • Scroll down to the Product group media metafield

    • Paste the copied code → Save

    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

    If you would like our team to check your setup, please contact us on Live chat.

    Need a Shopify store to follow along? Start a free Shopify trial

    Was this page helpful?

    Contact support

    Building client stores on Vetro?

    Join The4 Premium Partner for priority support, white-label handover docs and up to 25% off services for your clients.

    Become a partner

    What are you looking for?

    Try a popular search or jump into a guide below.

    Popular searches

    ↑↓ navigate ↵ open Esc close
    Need help? Chat with us