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

Highlighted
Community Manager
Community Manager
501 29 778

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

Highlighted
Tourist
5 0 1

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/

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

Highlighted

Work great, thanks

@CPerry @JosephGuerrero 

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

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
Highlighted
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!

0 Likes
Highlighted

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 

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

0 Likes
Highlighted
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. 

0 Likes
Highlighted
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

0 Likes
Highlighted
New Member
2 0 1

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?