Upsell Products in Cart with Dawn Theme or Shopify 2.0 Free themes

Upsell Products in Cart with Dawn Theme or Shopify 2.0 Free themes

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Please note that the code may not be compatible with any currently installed apps.

Compatibility: Dawn version 0 to latest version, and Shopify 2.0 FREE themes only

Increase sells, and upsell your product collections and show them in the cart. No need refreshing the page to add see them inside your cart. 

See demo store here for Dawn version 5 and below. See the demo with the cart drawer here

This is an upsell, and you want your customer to have one click of the add to cart button. Quick decision making is a key. Therefore, products that doesn't have several options or variants are recommended for this collection. 

NOTE: For user friendly purposes, the collection will only show 5 products. In my opinion, customer more focus on the following products if you give them limited options, which not so overwhelming.

See You may also like (UPSELL) section in the image below

You may also like upsell

What you are buying:

  • Add collection of product you want to recommend in cart page
  • We recommend adding products that does not have multiple selection for variants. 
  • If the product have multiple variants, then the first variant is added.
  • Easy access add to cart button

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.

To start:

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Snippet folder, create a snippet, and name it upsell-products
3. Open the newly created file and paste the code below


4. Find the Asset folder and open the global.js.

5. Paste the code below at the very bottom of the file.


6.. Next, we need to add the Cart Upsell settings. Go to the Config folder and open the settings_schema.json.

7. Before the last "]", paste the code below.




8. Skip this step if you have Dawn version 5 and below, since the version does not have a cart drawer. We need to add the Snippets to the cart-drawer. Go to the Snippet folder, and open the cart-drawer.liquid. Find the   <div id="CartDrawer-Overlay"class="cart-drawer__overlay"></div>. After the code, paste the code below. 



See image below for placement.

Upsell product in cart-drawer


9. We need to add the upsell to the main-cart-items.liquid file under the Section folder. Find the closing tag </cart-items>, then add the code below.  



See image below for code placement.

Upsell product in main-cart-items


10. Make sure to SAVE all files. All you need to do is to customize the Theme Settings. Look for Cart Upsell, when you click the Theme Settings.

Back to blog

1 comment


Preety Prakash

Leave a comment