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)

akamai
Visitor
2 0 1

Thank you, this was very helpful, however I have a "Coming Soon" page for customers to preview items that may be out of stock but are due soon. 

https://akamailtd.com/collections/coming-soon

This solution allows my wholesale customer to add a Sold out item to their cart. They are only notified at checkout that the item is not available. When they try to order from a product page that is sold out the Blue "Add to Cart" button changes to a red "Sold Out" button.

How do I change this setting?

Max11
Shopify Partner
76 4 36

So this was bugging me as it has a few people. I couldn't get the number in the cart in the header to update. I worked it out!

The suggestion used the wrong selector for my version of the debut theme.

Instead of using 

cartCountSelector: '#CartCount',

in the ajaxify-cart.liquid file.
I had to set the cartCountSelector to 
#CartCount > span

As my actual numbers were in a span within the css id selector of CartCount. Your theme might be slightly different, but you hopefully get the idea. 

 

edit: to expand a little bit more on the suggestion throughout the thread in regards to how to 'fix' this issue. All that line does is remove the correct css class to unhide the cart count number when there is more than 0 in the cart. I had to add one new line into the ajaxify-cart.liquid code to make sure this still happens.

under this line (you can get rid of ".removeClass('hidden-count')" from the end of this line

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


Type
$( "#CartCount" ).removeClass( "hide" );

Where #CartCount is the id of the div that has the hide class when there is 0 in the cart (it's probably CartCount).

JanRae
Excursionist
27 0 7

is there any updates on this? tried it and it's not working for me as well as the added code by the other user. also anyone knows how to add a cart drawer for debut theme?

OSt
Shopify Partner
6 1 1

Hi there!

 

Firstly, thanks so much for this -works perfectly fine with "Dawn"

 

Could some kind JS guru help me with this:

 

I want the labels on the buttons to go back to what they were before, not changed to generic "Add to Cart".

I know that I could simply tweak this in the .liquid file:  addToCartBtnLabel: 'Add more'

 

But....

 

I'm using different labels on different buttons, I need them to revert back to the original text after going through "Thank you", "Adding...", etc..

 

Is there a way to capture the original Button Label and apply it to the Button again, after the item has been added?

 

Thank you so much in advance!

 

OSt
Shopify Partner
6 1 1

Hey guys,

 

After doing some tweaking to the code, I've been able to achieve the above.

 

Here's what worked for me, in case someone else out there is looking to do the same:

 

1) Find this line in ajaxify-cart.liquid:

var $addToCartBtn = $addToCartForm.find(_config.addToCartBtnSelector);

 

Add the below directly below it:

var addToCartBtnLabelOrgnl = $addToCartBtn.text();

 

So it will look like this:

var $addToCartBtn = $addToCartForm.find(_config.addToCartBtnSelector);
var addToCartBtnLabelOrgnl = $addToCartBtn.text();

 

2) Find this line in ajaxify-cart.liquid:

_setText($addToCartBtn,_config.addToCartBtnLabel);

 

Replace with:

_setText($addToCartBtn, addToCartBtnLabelOrgnl);

 

That did the trick for me.

The text turns back to what it was before pressing the button.

 

 

maurinclan
Explorer
52 1 31

This works great for me on my first page of products, however on products that need to load (additional pages) it still redirects to the cart.  Does anyone know how to fix this?  Thanks!

TRANZEND
Tourist
7 0 3

Hello, 

I can't find Debut step 7⬇️

Find the following code: {% if cart.item_count > 0 %}

in header.liquid.

 

What can I do?

Thank you 🙂

hangyat
Visitor
1 0 0

Hi! How can I add another language for the button?

JackTorch
Shopify Partner
17 2 0

Do you have a guide for OS 2.0 themes? 

Tipada
Excursionist
24 0 5

FIXED IN DEBUT!

Just like many other are reporting here it stopped working for me in debut as well. It worked for 2+ years during which bunch of stuff kept being added to theme.liquid so what I had to do is to move 

{% render 'ajaxify-cart' %} to the bottom of the file again aaaand magic 🙂

 

ajaxify cart fix on Debut.jpg

ajaxify cart fix on Debut 2 in action.jpg

and if you wanna make it look pretty like above then use the code below inside ajaxify-cart.liquid between lines 20 and 31

 

// What you might want to change
addToCartBtnLabel: 'Add to cart',
addedToCartBtnLabel: 'Added',
addingToCartBtnLabel: 'Adding...',
soldOutBtnLabel: 'Sold Out',
howLongTillBtnReturnsToNormal: 2000, // in milliseconds.
cartCountSelector: '#CartCount',
cartTotalSelector: '#cart-price',
// 'aboveForm' for top of add to cart form,
// 'belowForm' for below the add to cart form, and
// 'nextButton' for next to add to cart button.
feedbackPosition: 'aboveForm',

 

as well as line 91:

 

_showFeedback('success','<i class="fa fa-check"></i> Added to cart! <a href="/cart">View cart</a> <br> .',$addToCartForm);

 

Demo store

 

 

dh_harrypapas
Tourist
10 1 1

Is it possible to change this error text?

Screenshot 2022-12-19 at 9.35.10 am.png

It makes it sound like there is an limit you can add to cart. I want to re-word it to say "We only have 1 in stock"

Quadernando
Visitor
1 0 0

Hello, we use Minimal theme and code didn't worked. We have to add something else? Thank you. 

larrygelberg
Visitor
1 0 0
I have been updating our store to use the new Local 2.0.0 Theme and pretty much everything works now except the new “Add Thread To Cart” button on our Product page, always takes us to the cart.  We’d like the behavior to be that after clicking this button, we stay on the product page and not go to the cart page.   The instructions in this article worked for Local 1.2.2 - You can see this working at a page such as https://gorgeousfabrics.com/products/wide-silk-charmeuse-tea-rose
 
However, in the Local 2.0.0 upgrade this doesn't work -  It always takes you to the Cart after adding the thread, but it DOESN’T for the main product!
 
1. Why would the behavior be correct for the main product, but not the secondary (thread) product?  Is there code I can steal from the main product to apply to the secondary one?
2. I keep reading in your documentation about a Cart or Product theme setting that disables this (always go to the cart page) behavior across the board, but I couldn’t find that in the Local 2.0.0 Theme settings.  Is is hidden somewhere I’m not looking?
 
Thanks for your help in advance!

Deanos
Visitor
1 0 0

worked like a charm on impulse theme.

david220799
New Member
6 0 0

the cart count is not updated in live , it's getting updated after refreshing