Set up alternative collection images for grid listings

The Subcollections and Tabbed collection lists sections support alternative images for the collections they display. This is especially useful when a collection’s main image has a drastically different dimensions ratio (e.g. a logo for a brand collection) than the rest of the collections displayed next to it.

This guide will show you how to set up alternative images for your collections, so they can be displayed where supported.

Setting up metafields

The first thing you will need to do is set up the Grid Collection Image metafield. This is necessary to be able to assign alternative images to your collections.

Navigate to your store’s admin, and in the bottom left corner click on Settings. Then navigate to Metafields and metaobjects from the left-hand side menu. Under Metafield definitions, click on Collections.

Then click on Add definition, and enter the following settings:

Name: Grid Collection image

Type: Select the Image (File) type and make sure One is selected.

The details should be exactly as in the screenshot below:

Hit the “Save” button. The metafield has been successfully defined. Let’s see how to use it.

Assigning a grid image to a collection

After you’ve defined your Grid Collection Image metafield, navigate to any of your store’s collections in your store admin by going to Products, and then Collections from the main navigation on the left.

Scroll down to the Metafields section and you will see the Grid Collection Image metafield you defined in the previous step. Click on the field to select an existing image or upload a new one.

Select the desired image and Save your collection.

Displaying the grid collection image

The Grid Collection Image will automatically be displayed when the collection appears in one of the supported sections. Any section-specific settings that affect the appearance of collection images (such as Image or Card ratio) will apply normally, without the need for any further steps.