Open side card when clicking on "add to card"

Open side card when clicking on "add to card"

Kuelah
Excursionist
26 0 6

Hello everybody,

I am currently rebuilding my Shopify and unfortunately I am stuck at one point.
I would like that when you click on the button "Add to cart" opens the sidebar shopping cart.

Currently, however, it is so that when you click on "Add to Cart" you are directed to the whole page "Shopping Cart". I would like to prevent this.

I am working on the dawn theme.

I hope someone can help me or can give me some advice. I would be grateful for any support.

Side cart.png

Replies 4 (4)

EcomGraduates
Shopify Partner
795 68 114

hello there  

 

To open the sidebar cart when a customer clicks the "Add to cart" button instead of redirecting them to the shopping cart page, you will need to modify the theme code. Here's how to do it in the Dawn theme:

  1. Go to your Shopify admin dashboard and click on "Online Store", then "Themes".

  2. Click on the "Actions" button next to the Dawn theme and select "Edit code".

  3. Open the "sections" folder and click on the "cart-drawer.liquid" file.

  4. Scroll down to the bottom of the file and find the following code:

 

 

 

{{ form | payment_button }}
{{ form | submit_button }}

 

 

replace that code  with: 

 

{{ form | payment_button }}
<button type="button" class="btn cart-open-btn">{{ 'cart.general.cart_title' | t }}</button>

 

 

Next, open the "assets" folder and click on the "theme.js" file.

Add the following code to the bottom of the file:

 

$('.cart-open-btn').click(function() {
  Shopify.theme.cartDrawer.open();
});

 

 

 


 If this fixed your issue, likes and accepting as a solution are highly appreciated
|  Build an online presence with our custom-built Shopify Theme: EcomifyTheme
|  Check out our reviews: Trustpilot Reviews
|  We are Shopify Partners: EcomGraduates Shopify Partner



Kuelah
Excursionist
26 0 6

Hi there,

 

thank you very much for your respone.

But i have one problem. In my "cart-drawer.liquid" file there is no code (under sections).

 

It shows me the following

Anhang.png

Jahid-KlinKode
Excursionist
145 1 5

Hi @Kuelah, found the solution for enabling the side drawer cart or cart page redirect in Shopify Dawn theme after clicking "Add to Cart" in this helpful YouTube video: https://www.youtube.com/watch?v=5SefePWS5as.

TheTeeSis
Tourist
12 0 0

perfect thanks for the solution it worked for me instead of playing with code ❤️