How to display Related products through Shopify metafields

This component is made up of three sub-components:

1. Related Products Container: Limits the borders of the module as an outer wrapper element.
2. Related Products List: The looping container of the related product items.
3. Related Products Item: Related product card which is populated dynamically with Shopify data on page load.

‍

Setting up the module

Follow the below steps to configure your Related Products module.

① Create the metafield in Shopify

You can skip this step if you already created the required metafield Shopyflow Related Products.

1. Choose a product and go to its settings in Shopify and scroll down to product metafields.
2. Click View All.
3. Click View definitions on the top right corner.
4. Click Add definition button on the top right corner.
5. Give your metafield the following name:
   Shopyflow Related Products
6. Remove anything that's written in the Namespace and key field and enter the following value:
   ‍shopyflow--recommendation.related_products
7. Click Select type and choose Product variant from the list. Choosing product variant as type will allow you pick a specific variant of a product as a related product.
8. Click List of product variants to allow choosing multiple related product variants.
9. Click Save.
10. Make sure the newly created metafield is pinned.

‍

② Choose related products (variants)

1. Choose one product and go to its settings in Shopify and scroll down to product metafields section.
2. Click on the Shopyflow Related Products metafield.
3. Choose the variants that you want to use as related products.
4. Save the product.

‍

③ Add the Related Products Module to your page

1. Navigate to this link and copy the element.
2. Go to Webflow Designer and paste the element on the page.
3. Select the outermost element of the pasted element (Related Products Container)
   • with CMS: Connect the sf-related-products attribute value to the product ID field in the CMS.
   • without CMS: Enter a product ID manually as attribute value. e.g. sf-related-products="9848780620079"
4. Publish your site.
5. By default the title of the products in the Related Products Module take the customer to the respective porudct pages. Take a look at the following section if your product page path is not "products".

If you are using a product page path other than "Products" do the following !

If you are using a product page path other than "products", you need to add the product-page-path attribute to your Shopyflow Engine code snippet.

For example if your product page path is "articles", you need to add product-page-path="articles" attribute to your existing Shopyflow Engine code snippet as shown below.

<!-- Shopyflow CSS -->
<link rel="stylesheet" href="https://cdn.shopyflow.io/[VERSION]/shopyflow.css"/>

<!-- Shopyflow Engine -->
<script defer
sf-token="[STOREFRONT API KEY]"
sf-domain="[SHOPIFY STORE DOMAIN]"
src="https://cdn.shopyflow.io/[VERSION]/shopyflow.js"
product-page-path="articles"></script> 

‍

Do NOT add a second Shopyflow code snippet to your Webflow site or use an example code snippet (like the one above) directly. Update your existing Shopyflow code snippet instead.

‍

‍

‍

‍