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 “Metafields and metaobjects” from the left-hand side menu and then click on “Collections“. You should be seeing the following screen:

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

Name: products_title_image

Select type: Select “One”, and then select the “Image (File)” type.

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

Select type: Select “One”, and then select the “URL” type.

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.