Related products: Use Types to show related items
How related products work:
The related products section will show products that share a collection with the current product.
If you are viewing products from a collection page, then the related section of that product page will show other items from the same collection.
If you require an alternate method to view related products, one option is to make this customization and populate the related section by "product type".
The following modification will allow you to show related products by Product type.
Summary:
You'll be creating a new collection called all-products, this collection won't be used for anything else but this modification. You'll need to add all the products to that collection which will be used for cross selling. This will include products from various collections all in one collection for cross selling:
Create a rule to include all your products or manually add items to this collection so only certain products will qualify.
Note: There is a limit of 50 products that can be in this collection.
Next, each product that's included in the all-products collection will also need a Product type setup.
Example from product setup:
This is how you'll control what's shown. Example, if a customer is viewing a product which has the product type set to Womens, then only products from the all-products collection which also have the same product type match (Womens) will be shown under Related Items. This would allow you to show a mix of products in the Related Items section.
Example:
Current product = Women's top from Women's Tops collection.
Related items = Women's pants, Women's shorts, Women's shoes, Women's accessories - All from different collections.
These should all have the Product type set to Womens and belong to the all-products collection.
If there are too many products in the all-products collection, the matches might not be very accurate. For that reason, you might want to be creative with your Product types and which items in are the all-products collection. Also, if there aren't enough items in the all-products collection then your related items area might be blank or only show limited items.
How to:
Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.
Make a duplicate before any code changes:
- 1
-
Create an all-products collection
Create a collection called " all-products" and add all your products to it. You don't need to show this collection anywhere but it needs to exist.
Manually add your cross sell products:
Or:
If you'd like to use a rule that includes all your products, then you can use something like this:
Note:
If you've used a rule and would like to revert back to manual, then the collection will need to be deleted and re-created:
- 2
-
Code change
Next, open the Code Editor:
From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:
Example if you're working from your main live/published theme:
Quick link if the theme is live/published:
Open Code Editor
From the Snippets folder, open: product-related-items.liquid:
Replace all the contents of that file with the code from this file:
Save the file.
Your related items will be now be powered by shared Product types instead of shared Collections.
- 3
-
Add Product types to your cross sell products
Types can be set here from your Product setup page:
1. Group products by "Product type" now if you'd like them to be related.
2. Also make sure your rule is working and the product is in the "all-products" collection.
Undo
Use the Older versions link at the top of the file if you need to rollback or undo this code change and return to shared collections for the related items. Or use your duplicate/backup theme that you created before starting the change.
Other Cross Selling tools
If this modification doesn't meet your customization needs of what's displayed, then have a look at some cross selling apps in the Shopify App Store: