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

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

1. Go to Shopyflow Webflow App > Store Builder > Add New > Related Products
2. In the opening screen choose your source. This is where you can choose whether you want to use the Shopyflow Related Products metafield or the Shopify Search & Discovery App metafield as your source. Different from Shopify, Shopyflow’s metafield additionally lets you use specific variants as related products.
3. Create the metafield.
   
   • Shopyflow stores created with Shopify app: If you haven’t created the metafield, you will be prompted to create the metafiled. You can do so by clicking the button at the bottom of the same screen.
   • Legacy Shopyflow stores: Scroll to the bottom of this guide to read the last section.

② Choose the related products in Shopify

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. Go to the Shopyflow Webflow App > Store Builder and find Related Products component.
2. Click copy and paste the component to 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 your product page path is not "products", go to the Shopyflow Webflow App > Installation > General Settings and enter your custom product page path.

Stores with legacy installation (without a Shopify app) do the following!

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. However you can also choose Product to be your type. Shopyflow will automatically detect your choice.
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.

‍