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

Caution

This document has not been verified to work with sectioned themes. We are currently reviewing our documentation and will update them soon. You can try to implement this on your theme, but keep in mind that it may not function.

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 Minimal or New Standard, you'll need to implement this modification.

Caution

If your theme is Boundless, Brooklyn, Classic, Kickstand, Launchpad, Lookbook, Pop, Simple, Solo, Supply, or Venture, then your theme already possesses the ability to stay on the product page when an item is added to the cart. You can enable that function in the Cart page section of 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.

To implement Ajax in your theme:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

  3. Click the Snippets folder to view its contents.

  4. Click Add a new snippet.

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

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

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

  8. Return to your Themes page.

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

  10. Save your changes.

  11. Under the Layouts folder, locate and click on your theme.liquid file to open it.

    Ajaxify cart 4
  12. In the online code editor, scroll down until you see the closing </body> tag.

  13. Right before the closing </body> tag, paste the following code:

    
     {% include 'ajaxify-cart' %}
    
    

    Ajaxify cart 2

If the default behavior doesn't work out for you, you can configure a few things by writing a bit of JavaScript code. You'll find all configuration instructions in this readme file.

Demo Store

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

Want to discuss this page?

Visit the Shopify Community