Set up title images for your brand collections

In this guide we will explore how to set up title images for your brand collections, and how to display them on your products.

Title images is a nifty feature that allows placing a brand’s image, such as the brand’s logo, next to the title of products that are associated to that brand. Optionally, you can set a link that users who click on the image will be navigated to.

Setting up the metafields

The first thing you will need to do is set up the necessary metafields. Title images don’t use the brand collection’s image, as you’ll usually want to show a different image on your products than the one displayed on the collection’s banner.

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 “Add definition” button, and in the dialog enter the following settings:

Name: Products title image

Namespace and key: custom.products_title_image. 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.

Validations: Make sure “Accept specific file types” is selected, and uncheck “Videos” so that only “Images” are checked.

The details should be exactly as in the screenshot below:

Hit the “Save” button.

Now click on the top right “Add definition” button once more, and in the dialog enter the following settings:

Name: Products title image link

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

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

The details should be exactly as in the screenshot below:

Hit the “Save” button.

The required metafields have been successfully defined. Let’s see how to use them.

Assigning an image and link to a brand collection

Navigate to any of your store’s brand collections in your store admin by going to “Products“, and then “Collections” from the main navigation on the left.

Make sure the collection is a Branded collection and its name corresponds to the Vendor name that will be assigned to your products, e.g. “AquaTek”.

Scroll all the way to the bottom and you will notice that the “Products title image” and “Products title image link” metafields you defined in the previous step exist as a form inputs.

Clicking on the “Products title image” input and then on the “Select image” button, will open up the image selection dialog.

Select the image you wish to show up as a title image, and hit “Done“.

If you want to link this image with a URL, click on the “Products title image link” input, and enter the URL you want users to be navigated to when clicking the image. As an example, this could be your own collection’s URL, or even the brand’s own website.

When you are finished, make sure to save your changes by hitting “Save“.

Assign a product to the brand collection

Associating products with brands

First you need to make sure that the brand’s products are correctly associated with the brand. To do so, navigate to any of your store’s products in your store admin by going to “Products” from the main navigation on the left, and from the right hand sidebar, under the “Product organization” section, make sure the product’s Vendor field is set to the same as the brand collection’s name, e.g. “AquaTek” as above. Hit “Save“.

Displaying title images

The brand’s title image will be displayed by default next to the product title, on single product pages and on the Featured product section.

You can optionally hide them by unchecking the “Show title image” checkbox that is found on the Title block’s options.