How to Create Multiple Products Using Metafields on Shopify Product Pages

Adding custom products to your Shopify product information page can improve your clients' shopping experience by highlighting related or recommended products. This step-by-step article will show you how to display multiple products from metafields on your product details page, making your store both user-friendly and search engine optimized.

Step 1: Create a Metafield Definition

Log in to Shopify Admin: Navigate to your Shopify Admin Panel.
Go to Settings: Click on "Settings" in the bottom left corner of your admin dashboard.

Select Metafields: Under Settings, click on "Custom data" and then select "Products."

Add Definition: Click on the "Add definition" button.

Enter a Name: Input a descriptive name for your metafield, such as "add_product."
Choose the Content Type: Set the content type to "product."
Select Product Option: Decide whether you want to link a single product or a list of products

Save the Definition: Click on the "Save" button to finalize your metafield definition.

Creating metafields not only allows you to customize your product pages, but it also helps with SEO by offering additional context and keywords to search engines.

Step 2: Assign a Metafield Value to a Product

Go to Products: From the Shopify admin, click on "Products."
Select a Product: Choose the specific product to which you want to add a metafield value.
Add Product: Click "Select" to add the related products you defined in the previous step.

Save Changes: After assigning the metafield value, click "Save" to apply your changes.

This step is important for linking products and improving the user's ability to discover new items, which can lead to increased sales.

Step 3: Edit Your Product Template

Go to Online Store: Click on "Online Store," then select "Themes."
Edit Code: Locate your current theme, click on "Actions," and choose "Edit code."

Locate the Product Template: Depending on your theme structure, you may find this under "Sections" or "Templates." Look for a file named product.liquid or product-template.liquid.

Step 4: Display the Metafield in Your Product Template

Find the Appropriate Place: Choose where you want the metafield to be shown in your product template. This might be under the product description or in a separate section for related products.
Insert the Liquid Code: Add the following Liquid code snippet to display the metafield:

<div class="recommended_section">
{% assign recommended_products = product.metafields.custom.add_product.value %}
{% if recommended_products %}
<h3>Recommended Products</h3>
<ul>
{% for product in recommended_products %}
<li>
<a href="{{ product.url }}">
<img src="{{ product.featured_image | img_url:'300x300' }}" alt="{{ product.title }}">
<p>{{ product.title }}</p>
<p>{{ product.price | money }}</p>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>

Adjust the HTML Structure: Feel free to change the HTML to match your store's design and aesthetics. A well-structured layout improves the user experience and makes your store appear professional.

Conclusion

Follow these instructions to efficiently show multiple products from metafields on your Shopify product details page. This feature not only increases customer engagement, but it also helps your store's SEO, making it easier for potential buyers to find your products.

Implementing metafields to highlight related products can increase sales and provide a more enjoyable browsing experience for your customers. So, take the time to create your product pages and watch your store grow!

Back to blog