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

Highlighted
Community Manager
Community Manager
299 8 259

Caution: This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following 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.

 



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 | Community Manager @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes