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.

One Time Purchase!

$29.99
$29.99
Only
Please refresh page after a purchase

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. 

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
  • 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.

Copied!
Voltar para o blogue

1 comentário

Good

Preety Prakash

Deixe um comentário