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 “Custom data” from the left-hand side menu and then click on “Collections“. You should be seeing the following screen (although perhaps without any metafield definitions yet):

Then click on the top right button that’s labelled as “Add definition“, and in the dialogue enter the following settings:

Name: Grid Collection image

Namespace and key: images.collection_grid. This metafield key is important that it’s named exactly like this.

Select type: Select the “File” type, and then click on “One file” from the toggle that will appear at the bottom.

Select validation: Select “Accept specific types” and make sure only the “Images” checkbox is checked.

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 all the way to the bottom and you will notice that the “Grid Collection image” metafield you defined in the previous step exists as a form input. Clicking on the input and then on the “Select image” button, will open up the image selection dialogue.

Select the desired image, click on the “Done” button, 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.