Description: This tutorial will help you display Metafields for your Shopify Store, on various pages like product, order and collection for enhanced engagement and functionality.
After creating Metafield from the "Metafields Plus" app, you must be wondering, how do I utilize those fields like text, html, image or even a file, in order to cater your needs. Well its simple as pie.
Step 1:
To start with, you should look for this magical liquid code, under each Metafield block, within our app. This is already formulated code which you just need copy for now. We will tell you exactly where to paste in next steps.
Step 2:
Now go to your Shopify store admin, and navigate to your themes
Step 3:
These are the list of your themes. Top one is the active theme. If you are just testing you can try pasting code one of the non-active theme. For this tutorial, we will be pasting code into active theme and hence I can just go to my store url and preview changes.
Note : remember you need to 'preview' the non-active theme in order to test the implementation, since that's not published to front yet.
Step 4:
Here comes all your files from your theme. Don't worry, you don't have to be Shopify theme or Liquid code expert to figure out where to paste code. Now the file you need to paste code totally depends on what kind of metafield you are trying to show here.
- Product & Variant metafields are accessible on "product.liquid" file
- Order & Customer metafields are accessible on "customers/order.liquid" file
- Collection metafields are accessible on "collection.liquid" ( don't confuse this one with files ending with "collections.liquid")
- Shop metafields are accessible on all the files as they are global
Step 5:
From last step, you probably have figured out where you need to paste the code. Just search from this box and open the file. Now remember you copied a code from step 1. Just paste it over here and press "Save" from the top right.
Step 6:
Voila ! That's it. You are ready to preview
Note: This tutorial only helps you display the metafield on your store front page, in order to show it to specific section like below 'add to cart' button or in tabs, you need to have an experience with Shopify Liquid and HTML/CSS code or you can contact our support team at sales@atdevelops.com to get this done by one of our Shopify Expert ( which will be paid support calculated based on the complexity of work).