Adding specific related products to a product page just got easier 🎉.
Shopify recently added two new features that make this process a lot more straightforward and user friendly for the merchant.
- List values for product metafields
- The new product_list section input setting
Prior to these we could use metafields, but we'd have to explain how to create metafields with namespacing and finding the product handle to merchants if they wanted to be able to edit/add them. This also made the process a little brittle, prone to spelling errors or changes to the product handle.
List values for the product metafield
Shopify has recently provided us with a new metafield paradigm. We can now add metafields directly to Shopify objects like Product or Variant directly in the product edit page.
We also have access to a whole bunch of new types of values we can create in the metafield including files, booleans, and lists.
Here's a quick Metafield reference.
Creating a product list metafield
To create a new metafield go to Settings > Metafields, then choose Products for the object you'd like to put the metafield on. You'll then click Add definition and add the name, namespace, and description. You'll then select the content type. For this, we'll want to choose reference.
A reference is an existing Shopify object, and here you'll be able to choose from Page, Product, or Product Variant.
You'll also see a new option when you click on Product. A checkbox for Accept list values. This let's the user add multiple products to this one metafield 🙌.
Once that's done, go to a product and at the bottom of the page you'll be able to add the products to the metafield.
Then to display products we loop over the metafield value and access the product object as normal.
Note that the syntax is product.metafields.[[metafield namespace]].[[metafield name]].value.
Recommended Products
{% assign recommended_products = product.metafields.my_fields.rec_products.value %}
{% for product in recommended_products %}
-
{{ product.featured_image | image_url: width: 400 | image_tag: loading: 'lazy' }}
{{product.title}}
{% endfor %}
The new product_list section input setting
But wait ✋, there's more!
Shopify has also provided us with a new section input type: product_list. Here's the reference.
The syntax is quite simple. Just add a new option to you section settings that looks like this.
{
"type": "product_list",
"id": "rec_product_list",
"label": "Rec Product List"
}
🔥Hot Tip: Here's a really simple intro to sections and here's the Shopify docs.
This will allow the merchant to choose the products right from the theme editor. Of course, if they choose products like this, they'll be the same products across all product pages.
However, you'll notice the connect dynamic source icon. This will allow you to connect this field to the metafield product list we just made.
Why? you might ask would we create a section, when we were already able to achieve the same results above?
Well, the section gives the merchant more flexibility in where they can put it and with Sections Everywhere, the merchant could put the section on the homepage with static data and on the product pages with dynamic content. Less coding for you, more options for the merchant - win win 🏆
🔥Hot Tip: If you want to get a little more fancy with the UX, here's a post on using Vue.js for related products.
