Add custom product recommendations
By default, the Product Recommendations section of your Product page will display 4 products automatically.
You can customize the section by making it show specific recommendations common to all products, or specific to each product individually. Finally, you may want to temporarily revert back to automatic product recommendations.
1. Common recommendations
On the Product recommendations section, click on Add Related product and then select the newly Related product block created.
On the block’s properties, click on the Select product button.
Select the product you want, and click on the Select button.
The product will appear under the Related products section of your product page.
Repeat up to 3 times (maximum 4 blocks), depending on how many related products you want to show.
2. Per-product recommendations
User-selected recommendations for each product is a bit more involved, and it requires a couple of one-time setup steps, as well as an assignment step for each product.
- Set up custom fields (one-time step)
- Assign related products (per-product step)
- Show related products (one-time step)
2.1. Set up custom fields
While on your store’s admin page, click on the Settings link on the bottom-left corner of the page, and then click on the Metafields section on the left side of the page. You will be presented with a list of fields; select Products. Alternatively, you can append /admin/metafields/product to your store’s URL to visit the same page directly.
- Click on the Add definition button.
- In the Name field, type Related product 1. Ignore any suggestions offered.
- In the Namespace and key field, type related.product_1
- Click on the Select content type button. Select the Product option from the list, that appears under the Reference heading.
- Make sure One product is selected.
- Click on the Save button.
- Repeat steps 1-6 another until you have 4 related field definitions. Make sure to increase the number on steps 2 and 3 accordingly.
2.2. Assign related products
You now need to assign related products to each product separately.
From your admin page, go to the Products section and select a product to edit. Scroll down to the bottom of the page until you see the Metafields list. In this list, you should see the metafields you created in the previous steps. If not, select the Show all link.
Click on Related product 1, and then click on the Select product button. Select the related product.
Repeat for all four related fields.
Save your product. Repeat on every product you want to display custom recommendations.
2.3. Show related products
Head over to the theme’s Customization page. Search for one of the products that you already assigned related products to (1), and go to the Product recommendations section. Click on Add Related product and then select the newly Related product block created (2).
On the block’s properties, click on the dynamic source icon.
Select Related product 1 and press the Connect button. You should now see the first user-selected related product appear on the Related products section of the page.
Repeat the process above to add more Related product block, and connect them with the rest of the Related product metafields.
3. Revert to automatic recommendations
After you set up related products manually, you may decide that automatic recommendations drive more sales, or perhaps manually assigning products is too much work, or you just need to test something out.
All you need to do to revert back to Shopify’s automatic product recommendation engine, is to remove all the Related product blocks you created during the previous steps. The custom product relationships you created during step 2.2 will not be lost; they’ll just not get displayed anymore.
In order to remove a Related product block, select the block under the Product recommendations section, and on the block’s properties pane click on the Remove block button. Repeat for each of the 4 related product blocks.