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

TyW
Community Manager
451 63 1206

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 214 (214)
ErinnLaMattery
Shopify Partner
8 0 1

I finally found this in the comments after the original post, and tweaked my code to add the script line, and now it works perfectly, yay! 


copied from a previous comment

 

"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 "

 

 

I also dug into the code and was able to remove the 'continue shopping' link which would redirect to the 'all products' page.

Nidhi15256
Tourist
3 0 1

Yes Its Working Properly 
thanks 
but i need to do the success message shows in pop instead of bottom..

dilipzee
Visitor
2 0 0

Hey Pal, I did exactly what you mentioned above and it worked perfect fine. But there is an issue in my cart page, It is showing paypal button on my cart page. 

dilipzee
Visitor
2 0 0

Hey Pal, I did exactly what you showed here, But there is an little issue with the add to cart page. It is showing paypal button in it. Can you please look into it

Alonsaar
Tourist
5 0 1

This really works, thank you !


ruiniu11
Shopify Partner
4 0 3

Hi,

Thank you for your solution!

Is that possible to remove "continue shopping" from the popped up text? Thank you!

OnikaAlexandria
Visitor
2 0 2

OMG! Thank you TONS! 

clarke2020
Visitor
1 0 0

can you move the add to cart massage below the buy it now buttom 

Bluegrocer
Visitor
2 0 1

This worked perfectly for me. Thank you so much.

jtan
Trailblazer
158 4 24

hi guys

 

does anyone know how to get the "added to cart, view cart or continue shopping" wording under the add to cart button

 

thanks

 

Untitled 1.png

rangescountry
Tourist
5 0 0

Tutorial was easy to follow and worked perfectly for me, thank you!

Kaurajoan
Tourist
4 0 1

thank you very much! It's very helpful. I use the minimal theme and it worked just as what you have instructed. 🙂

Paolo97
Visitor
1 0 1

Hi does anybody know how to update the cart counter when I use the Warehouse theme. I followed the instructions and the items add to cart, but the cart counter does not update unless refreshed.

colorofheat
Visitor
1 0 0

I am also using an older version of Debut, checked everything was done properly and it is not working for me either.  😞 Has anyone figured out a way to fix this without redoing the whole website on the updated debut theme?

HandHugs
Shopify Expert
198 1 60

@colorofheat you will need to hire a Shopify expert to help you figure out why your install isn't working or how to get your theme working with this function. 

Shoplemiel
Visitor
2 0 0

Hi i've got an issue with ajaxify, everything works well except that whenever i click add to cart the message shows up twice. I'm using the vogue theme. Is there any way to fix this? 103793818_1153357678351090_6932160632710491971_n.jpg

souravroy
Excursionist
31 0 6

I need solution for the same issue on my minimal themed store.

rainbownation
Excursionist
17 0 4

I do too!

 

MonnryLighting
Visitor
1 0 0

Hi!

 

I was able to add the code to my store, but now I need some help with formating I need to change the error message and the messages are appearing before my button so they look rather bad, where could I change that behavior?

 

Regards

HandHugs
Shopify Expert
198 1 60

The styles (the way it looks) would have to be changed with CSS in  your style sheet. You will need to know CSS or hire someone who does to help with that. 

To change the language, you can change the variables in the ajaxify-cart.js file.

Nrotlisberger
New Member
7 0 0

Hey there,

 

Is it possible to allow this new "Add to cart" button refresh the page at the same time?

 

 

HandHugs
Shopify Expert
198 1 60
Why would you want it to do that? The entire point of AJAX cart adds is to avoid unnecessary page reloads.
Nrotlisberger
New Member
7 0 0

I'm aware of what an AJAX is but I wasn't entirely looking for an AJAX solution in the first place. Although I wasn't looking for an AJAX solution, this is the solution I was looking for. To give you some background I coded a bar at the top of my website that gives the user (customer) a countdown for the amount of money they have to spend to get free shipping. I ideally would like that countdown to update as soon as the "Add to cart" button is pressed. The reason why I used this code is because it would allow my customer to continue shopping on the same page without having to click out of anything.

 

With this context, would it be possible to have this code refresh the page upon clicking the "Add to cart" button?

 

Thanks, Nate

HandHugs
Shopify Expert
198 1 60

Hi Nate! thanks for the extra info. You can add some extra code into the ajaxify script to tell it to update your free shipping progress bar without having to refresh the page. It needs to be specific for your theme and the classes of your bar, but it should be fairly simple if I know the class or ID of the shipping bar text. If you have a link to your site that I can see I may be able to help you add that code. 

 

Nrotlisberger
New Member
7 0 0

To be clear all you need is the link and nothing else? The link is https://sugar-laine-cutters.myshopify.com/ 

 

Since I haven't opened the store to general public yet the password is: "rotlisberger"

 

Let me know if you need any extra info, thanks

 

-Nate

HandHugs
Shopify Expert
198 1 60

Hi Nate, 

I went to your site but I didn't see anything about free shipping in the bar at the top. For me it just says " Processing time: 1-3 business days" 

Can you help me find the area you want updated when someone adds to cart?

Nrotlisberger
New Member
7 0 0

Yes sorry I should've explained it better to you. I have that message display before the user adds anything to the cart. If you add something to the cart and refresh your page it'll display the price required now. I could take away that message if that clears up confusion. 

Propero
Shopify Partner
895 101 160

@Nrotlisberger,

I think the price countdown is not working apparently and all we can see is the same message even after adding products to the cart.  I understand that you need a message there with a price countdown. I understand you also know AJAX then what is the actual issue? Do you need a solution of a simple page refresh on an addtocart? something similar to, like what update cart does on cart page?

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
Nrotlisberger
New Member
7 0 0

Yes that's the issue. The message doesn't update at the top until you refresh the page. All I'm looking for is some sort of code to refresh the page when the "Add to cart" button is pressed. Either that or some type of code so that the message at the top doesn't need to be refreshed in the first place and auto-updates. I'm not too sure if the 2nd option is possible but all I need in its simplest form is a page refresh upon clicking the Add to cart button so that the user can see their new total as they add something to the cart instead of having to refresh the page manually. Thanks for the help,

 

Nate

HandHugs
Shopify Expert
198 1 60

did you try my code? It should work exactly how you want. 

Nrotlisberger
New Member
7 0 0

I did try it yes, I'm not too sure if you had received my email but the code you had sent takes me to the cart page upon clicking the Add to cart button.

To be clear what did your code intend to do?

The code I've tried implementing does the same thing, takes me to the cart page. Although this is a worthy solution, I just dont want the user have to click out of the cart page every time they add something to the cart.

 

Nate 

HandHugs
Shopify Expert
198 1 60

there was a simple error in my code. This should work:

 

var cartTotal = cart.total_price;
              var cartGoal = 3500; // your number times 100 
              if (cartTotal >= cartGoal) {
                $('.announcement-bar__message').html('Your order qualifies for free shipping!');
              } else {
                var cartDiff = cartGoal - cartTotal ;
                $('.announcement-bar__message').html('Add just '+Shopify.formatMoney(cartDiff, "${{amount}}")+'to your cart to receive free shipping!');
              }
Deepank
New Member
5 0 0

Hi,

 

I am using Venture theme. This functionality is working perfectly fine on all the pages except product pages. As soon as someone adds a product to cart from product page, double of whats exactly has been ordered gets added to the cart. I believe my default add to cart function on product page is working in tandem with the new one. Any solutions to this?

HandHugs
Shopify Expert
198 1 60

@Nrotlisberger  I see! did you write the script for that bar or is it an app?

You would need to add something like this to the ajax script inside this function

$.getJSON(_config.shopifyAjaxCartURL, function(cart) {

... past code in here (probably on line 102)

}

 

 

 var cartTotal = cart.total_price;
              var cartGoal = 3500; // your number times 100 
              if cartTotal >= cartGoal {
                $('.announcement-bar__message').html('Your order qualifies for free shipping!');
              } else {
                var cartDiff = cartGoal - cartTotal ;
                $('.announcement-bar__message').html('Add just '+Shopify.formatMoney(cartDiff, "{{ shop.money_format | remove: "'" | remove: '"' }}")+'to your cart to receive free shipping!');
              }

 

 

 

email me if you need more help 🙂 mail@handhugs.com

 

HC5
Tourist
14 0 1

Hello, do you mind posting a simpler version of this, so when someone adds a product to cart, the text on the add to cart button changes to "Added to cart!" momentarily instead of "Thank you!"?  I'd prefer it if an extra line didn't show up below the button, and I don't need the view cart or the continue shopping functions.

I'm using the Debut theme.

Thanks so much!

HC5
Tourist
14 0 1

Sorry, my previous post was supposed to be directed at @TyW, but if anyone else here knows how to do this, please share!  Thank you.

Keith_Lai
Visitor
1 0 0

HI,

when I try to convert web language to English ( shop domain/en )

but it is not working and will redirect to  ./cart

SpringWind
New Member
4 0 0

Hi There! I added the <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> and Ajaxify cart works now. However the Cart icon on the top right corner of my theme is broken and does not go to the cart page. When hovered on it shows javascript&colon;void(0). As anyone experienced the same thing and knows how to fix this?

SpringWind
New Member
4 0 0

Need Help with broken Cart icon on my theme.

After adding <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script > as suggested in previous posts, the ajaxify-cart is functioning correctly but the cart link on theme is broken. When hovering on the icon is shows javascript&colon;void(0). How to fix this? Thanks.

Jewel
New Member
5 0 0

Hi, I have implemented it according to your Guideline. Its almost working fine on the Collection page. But not work on the Product page. Now I am facing problem....

1. In the mobile message not showing. In the desktop view, I changed the collection page product box height space between two-row. 

2. If the product added on the collection page the cart does not count the item number. After reloading the page it will show the added item on the cart

Screen Shot 2020-08-07 at 3.01.25 PM.png

Jewel
Closy-Market
Tourist
11 0 2

Hi, I'm having the same issues, when I add the product on the collection page the cart does not update in the top right, after reloading the page it will show the added item on the cart.

Any ideas on a fix?

I use Debut Theme.

 

Thanks

n_bcn
Excursionist
18 1 1

Hello,

I have followed the tutorial and am having the same issue - the cart icon is not updating when an item is added to cart. Is anyone able to help?

Here is the link to my store, I am using the Brooklyn theme.

Thanks

Jewel
New Member
5 0 0

I solved my issue. Now it works fine.  Actually, these scripts not work for all themes. You need to work on the scripts based on your theme code. Here is my client site. You can check www.incensepro.com 

Jewel
HC5
Tourist
14 0 1

@Closy-Market @n_bcn Look at the post by @gab33 on page 3 of this thread.

Jewel
New Member
5 0 0

Hi, Can you please help me. I have added the scripts code on my site. everything is work fine but mini cart no updated when add to cart from the collection page. 

Site: https://www.incensepro.com/

 

Jewel

DeyDey2020
Visitor
2 0 0

Hi! I am using the Debut theme and this does not work for me at all. I followed everything to the T.

HC5
Tourist
14 0 1

@DeyDey2020 and for everyone else asking about the cart number not updating in the header until you refresh the actual cart page in the Debut theme, the issue can be resolved using the solution posted by @gab33 on page 3 of this thread.

Closy-Market
Tourist
11 0 2

Hi @HC5 the solution posted by @gab33 on page 3 of this thread does not work for me

Also, is it posible to show the standard cart popup when clicking on the button in the colection page? (see image)

Thanks

Screenshot 2020-08-26 at 23.11.30.png

HC5
Tourist
14 0 1

@Closy-Market Sorry I can't help you further, I don't know how to code. I just followed the instructions here like everyone else and combed through all the threads until I found a solution that worked for me.

n_bcn
Excursionist
18 1 1

Hi,

I tried the solution too but it did not make any difference.

Please let me know if you find a solution!

Thanks