Show Product list from Metafield in EComposer

Author: Jade Abit 4104 views


This Metafield type allows you to create different product lists for different products and display additional product information in your Shopify store. Instead of creating multiple product templates in EComposer or your theme and assigning each template to individual products, you can manage everything more efficiently using metafields, saving you a lot of time and effort.

With just one template and one metafield, the Product list turns into a dynamic and customizable list.

Note: Product list is a list of clickable product links, it can not show Product Images here

image 166

1. Generate the Metafield definitions

Step 1: In the Shopify admin, navigate to Settings -> Metafields and Metaobjects -> Products to create your metafield.

image 159 1024x551 1

Step 2: Click Add definition to create a new metafield or metaobject.

87397

Step 3: Enter the Name, and choose the type for your metafield. Please choose List Product type and Save.

image 161 1024x552 1

2. Adding values to metafields to every single product page

Step 1: Go to Shopify Admin > Products > All Products > Select a certain product that you want to display on the metafield content.
Step 2: Scroll down to the bottom to see the Metafields

    image 133

    Step 3: Find the correct Metafield name that you just created in Settings => Select some products to have a list

    image 135

    3. How to showcase variant metafield on the Product page?

    Please copy and use the SAMPLE CODE below. You can change custom.product_list to your metafield namespace.

    {%for product in product.metafields.custom.product_list.value %} 
    <a href="/collections/{{product.handle}}" target="_blank">{{product.title}}</a><br>
    {% endfor %}

    Note: You can get the NAMESPACE.KEY value from Variant metafield which is set here

    Step 1: Open the Elements panel => add the Metafield element to the position where you want to show the product list.

    image 162

    Step 2: Change the Metafield source to Custom Liquid and add the code to it:

    image 163

    Result:

    image 167

    2 Comments

    • Matt

      February 1, 2024

      Hello,
      I’d like to had the product image on the top of the link in the product list, i use {{product.title}} for the title, do you have a code for product image please ? Like {{product.image}} or somethnig :)
      My goal is to display the list of products of a specific collection to be able to click on other product of this collection with clickable thumbnail and clickable link as is the case.
      Thank you in advance, your plugin is great :)

      Reply
      • Anna Nguyen

        February 17, 2024

        Hi Matt,
        I’m so sorry for my late reply. May I know you are working on which page type? It is a product, collection or a landing page?

        Reply

    Leave a Comment

    Enjoy a free 3-day trial. Then get your first month for $1. Try Now.