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
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.
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.
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.
1 comment
Good