![Shopify Ajax Cart Drawer for Shopify [No APP or external library]](http://made4uo.com/cdn/shop/articles/CART_DRAWER.jpg?v=1649727641&width=533)
Compatibility: All Shopify 2.0 FREE themes ONLY. Works from lower version to version 12
In the world of e-commerce, every opportunity to increase your sales and revenue counts. If you're a Shopify web developer looking to help store owners maximize their profits, you're in the right place. Today, we're diving into the powerful strategy of upselling products right on the cart page or cart drawer. Discover how this technique can transform the way your clients do business and drive their success to new heights.
The Art of Upselling in the Cart: Picture this: a customer has already added a product to their cart. They're on the verge of making a purchase. Now, what if you could suggest complementary or upgraded items right there on the cart page or drawer? This is where the magic of upselling comes into play.
Why Upselling Matters: Upselling is not just about increasing the average order value; it's about providing value to customers. By suggesting relevant products or upgrades during the checkout process, you enhance the customer experience and help them discover items they might have overlooked. This results in higher conversion rates and happier customers.
The Power of Cart Page and Cart Drawer Upselling: Our cutting-edge solution empowers Shopify store owners to harness the full potential of upselling. Whether it's showcasing related products, offering discounts on bundles, or highlighting premium alternatives, our code seamlessly integrates into the cart page and drawer for a frictionless shopping experience.
See demo store here for Dawn version 5 and below. See the demo with the cart drawer here. Password for both demos are made4uo.
Code might not work for cart drawer on lower version of Dawn, since they are not stable.
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 or cart drawer
- Choose between cart page or cart drawer to show this upsell
- 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. Go to the cart.js file still under the Asset folder, and add the code below, after the line of code "updateQuantity(line, quantity, name) {"
See image below for code placement:
7. Next, we need to add the Cart Upsell settings. Go to the Config folder and open the settings_schema.json. 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 or if you do not want to show the upsell in the cart page but in the 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 code 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 before it, 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 gear icon.
Copied!
3 comments
Password for demo store provided are made4uo
Is there a password for the demo store?
Good