If your project’s business is reselling artworks of different artists or maybe products from different brands, having a page where you can display them would help your visitors or potential customers find them easily and would make it a better experience for them.
In the case of brands, you have an option to just use the ‘vendors’ field on the product listing. You can just iterate the products on the page and access the ‘vendor’ property. However, if you want an image/logo of that brand to be displayed as well, you’ll have to store these images on a file and manually update them in the future whenever there is a new brand added to your store.
I used to do this and I can’t say it was too hard, but I always wished there was a place where I could just store each brand’s logo and name more efficiently.
Thankfully, Shopify recently launched a new feature that was designed specifically for this, the Metaobjects.
In this tutorial, I will show you how you can display a list of any kind of items you want on a Shopify page.
In this tutorial we are trying to display a list of brands.
So, before you can use or assign a Metaobject, you first need to create it and define what it is and what it is about. You need to build the necessary fields for it. If you are completely new to this feature, you may follow the steps here.
After this, add maybe 3-5 brands (logos and brand names) that you want to display on the page.
1. On the left panel on Shopify, click ‘Online Store. Then on Themes, click the ‘three dots’ icon and select ‘Edit code.’
2. Next, on the left panel, look for the ‘Templates’ folder and click ‘Add a new template’. You can just select liquid and put brands as the file name. Save it.
3. Go back to Shopify’s admin page.
4. On the left panel on Shopify, click ‘Online Store.’ Then click pages and click ‘Add page.’
5. Next add the page’s name and change the template on the bottom right part to the template you’ve just created.
6. Save it.
1. Open the code editor and go to the template you’ve created for the page.
2. Iterate the entries you’ve created for this Metaobject. To do this, you will need to use ‘shop.metaobjects’ then add the assigned type. So that will be ‘shop.metaobjects.brands.values’ just like what shows on the screenshot below.
3. Use the variable you used in the iteration to access each value.
4. Save it.
And there you go, you should now see all of the entries you’ve added on your Artists Metaobject.
If you have a lot of items to display, it would be great to have a search bar to help your visitors find what they are looking for faster. Follow my tutorial on: How to Add a Page Search Bar on Shopify.
