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

TyW
Community Manager
Community Manager
413 40 1108

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.

 



prodpage01.jpg

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.

    prodpage02.png

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

    {% render 'ajaxify-cart' %}

     


    prodpage03.png

  5. Click Save.
  6. In the Snippets directory, click Add a new snippet:

    prodpage05.png

  7. Name your snippet ajaxify-cart, and click Create snippet:

    prodpage06.jpg

    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.

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 202 (202)
JosephGuerrero
Tourist
5 0 2

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
Tourist
4 0 2

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
Shopify Partner
101 2 29

Work great, thanks

@CPerry @JosephGuerrero 

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

CPerry
Tourist
4 0 2

@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
New Member
2 0 16

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
Tourist
4 0 1

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
New Member
4 0 0

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
Tourist
3 0 1

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
New Member
2 0 2

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
New Member
2 0 2

Tried this and no luck. Any suggestions?

robbin
Tourist
4 0 1
##- 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
Tourist
7 0 1

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

11danielyue
New Member
2 0 0

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

Chevron_Editing
New Member
1 0 1

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

 

 

robbin
Tourist
4 0 1
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
Tourist
4 0 1
I’m sure this would work for other themes as well
aymanemad
Tourist
13 0 2
artisan-meats
Tourist
10 0 14

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
Tourist
10 0 14

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.