Product pages - Stay on the product page after adding products to the cart

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

When a customer adds a product to the cart, some Shopify themes will take them to the cart page. This customization lets customers stay on the product page after clicking the Add to cart button, so that they can continue shopping.

Note: Most free Shopify themes include a setting that lets customers stay on the product page when a product is added to the cart. You can enable this in the theme editor, in either the Cart page settings, or the Product page settings. In the theme preview, navigate to the cart page to access the Cart page settings, or navigate to the product page to access the Product page settings.

Edit your theme code

To edit your theme code:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Layout directory, click theme.liquid.
   
   
   
   
4. Find the closing </body> tag. On a new line right above the closing </body> tag, paste the following code:
   
   

   {% render 'ajaxify-cart' %}

   
   
   
   
5. Click Save.
6. In the Snippets directory, click Add a new snippet:
   
   
   
   
7. Name your snippet ajaxify-cart, and click Create snippet:
   
   
   
   Your new snippet will open in the code editor.
   
   
8. In your new ajaxify-cart.liquid file, paste this code hosted on GitHub.
   
   Caution: In the pasted code, replace all instances of .size() with .length. The .size() method is depreciated as of JQuery 1.8.
   
   
9. Click Save.

Debut

If you use Debut, then continue to the next steps:

1. In ajaxify-cart.liquid, find the opening <script> tag at the top of the file. On a new line right below the opening <script> tag, paste the following code:
   
   

   window.onload = function() {

2. Find the closing </script> tag. On a new line right above the closing </script> tag, paste the following code:
   
   

   }

3. In the same file, find the following code:
   
   

   cartCountSelector: '.cart-count, #cart-count a:first, #gocart p a, #cart .checkout em, .item-count',

4. Replace it with:
   
   

   cartCountSelector: '#CartCount',

5. Click Save.
6. In the Sections directory, click header.liquid.
7. Find the following code:
   
   

   {% if cart.item_count > 0 %}

8. Replace it with:
   
   

   {% if cart.item_count > -1 %}

9. Click Save.

Demo Store

Click here to view a demo store that lets customers stay on the product page when they add products to the cart.

[JosephGuerrero]

Hi! This does not seem to work for my debut themed site. I followed all the steps exactly and triple checked. 

Any ideas? Site URL: https://little-babes-bows.myshopify.com/

[CPerry]

Hi! Have there been any updates to this at all? I'm using the Debut theme and I've followed these instructions exactly and triple checked it all. I still get sent to the cart when adding a product.

[Ardi94]

Work great, thanks

@CPerry @JosephGuerrero 

If you want to send your codes here I might be able to help you out

[CPerry]

@Ardi94  I was actually able to get this working last night but I ran into some other issues. When I remove the "defer" portion (as referenced in the comment in this post) from the theme.liquid file, my slideshow and dropdown navigation stop working. If I leave the "defer" portion, the add-to-cart functionality doesn't work and I get redirected to the cart anyway.

I'm trying to sort this out and see if I can find another way to get this working!

[PurelyTru]

I have also been trying to do this same thing for days now

FINALLY found something that worked

Follow the process for everything above. If you click Add To Cart, and it still takes you to the checkout page then try this

In your theme.liquid file

Add:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Right above: 

{% render 'ajaxify-cart' %}

This worked for me and was the only minor step missing from this guide 

[robbin]

Applied this fix as I was having the same issues.  What's happening now is that it's still going to the cart but there's like a 2 second pause before it goes to the cart.  Any ideas?

[walters1994]

I really wanted this to work for me because it is absolutely something I need for my shop. I followed it to a T.. but sadly it still takes me to the cart page instead of just adding to cart. 

[Marielle1]

Hi, it works for me! Thank you. Is there any way to change the colour of the message that pops up after adding to cart? Part of it is now green and I would like to change it to all black.

Many thanks,

Marielle

[ashleystephens]

Marielle what theme are you using. I'm using Debut & all of this didn't work at all. Still taking me directly to cart. Any suggestions?

[ashleystephens]

Tried this and no luck. Any suggestions?

[robbin]

##- update your debut theme and it will work. You must be running an older version. Please type your reply above this line -##


Brad,
Bass Farms LLC
317-401-0924

[Torinorman1]

@robbin how do you "update" the debut theme? 

[11danielyue]

Hi, I am using the minimal theme and it does not work for me

[Chevron_Editing]

Adding <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> solved it for me as well - I'm using Venture.  Thanks for posting! 

[robbin]

If you’ve had the Debut theme longer than 6 months or so, there’s an updated version in the theme store. You can check it out there. Click through the theme like its an active store. If it’s doing the things you want your store to do, then customize it and get it the way you want it before publishing it. Took me about an hour to get it all set up and looking like our original Debut themed store. Once you have it the way you want it, click on publish and take it live. Keep in mind, if you have some apps running on your store, you may need to add a snippet of code, which the app should email you with instructions on how to do this when you take it live. Is really pretty simple if you have a little computer knowledge. We have about 6 apps running on our store and only one needed the snippet added.

[robbin]

I’m sure this would work for other themes as well

[aymanemad]

Where can I add it?

[artisan-meats]

For the Brooklyn theme, this worked by just creating the Ajaxify-cart.liquid snippet. Did not have to do the additional steps as has been listed for "Debut". Will be testing and confirming if this works fine. The only place I have caught an issue is with Product Recommendations (within a single Product page, at the bottom), where the Add To Cart button is still opening the Cart Page.

[artisan-meats]

Also, as a follow-up for those who want to edit the design. It is very easy to do from within the Ajaxify-cart.liquid file. Can confirm, works.