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
Thank you, this was very helpful, however I have a "Coming Soon" page for customers to preview items that may be out of stock but are due soon.
https://akamailtd.com/collections/coming-soon
This solution allows my wholesale customer to add a Sold out item to their cart. They are only notified at checkout that the item is not available. When they try to order from a product page that is sold out the Blue "Add to Cart" button changes to a red "Sold Out" button.
How do I change this setting?
So this was bugging me as it has a few people. I couldn't get the number in the cart in the header to update. I worked it out!
The suggestion used the wrong selector for my version of the debut theme.
Instead of using
cartCountSelector: '#CartCount',
in the ajaxify-cart.liquid file.
I had to set the cartCountSelector to
#CartCount > span
As my actual numbers were in a span within the css id selector of CartCount. Your theme might be slightly different, but you hopefully get the idea.
edit: to expand a little bit more on the suggestion throughout the thread in regards to how to 'fix' this issue. All that line does is remove the correct css class to unhide the cart count number when there is more than 0 in the cart. I had to add one new line into the ajaxify-cart.liquid code to make sure this still happens.
under this line (you can get rid of ".removeClass('hidden-count')" from the end of this line
$(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count)).removeClass('hidden-count');
Type
$( "#CartCount" ).removeClass( "hide" );
Where #CartCount is the id of the div that has the hide class when there is 0 in the cart (it's probably CartCount).
is there any updates on this? tried it and it's not working for me as well as the added code by the other user. also anyone knows how to add a cart drawer for debut theme?
Hi there!
Firstly, thanks so much for this -works perfectly fine with "Dawn"
Could some kind JS guru help me with this:
I want the labels on the buttons to go back to what they were before, not changed to generic "Add to Cart".
I know that I could simply tweak this in the .liquid file: addToCartBtnLabel: 'Add more'
But....
I'm using different labels on different buttons, I need them to revert back to the original text after going through "Thank you", "Adding...", etc..
Is there a way to capture the original Button Label and apply it to the Button again, after the item has been added?
Thank you so much in advance!
Hey guys,
After doing some tweaking to the code, I've been able to achieve the above.
Here's what worked for me, in case someone else out there is looking to do the same:
1) Find this line in ajaxify-cart.liquid:
var $addToCartBtn = $addToCartForm.find(_config.addToCartBtnSelector);
Add the below directly below it:
var addToCartBtnLabelOrgnl = $addToCartBtn.text();
So it will look like this:
var $addToCartBtn = $addToCartForm.find(_config.addToCartBtnSelector);
var addToCartBtnLabelOrgnl = $addToCartBtn.text();
2) Find this line in ajaxify-cart.liquid:
_setText($addToCartBtn,_config.addToCartBtnLabel);
Replace with:
_setText($addToCartBtn, addToCartBtnLabelOrgnl);
That did the trick for me.
The text turns back to what it was before pressing the button.
This works great for me on my first page of products, however on products that need to load (additional pages) it still redirects to the cart. Does anyone know how to fix this? Thanks!
Hello,
I can't find Debut step 7⬇️
Find the following code: {% if cart.item_count > 0 %}
in header.liquid.
What can I do?
Thank you 🙂
Hi! How can I add another language for the button?
Do you have a guide for OS 2.0 themes?
FIXED IN DEBUT!
Just like many other are reporting here it stopped working for me in debut as well. It worked for 2+ years during which bunch of stuff kept being added to theme.liquid so what I had to do is to move
{% render 'ajaxify-cart' %} to the bottom of the file again aaaand magic 🙂
and if you wanna make it look pretty like above then use the code below inside ajaxify-cart.liquid between lines 20 and 31
// What you might want to change
addToCartBtnLabel: 'Add to cart',
addedToCartBtnLabel: 'Added',
addingToCartBtnLabel: 'Adding...',
soldOutBtnLabel: 'Sold Out',
howLongTillBtnReturnsToNormal: 2000, // 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: 'aboveForm',
as well as line 91:
_showFeedback('success','<i class="fa fa-check"></i> Added to cart! <a href="/cart">View cart</a> <br> .',$addToCartForm);
Is it possible to change this error text?
It makes it sound like there is an limit you can add to cart. I want to re-word it to say "We only have 1 in stock"
Hello, we use Minimal theme and code didn't worked. We have to add something else? Thank you.
worked like a charm on impulse theme.
the cart count is not updated in live , it's getting updated after refreshing
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