Does the Dawn theme include a slide out drawer option for the cart?

Solved

Does the Dawn theme include a slide out drawer option for the cart?

Daelan_Wood
Shopify Partner
34 0 11

Does the Dawn theme have an option for a slide out drawer for the cart? Or is the only option to link to the cart page?

Accepted Solution (1)

drakedev
Shopify Partner
700 151 243

This is an accepted solution.

Hi, 

at the moment Dawn doesn't implement any cart drawer. The only option as you noticed is to link to the cart page.

I also don't see this feature in the Shopify Dawn Roadmap at the moment.

There was a request for a Cart Drawer that you can vote up (don't know if it will help)

If my answer was helpful click Like.
If the problem is solved remember to click Accept Solution.
Shopify/Shopify Plus custom development and support: You can hire me for simple and/or complex tasks.

View solution in original post

Replies 17 (17)

drakedev
Shopify Partner
700 151 243

This is an accepted solution.

Hi, 

at the moment Dawn doesn't implement any cart drawer. The only option as you noticed is to link to the cart page.

I also don't see this feature in the Shopify Dawn Roadmap at the moment.

There was a request for a Cart Drawer that you can vote up (don't know if it will help)

If my answer was helpful click Like.
If the problem is solved remember to click Accept Solution.
Shopify/Shopify Plus custom development and support: You can hire me for simple and/or complex tasks.
Kumar2573
Shopify Partner
174 8 24

we have implemented cart drawer through custom code in dawn theme. if anybody requirement for cart drawer in dawn theme. Kindly contact me i will charge 150 USD.

Shopify Certified Developer Profile - https://www.credly.com/badges/1733d05c-2a88-490a-aef5-b01baf3b94ce/public_url
Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me
Daelan_Wood
Shopify Partner
34 0 11

Do you have a demo of the cart drawer that you can share?

Kumar2573
Shopify Partner
174 8 24

Yes i have demo. I have implemented on demo store that store not live. 

 

Shopify Certified Developer Profile - https://www.credly.com/badges/1733d05c-2a88-490a-aef5-b01baf3b94ce/public_url
Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me
Kumar2573
Shopify Partner
174 8 24

I will take only 3 hours to complete cart drawer in dawn Shopify theme.

 

Shopify Certified Developer Profile - https://www.credly.com/badges/1733d05c-2a88-490a-aef5-b01baf3b94ce/public_url
Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me
Squish
Visitor
1 0 0

Does it have the quantity selector?

CheckoutLinks
Shopify Partner
53 1 2
Hi!

Yes, you can change quantity by tapping/clicking on the product.

Let me know if you have any other questions!
Checkout Links - Create shopable links to sell anywhere
App Store - Demos - Website
snippetcommerce
Shopify Partner
3 0 0

Dawn theme has in built Drawer : 

Before jumping into code, let’s first make sure the Cart Drawer is enabled in your Shopify store’s Dawn Theme settings: Cart->Drawer

This setting ensures that the cart will slide in from the side of the screen rather than redirecting users to a separate cart page, offering a smoother and more engaging experience.

Step 2 :  Implement Real-Time Cart Updates using JS - We use section API call

Now that the Cart Drawer is enabled, the next step is to allow for real-time updates — this means that every time a customer adds or removes items from their cart, the cart contents update dynamically without needing a full page reload.

To achieve this, we’ll use JavaScript to interact with Shopify’s Sections API and make sure that the cart drawer updates instantly and reflects the latest cart items.

Here’s the JavaScript code that will handle these on-the-fly updates:

function refreshCartDrawer() {
// Check if cart-drawer-items exists
let cartDrawerItems = document.querySelector('cart-drawer-items');
// Find the cart-drawer element
const cartDrawer = document.querySelector('cart-drawer');
if (cartDrawer) {
// Remove the is-empty class from cart-drawer if it exists
if (cartDrawer.classList.contains('is-empty')) {
cartDrawer.classList.remove('is-empty');
}
// Remove the div with class 'drawer__inner-empty'
const emptyDrawerElement = cartDrawer.querySelector('.drawer__inner-empty');
if (emptyDrawerElement) {
emptyDrawerElement.remove();
}
// Make the form tag's class 'cart__contents' display as block
const cartContentsForm = document.querySelector('.cart__contents');
if (cartContentsForm) {
cartContentsForm.style.display = 'block';
}
}
// If cart-drawer-items doesn't exist, create it
if (!cartDrawerItems) {
cartDrawerItems = document.createElement('cart-drawer-items');
// Find the drawer__header element
const drawerHeader = document.querySelector('.drawer__header');
if (drawerHeader) {
// Insert the newly created cart-drawer-items after the drawer__header
drawerHeader.insertAdjacentElement('afterend', cartDrawerItems);
}
}
// Call the onCartUpdate method to refresh the cart drawer contents
document.querySelector('cart-drawer-items').onCartUpdate();
// Open the cart drawer and apply necessary classes for animation
if (cartDrawer) {
cartDrawer.open();
}
}

 

CheckoutLinks
Shopify Partner
53 1 2

You can also try out HypeCart which is a cart drawer that also includes the option to provide great upsells and cross sells both in the cart and after the checkout.

It works great with Dawn!

🙂

You can find it here: https://apps.shopify.com/hypecart

Checkout Links - Create shopable links to sell anywhere
App Store - Demos - Website

NextsavyTech
Visitor
2 0 0

As of now there is no Drawer in the Dawn theme. But you can contact us on sales@nextsavy.com, if you want to integrate that or customize your theme in anyway. 

Nextsavy Technologies LLP
Gujarat - India

EcomGraduates1
Shopify Partner
80 3 7

I found a solution here on  the  youtube channel  
works  flawlessly 

https://www.youtube.com/channel/UCghx1IWSYHlJFK2aiJRnlEA

We design and develop stunning websites to make your customers fall in love with your business.
5 star reviews https://ecomgraduates.com/
Charlotteecom20
Visitor
2 0 0

this worked ! 

made4Uo
Shopify Partner
3873 718 1213

Hi, 

 

Add a ajax cart drawer to any of FREE Shopify 2.0 themes with product recommendation.  NO APP or external library

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

made4Uo
Shopify Partner
3873 718 1213

Hi,

 

Just to inform incoming visitors. The new Refresh Shopify 2.0 free theme has a built in cart drawer. Just stay tuned for the other Shopify 2.0 themes update

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

KabirDev
Shopify Partner
248 61 75

For those seeking to enable a drawer cart in 2024, this feature is now available. Check it out here: https://youtu.be/5SefePWS5as?si=ZkZjTyypCklAHidn."

- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com

JoeOscura
Visitor
1 0 1

This Sticky Cart app is an absolute game changer. I have installed it on my store and its increased conversions and average order value by a huge margin. you can have things like a free shipping target and recommended products too. would highly recommend it! check it out here.

JoeOscura_0-1706640670030.png

 

MSS-Chris
Shopify Partner
1 0 0

Thank you SO much for posting this. Been looking for a cheap solution to this issue and this app is by far the best I've found 👌🏽