Set up multiple variant media

This guide explains how to set up Baseline's "Multiple variant media" feature so you can display multiple media items for a single product variant.

In the previous image, a store's T-shirt product page displays multiple images for a color variant.

Shopify admin supports only one image for each product variant. Baseline version 3.0.0 and later includes a Multiple variant media feature. The feature supports adding multiple images and other media for each product variant. The Product pages sections that are included with Baseline's Default and Thumbnails product templates support the Multiple variant media feature.

Note

Due to a hard limitation on the Shopify platform, variant media features do not work if a product has more than 250 variants.

For products with more than 250 variants, instead of using variant media, set up a separate product for each product variant, add your required media to each product, and then link sibling products using our Product groups feature. Refer to Link related products with Product groups.

To set up the Multiple variant media feature:

• First, Assign multiple media to a product variant.

• Then, Configure the feature for a product section.

Assign multiple media to a product variant

To set up multiple variant media, use Shopify admin's Product editor to assign multiple media items to a product variant, and then reorder the product's media items.

To assign multiple media items to a product variant:

1. In your Shopify admin, select Products.

2. On the Products page, select a product that has variants.

   Selecting a product opens the product in the Product editor. To set up variants, refer to Shopify help: Adding variants.

3. In the Product editor, locate the Variants pane.

4. In the Variants pane, assign one media item to each variant.

   

5. In the Product editor, locate the Media pane.

6. In the Media pane, use drag and drop to create a sequence of product media items.

   

   Reorder the media items so that each media item you assigned in the previous step is followed by a media item for a different variant. Then insert each variant's remaining media after that item's first assigned media, so that all remaining media for a particular variant appear together.

   When you're finished reordering your media, your sequence of media items should be similar to the sequence in the following image.

   

7. Select Save.

   Note

   Sometimes the media sequence you specify is not saved correctly in the Shopify admin Product editor. After you reorder your media, refresh the page to ensure your sequence is saved correctly.

In the following steps, you configure the feature for a product section in Theme editor. The section displays the media items associated with each variant.

The sequence of media items that you created in the previous steps determines which variant each media item is associated with. Media items that follow a variant media item are considered part of that variant's "Media group". Media items in the same media group are always displayed together. A media group ends at the first media item for the next variant.

Media you place before the first variant media item are not assigned to any variant. Use this "non-variant" media group for displaying media items that aren't specific to a single variant, such as lifestyle product media or media that show multiple variants. Inside a supported product section's settings, if you enable the section's Show product media first option, items from the non-variant media group are displayed until a store visitor selects a different variant. This behavior contrasts with the typical behavior on Shopify. Typically, the media that Shopify displays always correspond to a selected variant.

Configure the feature for a product section

The Product pages sections that are included with Baseline's Default and Thumbnails product templates support the Multiple variant media feature. For more information about the Product pages sections, refer to Product pages and Product pages - thumbnails.

To use the Multiple variant media feature, complete the following steps to configure a Product pages section.

1. In your Shopify admin, go to Sales channels > Online store > Themes.

2. In the Themes pane, next to the name of the theme you want to customize, select Edit theme to open Theme editor.

3. In Theme editor, at the top of the page, use the theme templates dropdown menu to select the Products > Default product page, or select the Products > Thumbnails page.

4. From the side menu, select the Product pages section.

5. In the section's setting menu, set the Enable multiple variant media option to on.

   With this option enabled, multiple media items are displayed inside the section for products with variants. Variant media items are grouped together on desktop display devices.

   

6. In the section's setting menu, use the Variant media change behavior on desktop setting to specify how media items behave in the section's media area.

   The option you choose determines how the section displays media items. Select one of the options described in the Table: Variant media change behavior options.

   

   Note

   For a Thumbnail product pages section, if you enable the section's Single variant mode option, and then set the section's Thumbnails on desktop option to Grid, the section only displays media item thumbnails for the current variant on desktop display devices.

Table: Variant media change behavior options

The Product pages sections for Baseline's Default and Thumbnails product templates include the Variant media change behavior on desktop setting and the Single variant mode option.

Use these settings to control how media items are displayed in the section's media area when a store visitor selects a product variant. The Variant media change behavior on desktop setting applies to desktop display devices only. The Single variant mode option applies to both mobile and desktop display devices.

The following table describes the available options.

Option name	Description
Single variant mode	With this setting enabled, only media for the current variant are displayed. The section's media area displays a single product media item only. The item that's displayed is the first product media item associated with the currently selected product variant. When a store visitor selects a different product variant, the displayed item changes to match the newly selected variant. For products with no variants, the section behaves as though Single variant mode is enabled by default.
Variant media change behavior on desktop > Swap with first media	In this mode, all of the variant's media are swapped to display at the top. The section's media area displays product media items for all variants, arranged in a column layout. The item displayed at the top of the column is the first product media item that's associated with the currently selected product variant. When a store visitor selects a different product variant, the item displayed at the top of the column changes to match the newly selected variant.
Variant media change behavior on desktop > Scroll to media	In this mode, all of the variant's media items are grouped together so that scrolling to the first media item displays the remaining variant media items. The section's media area displays product media items for all variants, arranged in a column layout. The item displayed at the top of the column is the first product media item that's associated with the currently selected product variant. When a store visitor selects a different product variant, a scroll animation effect moves to display the first media item that's associated with the newly selected variant.