Using Metaobjects with Theme Editor
Using Metaobjects with Shopify Liquid
If you haven’t set up your Metaobjects yet and need a walk-through on this feature from scratch, follow my tutorial: What is Shopify’s Metaobject and How to Use It, before this.
There are 2 ways to use Metaobjects. Depending on your skills as a developer and the requirements of your project, you can either use it in the theme editor where you can simply assign the data you created to the elements/sections available in your theme, or use the code editor for more flexibility. Either way, Metaobjects is guaranteed to take your project to another level.
In this tutorial, we’ll be using the Dawn Theme (Shopify’s default theme). It has a section called ‘Image with text’ that’s what we’ll add to the product page.
1. From your theme editor, select ‘Products’ from the dropdown on the top.
2. Then add the ‘Image with text’ section.
3. Under the ‘Image with text’ section, on the top, you’ll see an image field where you can assign the image you want to use. But instead of doing that, you’ll click the icon that looks like stacked coins.
4. Then, select ‘Brand’ and click ‘logo.’
5. Next, you just need to do the same for the heading and the description and assign their respective details.
6. Save it.
After this, you will see that whatever brand you assign to your products will display accordingly on your store. Amazing!
Using Metaobjects with Shopify Liquid is a cool way to make your project even more personalized and unique since you are free to use it with any kind of layout or design you want to build.
In this article we won’t be designing the layout at all since that is not the point of this tutorial. I’d like to focus more on how exactly you can use Shopify Liquid and HTML to successfully display your Metaobject entries on your store.
1. Open the ‘Code editor.’
2. Create a new section and name the file.
3. Make sure to add this new section to your product page, otherwise it won't show up. Be sure to check instructions on Youtube or Shopify's documentation on adding a new section on a page if you're not sure how it's done.
4. Write your HTML code where there is a place for an image, a brand name and a description. Just like the code in the screenshot below.
5. Set up a product metafield for your Metaobject. This is how you will be able to assign a Metaobject on a product. If you are not sure how this is done, please check the steps here.
6. Next we need to assign a variable for the product's Metaobject Metafield.
If you followed my tutorial on setting up a Metaobject, you’ll know that we used ‘details.brand’ under 'namespace and key.' Which is why it's what shows in the screenshot.
7. We can now then use the variable to display the values. As you can see in the screenshot below, using the ‘brand_info’ keyword, we’ve added the following: brand_info.brand_name, brand_info.logo and brand_info.description.
7. Save it.
Shopify’s Metaobject is a very powerful feature that you can take advantage of and can take your Shopify development experience to a whole new level. It may take some getting-used-to but once you do, it is guaranteed to make your life easier as a Shopify developer.
If you have a list of items you wish to display on a custom page using Metaobjects, follow my tutorial: How to Display a List of Items on a Shopify Page Using Metaobjects
