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.

[DeyDey2020]

Hi, were you able to resolve this issue? I am using the Debut theme and this coding did not work for me. Thanks!

[imdesigns]

any luck?

[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. 

[HandHugs]

what version of the Debut theme are you using? The most recent version should have this function available without any code modifications.

[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?

[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? 

[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.

[euklid]

This works for me and my custom theme but the page never refreshes unless it is manually refreshed.

Any solutions to this?

https://www.the-olivegrove.co.uk/collections/wraps/products/souvlaki-arni

I have now reverted to my saved theme copy as it's better to take them to cart than having a frozen page.

---

[AmandaIntera]

Hey! I just made this update myself, and figured out where to change the colour.

Look for this piece of code in the "ajaxify-cart.liquid" snippet:

.ajaxified-cart-feedback.success {
color: #000000;

Where I bolded the 0's above, that's where you will enter the HEX# of the colour you'd like the text to be

**I am using the "Minimal" theme and I just followed this tutorial to a tee and had no issues, everything worked as planned. Thank you!!

🙂

[LLSHOP11]

To change the color, under the 

ajaxify-cart.liquid

Hold down command + F and search "Color"

You will find something that says: 

}
.ajaxified-cart-feedback.success {
color: #3D9970;
}

Where it says "#3D9970" is where you can copy and paste a new color code.

[11danielyue]

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

[gco]

I finally got mine to work on my Minimal theme. For anyone who might have been struggling, I had to make sure there was a linebreak above and below the line:

{% render 'ajaxify-cart' %}

[kkris]

I have theme "Supply". I cannot find {% render 'ajaxify-cart' %} anywhere. 

I have successfully added the "add to cart" with qty to my catalog pages, but that takes me to the cart and I would like to fix that. 

This is as close as it gets:

settings:{
cartType: {{ settings.ajax_cart_method | json }}
}
}
</script>

{% if settings.ajax_cart_method != 'page' %}

{% include 'ajax-cart-template' %}

{% endif %}

 Any ideas?

[gco]

---

---

@kkris That code was in the original instructions, you add it to theme.liquid yourself, but you just have to make sure that there's a linebreak before and after.

[Dsalles]

Hi Kris, could you share how you added the quantity to you catalog page, is it a "- an +"selector??

I`m trying solve it on my theme "Groca".

Thank you.

[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. 

[Wheresfaith]

Hi! So i tried it yesterday and it worked for awhile. Then i went on doing other stuff like adding the shipping calculator and it stopped working! 😞

[katmoo007]

Hello!

Thanks for this - the functionality works great! I do have a problem however: when the button changes (adding... & thank you states) the background colour of the button and text becomes unreadable (see the image attached). I can't seem to find how to change the colour of the button when it is in the dynamic state. Can you help?

Additionally I was wondering how the success message can disappear after a few seconds (instead of it staying). I am not good at coding so apologies for the questions.

All help is much appreciated!

Thanks!

[Ardi94]

@katmoo007 

For the text to disappear, go to Ajaxify-cart.liquid and search for addedToCartBtnLabel. Under this line, you can find

            window.setTimeout(function(){
              $addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
              _setText($addToCartBtn,_config.addToCartBtnLabel);
            }, _config.howLongTillBtnReturnsToNormal);

just add this before },

$('.ajaxified-cart-feedback').remove();

so it should look like this

            window.setTimeout(function(){
              $addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
              _setText($addToCartBtn,_config.addToCartBtnLabel);
            $('.ajaxified-cart-feedback').remove();
            }, _config.howLongTillBtnReturnsToNormal);

if you need to increase the time change the howLongTillBtnReturnsToNormal value

For the label colour, I need to look at your code to know what's wrong, but you might be able to change that if you go to Customize Theme > Theme Setting > Colors

If not it is probably in theme.scss 

I might be able to know where it is exactly if I see your website

[katmoo007]

Hey,

Thanks for the feedback- the line solution worked, but sadly I am still struggling with the button colour.

https://dancingwithgoats.de/products/my-man-drawer-is-bigger-t-shirt

Here you can see what I mean after you click add-to-cart.

Any help would be awesome.

Thanks!

[Ardi94]

@katmoo007 

It's definitely your CSS and you should be able to fix it in your theme customization. try using a different colour for your buttons to see if you can find a better colour. the problem is that your codes invert the colours when activated, I need to see your codes to know where to change it.

It's in theme.scss search for .btn and see if you can find it, between { & }.

Also might I suggest using <!-- split --> for your product description.

[KatieO]

Thanks for this. Super helpful. 

Unfortunately I am getting a repeat of the success message and can't seem to locate the fix. Are you able to help please?

www.rainbowsensorygifts.co.uk

[calculicious]

Hello,

I was able to get this feature to work on Express theme, so thank you! But I see a few people have the same issues as me, where the "Added to cart" message shows twice.

Does anyone have a fix for this?

[Lovethispetshop]

No...I have tried everything, even ajaxify...but no results in Brooklyn theme...

Verónica 

Lovethispetshop.com

[gab33]

In newer Debut themes, it's not necessary to update the header.liquid file.

Just use the correct "hide" class in the ajaxify snippet:

$(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count)).removeClass('hide');

[HC5]

@gab33 Using the correct hide class in the ajaxify snippet without changing header.liquid worked for me - thank you!!

[Weftgrip]

Hi This helped me! thanks a lot!

[Marlan]

Hi,

I tried and followed all the instruction given above including <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> plus necessary line spacing but it doesn't help in staying on the product page after adding products to the cart. Can someone help please?

Thanks a ton in advance

[ali-waters]

hi! I love this and I got it to work perfectly on "Impulse" theme. I then tried to do the same thing to the "Impulse New" theme and it did not work at all. Is there something different that I need to do for the newer theme? I replaced all of the .size() with .length as well.

Thanks!

[rkmholdings2]

Hi - I am using the Impulse theme and sadly it's not working for me. Can someone please help me? 

[HandHugs]

are you using an old version of the impulse theme? It should allow for AJAX add to cart automatically. 

[rkmholdings2]

@HandHugs  - i am not sure it mine is old one. here is the url - https://rkmholdings.es/

[rkmholdings2]

can someone please post the ajaxify-cart code with replacing .size() method with .length

[Kaurajoan]

You only have to replace .size() with .length from the ajaxify file. It’s clear from the given instruction. Do ctrl+F and search .size(). I think they were about 3-4 that were highlighted and then you replace all them with .length and you’re done.

[HandHugs]

Your theme is slightly outdated - you can update it for free and test it out, but you might need some help with that. I couldn't test out the add to cart function because all the products I saw were either sold out or not available to add to cart. Impulse should always keep you on the product page when you add to cart. Try it out on the Impulse demo site:

https://impulse-theme-fashion.myshopify.com/

[andibuyz]

Hi, this is my first ever message on a board so please forgive any breaking of rules etc.

I have added the Ajaxify code to my Minimal theme and it works brilliantly, except . . .

 . . . it doesn't show variant choice to users.

Has anyone managed to amend the code so it shows the 'variant choice' dropdown and passes the data to the cart?

Thanks

Andy 

[Kaurajoan]

I also use minimal theme and it works excellently. Are you sure you did follow the original instructions well?

[souravroy]

Please share the codes.

[bkelly]

Hi Andi, I am also looking for this capability. Have you found a solution yet? I am still researching and will be happy to share if I find something.

I am using the Brooklyn theme.

[lkbackus]

 I have also  added the Ajaxify code to my Debut theme and it works brilliantly, except . . .

 . . . it doesn't show variant choice to users.

How do you amend the code so it shows the 'variant choice' dropdown and passes the data to the cart?

[scottmilburn]

@HandHugs 

How can I make the success message stay when I trigger the Ajax call a second time?

Currently, the previous message disappears when I add another product to cart: https://88bw7ndp7utzxmkv-40459239580.shopifypreview.com

Thanks you.

[HandHugs]

It would require some advanced editing of the JavaScript to get the messages to stay under the product once it pops up. It should be fast to do but depends on the code you've written already. If you need help I'm happy to look. mail@handhugs.com

[bakemegood]

I have followed the instructions exactly. It does work for me on chrome but doesn't work on Safari on iPhone. Please suggest any solution for this.

[OSJMI]

So I followed these steps and found that the procedure applied to some products and not others. I believe this is because I have an app I'm using as custom options for some products (the same products that redirected to the cart page). How do I fix this? I use the Pacific theme.

[OSJMI]

So I followed these steps and found that the procedure applied to some products and not others. I believe this is because I have an app I'm using as custom options for some products (the same products that redirected to the cart page). How do I fix this? I use the Pacific theme. @Ninthony @TyW 

[orb]

Hello ive followed this guide 100% and I've triple checked it and it still seems not to work on my Brooklyn theme can anyone please help ?

[ptpdist]

Hi, I have also tried adding the same script to my Debut theme but the cart page continues to come up when adding a product.

Has anyone got this to work on the Debut theme?

My theme is the original Debut version I started with in January 2019. I would be happy to update the theme, but there are numerous customised scripts running that enables better functionality than the out of box version. So I don’t want to have to re-do these if updating the theme over-writes any of these customised scripts?

My site is live: https://ptpdist.com.au

Any suggestions?