Automatically Open Cart Drawer When Item Added To Cart In Pipeline Theme

Store Design
, ,

Topic summary

Issue: Users want the cart drawer to automatically slide open when an item is added to cart in Shopify’s Pipeline theme, rather than redirecting to a separate cart page.

Initial Suggestion: GemPages support recommended using the theme’s built-in customize settings (Online Store → Theme → Customize → Cart settings), but this only opens a new page, not the drawer.

Working Solution (JAFC):

  1. Add CSS to theme.css to hide the default product add popdown:
.product-add-popdown { display: none !important; }
  1. Add JavaScript to theme.js to trigger cart drawer opening:
document.addEventListener('theme:cart:popdown', function(e) {
  document.querySelector('[data-drawer="cart-drawer"]').dispatchEvent(new CustomEvent('theme:drawer:open', { bubbles: false }));
});

Status: Solution confirmed working by at least one user (ShroomSmoothie). However, another user (Mudassir11) reported it didn’t work for their site (slioailet.com), and a user with the Minimog theme also requested help, suggesting the solution may be Pipeline-specific.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Has anyone got the code snippet to automatically open the cart drawer when an item is added to cart in the Pipeline theme?

Thanks in advance

2

Hello @JAFC

It’s GemPages support team and glad to support you today.

This is a feature of the theme, set in customize

I would like to give you a solution to support you:

  1. Go to Online Store → Theme → Customize:

Screenshot at Dec 16 20-47-46.png
Screenshot at Dec 16 20-47-46.png833×106 34.3 KB

  1. Goto settings → cart
  2. Select Cart drawer and save

Screenshot at Dec 16 20-47-31.png
Screenshot at Dec 16 20-47-31.png352×674 99.9 KB

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

3

Hi @GemPages
This option leads to a whole new page opening up. I would like the cart draw to slide our automatically when an item is added to cart.

This issue was raised by another user in this post but no solution was provided: https://community.shopify.com/c/shopify-design/automatically-open-cart-drawer-when-item-added-to-cart-in/td-p/1425755

Please see the screenshots in this post for reference.

Thanks again!

4

Hello there

To automatically open the cart drawer when an item is added to the cart in a Shopify store using the Pipeline theme, follow these steps:

  1. In the Shopify admin, go to the “Online Store” section and click on “Themes.”

  2. Find the Pipeline theme and click on the “Actions” dropdown, then select “Edit code.”

  3. In the “Sections” directory, find the “cart-template.liquid” file and click on it to open it for editing.

  4. Find the line of code that adds an item to the cart, which should look something like this:

{% if current_variant.available %}
  
{% endif %}
  1. Add a JavaScript snippet that opens the cart drawer when the form is submitted. You can do this by wrapping the form in a div element and adding an onSubmit event handler to the form:
{% if current_variant.available %}
  
    
  

{% endif %}
  1. Save your changes and refresh your store to see the cart drawer automatically open when an item is added to the cart.

hope this helps!

5

Hi @EcomGraduates thanks for your response. I checked the cart-template.liquid and that line of code doesn’t appear to exist. We’re using Pipeline version 6.2.2 and the site is dormusleep.com if that helps.

Thanks again

6

1. Add this snippet to end of theme.css

/* CSS - Hide the product add popdown /
.product-add-popdown{
display: none !important;
}
/ end */

2. Add this snippet to end of theme.js

/* Javascript - Show cart drawer when product added to cart /
document.addEventListener(‘theme:cart:popdown’, (e) => {
const listener = (e) => {
document.querySelector(‘[data-drawer=“drawer-cart”]’).dispatchEvent(
new CustomEvent(‘theme:drawer:open’, {
bubbles: false,
})
);
document.removeEventListener(‘theme:cart:change’, listener);
};
document.addEventListener(‘theme:cart:change’, listener);
});
/ end */

1 Like
7

Hey JAFC - I can’t thank you enough for this…

THANK YOU THANK YOU THANK YOU!!

Seriously… thank you!

May the rest of your life be filled with positive blessings and good karma.

8

Hi,
i hope you are doing well its not working and not trigging my drawer please can you give me solution?

My website https://www.teliaoils.com/

9

can you also help me? we are using minimog theme