Stay on the product page when items are added to the cart

After an item is added to the cart, some Shopify themes will load the cart page. If you want your customer to stay on the product page to continue shopping, you'll need to implement Ajax into your theme.

If you use Debut, Jumpstart, or Minimal, you'll need to implement this modification.

Caution

Most Shopify themes, including Boundless, Brooklyn, Pop, Simple, Supply, and Venture, already possesses the ability to stay on the product page when an item is added to the cart. You can enable that function in either the Cart page or the Product page section on your Customize theme page. Do not modify your theme as per the instructions here.

Tip

Themes built on Timber already have Ajax implemented, and do not require this modification.

Implement Ajax in your theme

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  2. In the Layouts folder, find your theme.liquid file and click to open it.

    Ajaxify cart 4
  3. Find the closing </body> tag (press ctrl + F on a PC or command + F on a Mac to search within a file).

  4. On a new line right above the closing </body> tag, paste the following code:

    
    {% include 'ajaxify-cart' %}
    
    
    Ajaxify cart 2
  5. Click Save.

  6. Click the Snippets folder to view its contents.

  7. Click Add a new snippet.

    Related products 3
  8. Name your snippet ajaxify-cart. Click Create snippet. By default, your new ajaxify-cart snippet will open in the code editor.

    Ajaxify cart
  9. In a new browser tab, open this file.

  10. Copy the contents of the file to your clipboard with ctrl + C on a PC or command + C on a Mac.

  11. Return to your Themes page. In the online code editor, Paste your clipboard contents using ctrl + V on a PC or command + V on a Mac into your ajaxify-cart.liquid snippet.

  12. Unless you use Debut, click Save. If you use Debut, continue to follow the remaining steps.

    Note

    The remaining steps apply only to Debut. If you use another Shopify theme, then the customization is complete. If you want to make changes to the configuration of the Ajax snippet, you'll find instructions in this readme file.
    

  13. Find the opening <script> tag at the top of the page. On a new line right below the opening <script> tag, paste the following code:

    window.onload = function() {
    
  14. Find the closing </script> tag. On a new line right above the closing </script> tag, paste the following code:

    }
    
  15. In the same file, find the following code:

    cartCountSelector:             '.cart-count, #cart-count a:first, #gocart p a, #cart .checkout em, .item-count',
    

    Replace it with:

    cartCountSelector:             '#CartCount',
    
  16. Click Save.

  17. In the Sections folder, find your header.liquid file and click to open it.

  18. Find the following code:

    
    {% if cart.item_count > 0 %}
    
    

    Replace it with:

    
    {% if cart.item_count > -1 %}
    
    
  19. Click Save.

Demo Store

Here's a demo store that uses the Minimal theme.

Want to discuss this page?

Visit the Shopify Community