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)
MellowTypeMatt
Visitor
1 0 0

Hey there, you might be having the same problem as me. I followed everything perfectly but was still getting redirected to the Cart page. It's probably because I'm using an older version of Debut. Apparently newer versions don't have this problem, but at this point I've already made so many changes to the code that I can't update it without losing all my customizations. So I had to dig deep to find the issue.

In addition to everything mentioned in this thread (adding <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>, etc.) I had to go to Assets > theme.js and comment out one line 3375:

.done(function() {
    window.location.href = redirectUrl;
 })

This is the line of code that's rediredting to the cart page. I commented it out like so:

.done(function() {
    // window.location.href = redirectUrl;
})

And it stopped redirecting! Hope this helps anyone using the old Debut theme.

muarvelous
Visitor
2 0 0

YES! Thank you!

DylanVaughan
Visitor
1 0 0

Thanks for this guide, it was really useful.

I was expecting this to be harder when I seen the warning, thankfully this was a really simple and easy to follow guide.

I use the minimal theme, and so far I've had no problems with the code on my store!

kartcamel
New Member
9 0 0

I followed all steps. and everything is working good. For Minimal theme. 
But How can i stop redirecting to cart page for related products ?  as i have add to cart button on all collections and related products too. 

Can anyone help me about it ? 


EmilianoMina
Tourist
7 0 1

For me it worked perfectly, just 2 steps.

kartcamel
New Member
9 0 0

its not work for related products. Minimal theme. 

Note : I am talking about Related products  on product page.  when i click on add to cart its go on cart page.  it should stay on same page.   but it does not. 

website = https://kartcamel.com.au/

Password = 12345

arybendel
Visitor
1 0 0

Hi, i am using supply theme and i want my add to cart button in collection page, open the modal cart as the add to cart button does in product page. 

Thanks

mtan
Tourist
10 0 4

Brilliant! Thank you so much for this help.

LigalBahiri
Excursionist
45 0 4

hey! 

Thanks for share this! works great!

there is a way to add this button only in a specific collections? 

EkaterinaG
Visitor
1 0 0

I'm using theme Minimal, and managed to make the original guide work.

Someone was asking for the add to cart button, that doesn't switch to cart but keep\s the same page.

That you can add to collections, I have used code from comment from GinaP

https://community.shopify.com/c/Shopify-Design/Adding-Add-to-cart-button-below-products-on-collectio...

 

MihneaRaducu
Excursionist
15 0 0

super helpfull! Thank you  (I am using supply theme - and it works perfect!) 

sh6
Visitor
3 0 0

@TyW Thank you so much, worked like charm! 🙂

xiaomozarta
Visitor
2 0 0

@TyWthanks so much! this works on my Supply theme but, is there a way to update the Cart at the header area to show the updated quantity?
in my image below the (1) qty in the Cart (header part) is added previously. And I added another product as seen below. I want the Cart (header part) to show now as (2).
Grateful for all the help.

addtocart.JPG

banned

elbtürkis
Visitor
2 0 0

Hi, I am using the minimal theme and tried to implement the ajaxify-cart. In the last step, after changing size() to length I tried saving and was told, that line 165 is not working and can therefore not be saved.  My page is elbtuerkis.de  Can you please help me?

Thanks Annecathrin

RyanTheLion
Visitor
1 0 0

Worked perfectly thank you!

 

Michelle12
Shopify Partner
10 0 8

Works great! Only thing is that my cart doesn't count the products in it. I am NOT using Debut. I am using Brooklyn.

elliebchildrens
Excursionist
13 0 3

Thank you for this information! I am using the Minimal theme and it is working perfectly for most of my products. But for one of my product templates (a product where I offer customization), when you click "add to cart" nothing happens. The item is not added at all. Does anyone know why this would be? Thank you for your help!

HandHugs
Shopify Expert
198 1 60
What are your settings for inventory on that product? Could it be sold out or unavailable?
elliebchildrens
Excursionist
13 0 3

The inventory is not tracked for this product. I have other product options with these same settings (but a different product template) that are working fine, so I am not sure what the issue is. 

ravipatel89
Visitor
2 0 0

this is the perfect solution. very good 🙂 this is work for my "Kagami" - https://themes.shopify.com/themes/kagami/styles/kyoto 

thank you for help.

 

TeamLB
New Member
29 0 0

Hello,

I tried the above steps and now My Cart button isn't working. I added the Snippit and than removed it. Now I don't see pop up window after adding item to Cart that had two buttons " continue shopping " or "goto cart" and when I click "my cart" from menu it is not showing slider minicart. Please assist. Thanks!

My store www.lavenderandblues.com

regds,

Suni

ravipatel89
Visitor
2 0 0

Which theme are you using ?

TeamLB
New Member
29 0 0

Hello Ravi ,

 I am using Premier theme. I was able to bring pop up window and mini Cart back but when I add item to cart and goto my  cart and delete item from mini cart I get error message “ invalid command” as seems like mini cart isn’t updating quantity until I manually refresh page. I am looking for mini cart refresh code after adding items. 

davebpure
Shopify Partner
4 0 0

This was very helpful post.  AND IM SO CLOSE 🙂  Almost works perfect

im actually using a different theme called ICON.  i have been able to successfully implement the code to get this to almost work perfectly. 

My theme already had a similar file named Ajaxify-cart-so.liquid file in place so all i had to do was add the {% render 'ajaxify-cart-so' %} code to the theme.liquid file.  But like others I have an issue with the cart total and price not updating in the header until the page is refreshed or a new page is loaded.  

i tried the changes to the ajaxify-cart-so file, by adding the code for windowload and the cartcounterselector changes which didn't seem to work.  Then On page 3 of the comments someone suggested that wasn't necessary and to just update some code in the ajaxify-cart file  .removeClass to HIDE 

My theme had this line of code with the code 'hidden-count' which i swapped out with 'hide' but that didn't seem to work either

current code

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

changed to 

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

feel like im really close and not sure what to try next.  

LIVE SITE: https://one-ball.com

elhayds
New Member
8 0 0

Hey,

I've checked your store and it appears that you managed to get it to automatically add to the cart and update without refreshing.

How did you manage this in the end as I am having the same issue?

Thanks

KehKeLunga
Tourist
11 0 4

Hi! @TyW 

I use the brooklyn theme. I followed the steps you mentioned here but I am not getting the results.

Kindly help me rectify it.

Thanks & Regards.

everwrap
Tourist
16 0 1

Very good thank you! It's working for me on the Debut theme on the individual product page, but not working in the main collection page or on my home page. I have add to cart buttons on my homepage. I'm sure there's a quick code fix, would you be able to help? Thank you - www.everwrap.com

Kenric_Uy
Visitor
1 0 0

Hi,

Thanks for the guide, it worked for me with regards to the "Add to Cart" function. However, i am still facing an issue when I change quantities - clicking "+" or "-" still leads me to the product page. Is there any work around for this as well?

federicamontani
Visitor
3 0 0

Hello,

I followed these steps and now I have an error message in all the pages of my shop that says: "Liquid error: Could not find asset snippets/ajaxify-cart.liquid".

Could you please helping me remove it?

Thank you!

STsuthep
Tourist
7 0 1

Hi, Thanks for your code it work very well but my Streamline themed doesn't show up the cart icon when it's empty.

Please help me for the solution.

Here's my 'header.liquid'.

{%- assign main_menu = linklists[section.settings.main_menu_link_list] -%}

{% comment %}
  menu_alignment options:
    - left
    - left-center
    - center-left
    - center-split
    - center
    - right
{% endcomment %}

{%- assign menu_alignment = section.settings.main_menu_alignment -%}
{%- assign logo_alignment = 'left' -%}
{%- if menu_alignment == 'center-left'
   or menu_alignment == 'center-split'
   or menu_alignment == 'center' -%}
  {%- assign logo_alignment = 'center' -%}
{%- endif -%}
{%- if menu_alignment == 'right' -%}
  {%- assign logo_alignment = 'left-right' -%}
{%- endif -%}

{%- if main_menu == blank -%}
  {%- assign logo_alignment = 'center' -%}
{%- endif -%}

{% comment %}
  mobile_menu_style options:
    - top (not fully implemented yet)
    - thumb
{% endcomment %}
{%- assign mobile_menu_style = 'thumb' -%}

{% include 'slide-nav' %}
{% if settings.cart_type == 'sticky' %}
  {% include 'sticky-cart' %}
{% endif %}

{%- assign template_name = template | replace: '.', ' ' | truncatewords: 2, '' | handle -%}

{%- assign overlay_header = false -%}
{% if template_name == 'index' and section.settings.sticky_index %}
  {%- assign overlay_header = true -%}
{% endif %}
{% if template_name == 'collection' and collection.image and section.settings.sticky_collection %}
  {%- assign overlay_header = true -%}
{% endif %}

{% style %}
  .slide-nav,
  .slide-nav button {
    font-size: {{ settings.type_navigation_size }}px;
  }

  {% if mobile_menu_style == 'thumb' %}
    body {
      {% comment %}
        Thumb menu button height + padding + 40
      {% endcomment %}
      padding-bottom: 148px;
    }
  {% endif %}

  {% if mobile_menu_style == 'top' %}
    body.screen-layer-open {
      {% comment %}
        Space for the close modal button
      {% endcomment %}
      padding-bottom: 40px;
    }
  {% endif %}

  {% if overlay_header %}
    @_media only screen and (min-width: 769px) {
      .collection-hero__content .section-header--hero {
        margin-top: 40px;
      }
    }
  {% endif %}
{% endstyle %}

<div data-section-id="{{ section.id }}" data-section-type="header-section">
  <div
    data-header-style="{{ section.settings.header_style }}"
    class="header-wrapper{% if overlay_header %} header-wrapper--overlay is-light{% endif %}">

    {% if section.settings.show_announcement %}
      {% if section.settings.show_announcement_home_only %}
        {% if template == 'index' %}
          {% include 'announcement-bar' %}
        {% endif %}
      {% else %}
        {% include 'announcement-bar' %}
      {% endif %}
    {% endif %}

    {% comment %}
      Logo is used as a between-screen loader, so we only
      show the mobile logo on the home page (setting to override)
    {% endcomment %}

    {%- assign mobile_logo_only = true -%}

    <header
      class="site-header{% if section.settings.logo_hide_mobile %}{% unless template_name == 'index' %} small--hide{% endunless %}{% endif %}"
      data-overlay="{{ overlay_header }}">
      <div class="page-width">
        <div
          class="header-layout header-layout--{{ menu_alignment }}{% if mobile_logo_only %} header-layout--mobile-logo-only{% endif %}"
          data-logo-align="{{ logo_alignment }}">

          {% if logo_alignment == 'left' or logo_alignment == 'left-right' %}
            <div class="header-item header-item--logo">
              {% include 'header-logo-block' %}
            </div>
          {% endif %}

          {% if logo_alignment == 'left' %}
            <div role="navigation" aria-label="Primary"
              class="header-item header-item--navigation{% if menu_alignment == 'left-center' %} text-center{% endif %} small--hide">
              {% include 'header-desktop-nav' %}
            </div>
          {% endif %}

          {% if logo_alignment == 'center' %}
            <div class="header-item header-item--left header-item--navigation small--hide" role="navigation" aria-label="Primary">
              {% if menu_alignment == 'center' or menu_alignment == 'center-split' %}
                {% if section.settings.header_search_enable %}
                  <div class="site-nav">
                    <a href="{{ routes.search_url }}" class="site-nav__link site-nav__link--icon js-modal-open-search-modal js-no-transition">
                      <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
                      <span class="icon__fallback-text">{{ 'general.search.title' | t }}</span>
                    </a>
                  </div>
                {% endif %}
              {% endif %}

              {% if menu_alignment == 'center-left' %}
                {% include 'header-desktop-nav' %}
              {% endif %}
            </div>

            {% if menu_alignment == 'center-split' %}
              {% include 'header-split-nav' %}
            {% endif %}

            {% if menu_alignment != 'center-split' %}
              <div class="header-item header-item--logo">
                {% include 'header-logo-block' %}
              </div>
            {% endif %}
          {% endif %}

          {% if logo_alignment == 'left-right' %}
            <div
              role="navigation" aria-label="Primary"
              class="header-item header-item--navigation text-right small--hide">
              {% include 'header-desktop-nav' %}
            </div>
          {% endif %}

          {% comment %}
            Center mobile logo if icons are not visible
          {% endcomment %}
          <div class="header-item header-item--icons{% if mobile_logo_only %} small--hide{% endif %}">
            {% include 'header-icons' %}
          </div>
        </div>

        {% if menu_alignment == 'center' %}
          <div role="navigation" aria-label="Primary" class="text-center">
            {% include 'header-desktop-nav' %}
          </div>
        {% endif %}
      </div>
    </header>
  </div>

  {% if mobile_menu_style == 'thumb' %}
    {%- if main_menu != blank -%}
      <div class="site-nav__thumb-menu site-nav__thumb-menu--inactive">
        <button
          type="button"
          class="btn site-nav__thumb-button js-toggle-slide-nav">
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-hamburger" viewBox="0 0 64 64"><path d="M7 15h51M7 32h43M7 49h51"/></svg>
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
          <span class="icon-menu-label">{{ 'general.drawers.navigation' | t }}</span>
        </button>

        <a href="{{ routes.cart_url }}" class="site-nav__thumb-cart js-drawer-open-cart js-no-transition" aria-controls="CartDrawer" data-icon="{{ settings.cart_icon }}">
          <span class="cart-link">
            {%- if settings.cart_icon == 'cart' -%}
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 64 64"><path d="M14 17.44h46.79l-7.94 25.61H20.96l-9.65-35.1H3"/><circle cx="27" cy="53" r="2"/><circle cx="47" cy="53" r="2"/></svg>
            {%- else -%}
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-bag" viewBox="0 0 64 64"><g fill="none" stroke="#000" stroke-width="2"><path d="M25 26c0-15.79 3.57-20 8-20s8 4.21 8 20"/><path d="M14.74 18h36.51l3.59 36.73h-43.7z"/></g></svg>
            {%- endif -%}
            <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
            <span class="cart-link__bubble{% if cart.item_count > -1 %} cart-link__bubble--visible{% endif %}">
              <span class="cart-link__count" aria-hidden="true">
                {{ cart.item_count }}
              </span>
            </span>
          </span>
        </a>
      </div>
    {%- endif -%}
  {% endif %}
</div>

{% if section.settings.header_search_enable %}
  {% include 'search-modal' %}
{% endif %}

{% schema %}
  {
    "name": "Header",
    "settings": [
      {
        "type": "header",
        "content": "Layout"
      },
      {
        "type": "select",
        "id": "header_style",
        "label": "Desktop style",
        "default": "button",
        "options": [
          {
            "value": "button",
            "label": "Sticky button"
          },
          {
            "value": "bar",
            "label": "Sticky bar"
          },
          {
            "value": "top",
            "label": "Top only"
          }
        ]
      },
      {
        "type": "select",
        "id": "main_menu_alignment",
        "label": "Header layout",
        "default": "right",
        "options": [
          {
            "value": "right",
            "label": "Logo left, menu right"
          },
          {
            "value": "left-center",
            "label": "Logo left, menu center"
          },
          {
            "value": "center-left",
            "label": "Logo center, menu left"
          },
          {
            "value": "center-split",
            "label": "Logo center, menu split"
          },
          {
            "value": "center",
            "label": "Logo center, menu below"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "sticky_index",
        "label": "Overlay header over home page"
      },
      {
        "type": "checkbox",
        "id": "sticky_collection",
        "label": "Overlay header over collection",
        "info": "(if collection image is enabled)"
      },
      {
        "type": "checkbox",
        "id": "header_search_enable",
        "label": "Enable search"
      },
      {
        "type": "header",
        "content": "Logo"
      },
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Logo"
      },
      {
        "type": "image_picker",
        "id": "logo-inverted",
        "label": "White logo",
        "info": "Used when on top of an image"
      },
      {
        "type": "range",
        "id": "desktop_logo_width",
        "label": "Desktop logo width",
        "default": 200,
        "min": 80,
        "max": 800,
        "step": 10,
        "unit": "px"
      },
      {
        "type": "range",
        "id": "mobile_logo_width",
        "label": "Mobile logo width",
        "default": 140,
        "min": 50,
        "max": 400,
        "step": 10,
        "unit": "px",
        "info": "Set as a max-width, may appear smaller"
      },
      {
        "type": "checkbox",
        "id": "logo_hide_mobile",
        "label": "Hide logo on mobile pages",
        "default": true,
        "info": "Maximizes screen space for your content. Add your logo under Animations to show your logo as the page loads instead. Logo always shows on home page."
      },
      {
        "type": "header",
        "content": "Navigation"
      },
      {
        "type": "link_list",
        "id": "main_menu_link_list",
        "label": "Menu",
        "default": "main-menu"
      },

      {
        "type": "header",
        "content": "Announcement bar"
      },
      {
        "type": "checkbox",
        "id": "show_announcement",
        "label": "Show an announcement"
      },
      {
        "type": "checkbox",
        "id": "show_announcement_home_only",
        "label": "Home page only"
      },
      {
        "type": "text",
        "id": "announcement_text",
        "label": "Announcement text",
        "default": "Free shipping and returns"
      },
      {
        "type": "url",
        "id": "announcement_link",
        "label": "Announcement link"
      }
    ]
  }
{% endschema %}

 

davebpure
Shopify Partner
4 0 0

I finally got this to work a couple of weeks ago and then was doing some testing on the site and now the site is just automatically loading the cart page once you hit the ADD TO CART button.  Would shopify have made any changes to their core code that would have broke this feature in recent weeks? 

dave

 

Magz
Visitor
2 0 0

@TyW  Hello,

 

I did exactly what you did and its now working fine, but how can my customers select the sizes before adding to cart from the main page?.

I been trying to fix this for 2 days with no luck.

 

Your help is much appreciated

vitazok
Visitor
1 0 0

Hello,

My products have 6 variants but no matter which one I choose it always adds the same variant to cart.

What do I need to change so that selected variant is added to cart (not the default one)?

Thank you

 

Link to the store:

https://thedropcor.myshopify.com/collections/use-dropcor-packaging

 

Code in ajaxify-cart.liquid:

<script>

window.onload = function() {

/**
* Module to ajaxify all add to cart forms on the page.
*
* Copyright (c) 2015 Caroline Schnapp (11heavens.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
Shopify.AjaxifyCart = (function($) {

// Some configuration options.
// I have separated what you will never need to change from what
// you might change.

var _config = {

// What you might want to change
addToCartBtnLabel: 'Add to cart',
addedToCartBtnLabel: 'Thank you!',
addingToCartBtnLabel: 'Adding...',
soldOutBtnLabel: 'Sold Out',
howLongTillBtnReturnsToNormal: 1000, // 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: 'nextButton',

// What you will never need to change
addToCartBtnSelector: '[type="submit"]',
addToCartFormSelector: 'form[action="/cart/add"]',
shopifyAjaxAddURL: '/cart/add.js',
shopifyAjaxCartURL: '/cart.js'
};

// We need some feedback when adding an item to the cart.
// Here it is.
var _showFeedback = function(success, html, $addToCartForm) {
$('.ajaxified-cart-feedback').remove();
var feedback = '<p class="ajaxified-cart-feedback ' + success + '">' + html + '</p>';
switch (_config.feedbackPosition) {
case 'aboveForm':
$addToCartForm.before(feedback);
break;
case 'belowForm':
$addToCartForm.after(feedback);
break;
case 'nextButton':
default:
$addToCartForm.find(_config.addToCartBtnSelector).after(feedback);
break;
}
// If you use animate.css
// $('.ajaxified-cart-feedback').addClass('animated bounceInDown');
$('.ajaxified-cart-feedback').slideDown();
};
var _setText = function($button, label) {
if ($button.children().length) {
$button.children().each(function() {
if ($.trim($(this).text()) !== '') {
$(this).text(label);
}
});
}
else {
$button.val(label).text(label);
}
};
var _init = function() {
$(document).ready(function() {
$(_config.addToCartFormSelector).submit(function(e) {
e.preventDefault();
var $addToCartForm = $(this);
var $addToCartBtn = $addToCartForm.find(_config.addToCartBtnSelector);
_setText($addToCartBtn, _config.addingToCartBtnLabel);
$addToCartBtn.addClass('disabled').prop('disabled', true);
// Add to cart.
$.ajax({
url: _config.shopifyAjaxAddURL,
dataType: 'json',
type: 'post',
data: $addToCartForm.serialize(),
success: function(itemData) {
// Re-enable add to cart button.
$addToCartBtn.addClass('inverted');
_setText($addToCartBtn, _config.addedToCartBtnLabel);
_showFeedback('success','<i class="fa fa-check"></i> Added to cart! <a href="/cart">View cart</a>.',$addToCartForm);
window.setTimeout(function(){
$addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
_setText($addToCartBtn,_config.addToCartBtnLabel);
}, _config.howLongTillBtnReturnsToNormal);
// Update cart count and show cart link.
$.getJSON(_config.shopifyAjaxCartURL, function(cart) {
if (_config.cartCountSelector && $(_config.cartCountSelector).length) {
var value = $(_config.cartCountSelector).html() || '0';
$(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count)).removeClass('hidden-count');
}
if (_config.cartTotalSelector && $(_config.cartTotalSelector).length) {
if (typeof Currency !== 'undefined' && typeof Currency.moneyFormats !== 'undefined') {
var newCurrency = '';
if ($('[name="currencies"]').length) {
newCurrency = $('[name="currencies"]').val();
}
else if ($('#currencies span.selected').length) {
newCurrency = $('#currencies span.selected').attr('data-currency');
}
if (newCurrency) {
$(_config.cartTotalSelector).html('<span class=money>' + Shopify.formatMoney(Currency.convert(cart.total_price, "{{ shop.currency }}", newCurrency), Currency.money_format[newCurrency]) + '</span>');
}
else {
$(_config.cartTotalSelector).html(Shopify.formatMoney(cart.total_price, "{{ shop.money_format | remove: "'" | remove: '"' }}"));
}
}
else {
$(_config.cartTotalSelector).html(Shopify.formatMoney(cart.total_price, "{{ shop.money_format | remove: "'" | remove: '"' }}"));
}
};
});
},
error: function(XMLHttpRequest) {
var response = eval('(' + XMLHttpRequest.responseText + ')');
response = response.description;
if (response.slice(0,4) === 'All ') {
_showFeedback('error', response.replace('All 1 ', 'All '), $addToCartForm);
$addToCartBtn.prop('disabled', false);
_setText($addToCartBtn, _config.soldOutBtnLabel);
$addToCartBtn.prop('disabled',true);
}
else {
_showFeedback('error', '<i class="fa fa-warning"></i> ' + response, $addToCartForm);
$addToCartBtn.prop('disabled', false).removeClass('disabled');
_setText($addToCartBtn, _config.addToCartBtnLabel);
}
}
});
return false;
});
});
};
return {
init: function(params) {
// Configuration
params = params || {};
// Merging with defaults.
$.extend(_config, params);
// Action
$(function() {
_init();
});
},
getConfig: function() {
return _config;
}
}
})(jQuery);

Shopify.AjaxifyCart.init();

}

</script>

{% comment %}
If you want to animate your feedback message.
{% endcomment %}

{% comment %}
{{ '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css' | stylesheet_tag }}
{% endcomment %}

{{ '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css' | stylesheet_tag }}

<style>
.ajaxified-cart-feedback {
display: block;
line-height: 36px;
font-size: 90%;
vertical-align: middle;
}
.ajaxified-cart-feedback.success {
color: #3D9970;
}
.ajaxified-cart-feedback.error {
color: #FF4136;
}
.ajaxified-cart-feedback a {
border-bottom: 1px solid;
}
</style>

Younesz10
New Member
8 0 0

Hi! I have tried every step but it still does not work for my store. it is brooklyn theme. Do you know why?

8ttomarket
Tourist
6 0 1

Hi there,

I followed exactly the steps you provided and it worked, but only for the original language version. I tried it under other 2 languages I have on my site, did not work. I used Langify.

Any one share some thoughts?

Many thanks!

Alice

NonaSupperClub
Tourist
6 0 2

Hello,

I tried this on the Brooklyn theme and it works really well. Is there any way of having the variants options show as well ?????

NandoMedina
Visitor
2 0 0

Thank you very much for this information. I have used and followed as instructed, and it worked out perfectly in my RETINA v.04 themes. I tested in both platforms, Desktop and Mobile, and both work perfectly.

You can check my store here to see the functionality: https://www.nandomedina.com/

 

HeimatSere
Visitor
1 0 0

Great explanation and description of the steps. Followed each one precisely and it works! Great job!

Nubi-Han
New Member
4 0 0

Hi All,

Desperately hoping @TyW or anyone who got this to work with the Brooklyn Theme can assist!

I have tried all of the steps in the original instructions:

https://help.shopify.com/themes/customization/products/stay-on-product-page-when-items-added-to-cart

This didn't work, so I then tried all of the additional tips to the end of this thread as well as some others I found for the Debut Theme just in case:

https://community.shopify.com/c/Shopify-Design/Debut-Theme-Stop-Add-to-Cart-from-directing-to-cart-p...

Still no joy.

I've thoroughly checked and re-checked every step and STILL cannot get the 'Add to Cart' button on product pages to stop re-directing to the Cart Page. What am I doing wrong??

Happy to share site details if need be.

Thanks in advance.

NHx

 

 

GouravKumar
Shopify Partner
31 1 11

Damn Good! Its Work Like Magic, Thanks billion times

GouravKumar_0-1622552812820.png

 

jessbeincute
Visitor
2 0 0

Hello, thanks for your solution. Everything works... except my cart doesn't automatically update the cart.

I noticed in your demo website the cart count updates. How do I get mine to update?

Theme: Minimal 

EmmaEvans22
New Member
5 0 0

I've followed all the advice on this thread and nothing is working. I had the add to cart button on my collection page so customer can quickly add products to cart without going onto the actual product page. However when I click on the add to cart button and it just takes me to the product page and doesn't actually add to cart. I've spent hours researching to try and find a solution that works but i'm not getting anywhere. I have currently had to remove the add to cart feature as i was getting customer complaints, so it was easier to remove it until there is an actual way to make it work. Did anyone have any luck with staying on the product page? Getting rather frustrated with it now.

Nix1
Visitor
1 0 0

Hi there,

Thanks for the awesome work. It works great. The only issue I have is that it stops working with my infinite scroll on the collection pages. The first page works great but after the second-page loads, the add to cart button works as per previous and redirects the user to the cart. I'm using the Minimal theme. Any ideas?

I used this infinite scroll here: https://www.huratips.com/tech-tips/how-to-add-infinite-scroll-pagination-to-shopify-collection-pages...

Cheers

MeganSonk
Shopify Partner
3 0 3

I am using Minimal theme, do I continue with the Debut Theme part of the tutorial or stop at the step before that?

aamir_rhmn
Visitor
1 0 0

worked perfectly! thanks a lot

electconsultng
Visitor
1 0 0

Thank you... It worked, but the CART BAG icon does not show numbers of products on the cart. Please I use DEBUT. any way out please

 

Lovethispetshop
New Member
4 0 0

Hello! I havewe Brookling Theme and it doesn't work.... 

Kareema
Tourist
10 0 4

A very good resource! This is working in collections page too. I am working on debut theme.

However facing some issue with generating mini cart pop-up items. after clicking 'add-to-cart' button from collection page, its not going to cart page, rather adding the number in cart icon - yes this is what I wanted. But the issue is, clicking on the cart icon does not show the new item until i refresh the page 😞 

Lndy
Visitor
1 0 0

Hello,
I managed to create the add to cart on the product page.

1. I would like to change the css style, do you know how I should do it?
2. In addition, my Add to cart button does not appear as clickable, what should I do?
3. How to hide the phrasing that appears when the product is added to the cart?

thank you so much

HM_Helal
Shopify Partner
39 8 7

Great! It works for me.

Thank you!