In this tutorial we will see how to create an upsells system in the cart page of your Shopify Store.
You no longer need to overload your theme with applications which are very often paid! Thanks to this Shopify tutorial you will be able to offer your customers upsells in the form of a collection of products 😉
How to create the system?
It’s very simple, we just need to create a snippet file with the code that you will find below and then we can add it to the shopping cart. Why do we do it this way instead of pasting the code directly in the cart file? Well because it’s cleaner and also easier to change the placement as needed 😉
Creating the Snippet
Go to Online Store – Actions – Edit Code. Unfold the Snippets folder and click on “Add a new snippet”, name it “dg-cart-upsells” and copy/paste the following code:
This time in the Templates folder open the cart.liquid file. Go to the bottom and copy/paste the following code:
How to use and customize the upsells system
Once the code is installed you will have to create an upsell collection that will be used to offer additional products to your customers.
Be careful! you will always display the same products no matter what’s in the cart because you have to know that at the theme level you can’t propose specific products that depend on what is added in the cart… Actualy, it’s possible, we could do that but it requires a lot more coding and goes beyond what’s doable for a free tutorial😉
So we need to create the collection by clicking on Products – Collections – Create a collection and title it “upsells” then put the products you want to offer as upsells in the cart.
What can we do in terms of customization?
You have 4 main options:
- upsellCollection = « the name of your upsell collection » (the default name = upsells)
- upsellLimit = « number of products to show »
- upsellTitle = « upsell zone title »
- upsellAtc = « add to cart button title »
Disclaimer: Works only with a cart page! If you have a theme with a mini cart (popup) or drawer (right column that opens) this system will not work!
This tutorial is also available in video format
Hope you found this tutorial helpful !
You have any ideas for new tutorials ? Any questions about this one ? Leave me a comment 😉