Shopify themes, liquid, logos, and UX
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.
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.
To edit your theme code:
theme.liquid
.</body>
tag. On a new line right above the closing </body>
tag, paste the following code:{% render 'ajaxify-cart' %}
ajaxify-cart
, and click Create snippet:ajaxify-cart.liquid
file, paste this code hosted on GitHub..size()
with .length
. The .size()
method is depreciated as of JQuery 1.8.
If you use Debut, then continue to the next steps:
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() {
</script>
tag. On a new line right above the closing </script>
tag, paste the following code:}
cartCountSelector: '.cart-count, #cart-count a:first, #gocart p a, #cart .checkout em, .item-count',
cartCountSelector: '#CartCount',
header.liquid
.{% if cart.item_count > 0 %}
{% if cart.item_count > -1 %}
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
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.
YES! Thank you!
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!
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 ?
For me it worked perfectly, just 2 steps.
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
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
Brilliant! Thank you so much for this help.
hey!
Thanks for share this! works great!
there is a way to add this button only in a specific collections?
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
super helpfull! Thank you (I am using supply theme - and it works perfect!)
@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.
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
Worked perfectly thank you!
Works great! Only thing is that my cart doesn't count the products in it. I am NOT using Debut. I am using Brooklyn.
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!
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.
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.
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
Which theme are you using ?
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.
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
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
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.
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
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?
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!
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 %}
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
@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
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>
Hi! I have tried every step but it still does not work for my store. it is brooklyn theme. Do you know why?
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
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 ?????
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/
Great explanation and description of the steps. Followed each one precisely and it works! Great job!
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:
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
Damn Good! Its Work Like Magic, Thanks billion times
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
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.
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
I am using Minimal theme, do I continue with the Debut Theme part of the tutorial or stop at the step before that?
worked perfectly! thanks a lot
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
Hello! I havewe Brookling Theme and it doesn't work....
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 😞
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
Great! It works for me.
Thank you!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024