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 per product variant. Baseline version 3.0.0 and later includes the Multiple variant media feature. The feature supports adding multiple images and other media for each product variant. Baseline's Product pages, Product pages - thumbnails, and Product - three column sections 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 arrange the product's media items in sequence.

   

   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 place each variant's remaining media items after that variant's first assigned media item, so all media for that 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 the 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 default behavior on Shopify. Typically, the media that Shopify displays always correspond to a selected variant.

Configure the feature for a product section

Baseline's Product pages, Product pages - thumbnails, and Product - three column sections support the Multiple variant media feature. For more information about the Product pages sections, refer to Product pages, Product pages - thumbnails, and Product - three column.

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 the Theme editor.

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

4. From the side menu, select a product section. For example, select the Product pages, Thumbnails, or Three column product 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, Thumbnails, and Three column 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 only a single product media item. 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.