How to display upsell products through Shopify metafields

This component is made up of three sub-components:

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

Product Page Upsell

1. Go to Shopyflow Webflow App > Store Builder > Add New > Cart & Product Page Upsell
2. In the opening screen choose your source. This is where you can choose whether you want to use the Shopyflow Upsell 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 upsell products.
3. If you haven't created Shopyflow the metafield, you will be asked to create the metafiled on this screen. If you already have this metafield, you can go to the next step.
4. Click Copy element.
5. Paste component on to the page.
6. Select the outermost element of the pasted element (Upsell Products Container)
   • with CMS: Connect the sf-upsell-products attribute value to the product ID field in the CMS.
   • without CMS: Enter a product ID manually as attribute value. e.g. sf-upsell-products="9848780620079"
7. Publish your site.

Choosing upsell 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 Upsell Products metafield.
3. Choose the variants (or products if you set it as such in the Webflow app) that you want to use as related products.
4. Save the product.
5. If you are using Shopify Search & Discovery App as your source, go to this app and choose your upsell products. Shopify calls upsell products "complimentary products". Make sure to go to that section inside the app.

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 Upsell Products
6. Remove anything that's written in the Namespace and key field and enter the following value: shopyflow--recommendation.complementary_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 an upsell 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.