How to add custom collection images using metafield

This guide provides step-by-step instructions on how to add a Metafield Banner Block to your Appbrew dashboard and make it live. The process involves configuring Metafield definitions, selecting appropriate images, and publishing your changes on the Appbrew mobile app builder. Follow the steps below to successfully complete the task.

Step 1

To begin, navigate to the settings section on your Shopify dashboard. Within the shop dashboard, locate and click on the "Metafields & Metaobjects" option.

Step 2

In this section, you need to search for the collection or navigate directly to the collections' Metafield definitions. Here, add a new Metafield definition, providing a name for your collection as per your preference.

Step 3

Choose the type as "single type," and set the file type to "image." Ensure to grant access to the Storefront API to fetch the necessary information. After configuring these settings, save the changes.

Step 4

Next, navigate to the collections on your Shopify dashboard. Select the collection to which you want to add this banner, then go to the Metafields section.

Step 5

Within this section, find the collection Metafield you previously created. In this example, it is the Metafield banner. Select an image that should be included in the banner.

Step 6

For instance, choose the desired image to add. Once the image is selected, save your changes. After saving, proceed to the Appbrew mobile app builder and locate the product list page.

Step 7

On the product list page, find and click the "add" button. This allows you to insert the Metafield banner block. You can reposition it to the top of the page to prominently display the banner. The "add Metafield block" option will be visible on the right section.

Step 8

Utilize this section to add the collection banner Metafield you created. Once this is done, publish the changes to make them live. You can also use the preview mode to test changes before finalizing. Ensure the image is populated in the Shopify backend and that Shopify API access is enabled.