1. Navigate

In this tutorial, a banner is displayed on the collections page of the Shopify store. To start, navigate to the Master Metafield application, and in Collection look for the collection to add metafield for. In this example, a collection is chosen to display the banner on it.

2. Create Metafield

Now, click on the collection and create the metafield by adding up the details.

3. Metafield Review

Created Metafield will look similar to this:

4. Copying Metafield

Now copy the metafield code of the metafield that has been created.

5. Adding Metafield in the theme coding

Now navigate to the “Online Store” menu and look for the edit code option under the ‘Action’ dropdown option.

Now under the ‘collection.liquid’ or ‘collection-template.liquid’ file of the Shopify store theme, place the code where ever the metafield needs to be displayed. In this example, the code is placed above the product description. Save the file.

6. Preview on store

Now in the preview theme. The banner is displayed above the collection header.

And now user customize the look and feel of the banner according to theme style using custom CSS.