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
I finally found this in the comments after the original post, and tweaked my code to add the script line, and now it works perfectly, yay!
copied from a previous comment
"I have also been trying to do this same thing for days now
FINALLY found something that worked
Follow the process for everything above. If you click Add To Cart, and it still takes you to the checkout page then try this
In your theme.liquid file
Add:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Right above:
{% render 'ajaxify-cart' %}
This worked for me and was the only minor step missing from this guide "
I also dug into the code and was able to remove the 'continue shopping' link which would redirect to the 'all products' page.
Yes Its Working Properly
thanks
but i need to do the success message shows in pop instead of bottom..
Hey Pal, I did exactly what you mentioned above and it worked perfect fine. But there is an issue in my cart page, It is showing paypal button on my cart page.
Hey Pal, I did exactly what you showed here, But there is an little issue with the add to cart page. It is showing paypal button in it. Can you please look into it
This really works, thank you !
Hi,
Thank you for your solution!
Is that possible to remove "continue shopping" from the popped up text? Thank you!
OMG! Thank you TONS!
can you move the add to cart massage below the buy it now buttom
This worked perfectly for me. Thank you so much.
hi guys
does anyone know how to get the "added to cart, view cart or continue shopping" wording under the add to cart button
thanks
Tutorial was easy to follow and worked perfectly for me, thank you!
thank you very much! It's very helpful. I use the minimal theme and it worked just as what you have instructed. 🙂
Hi does anybody know how to update the cart counter when I use the Warehouse theme. I followed the instructions and the items add to cart, but the cart counter does not update unless refreshed.
I am also using an older version of Debut, checked everything was done properly and it is not working for me either. 😞 Has anyone figured out a way to fix this without redoing the whole website on the updated debut theme?
@colorofheat you will need to hire a Shopify expert to help you figure out why your install isn't working or how to get your theme working with this function.
Hi i've got an issue with ajaxify, everything works well except that whenever i click add to cart the message shows up twice. I'm using the vogue theme. Is there any way to fix this?
I need solution for the same issue on my minimal themed store.
I do too!
Hi!
I was able to add the code to my store, but now I need some help with formating I need to change the error message and the messages are appearing before my button so they look rather bad, where could I change that behavior?
Regards
The styles (the way it looks) would have to be changed with CSS in your style sheet. You will need to know CSS or hire someone who does to help with that.
To change the language, you can change the variables in the ajaxify-cart.js file.
Hey there,
Is it possible to allow this new "Add to cart" button refresh the page at the same time?
I'm aware of what an AJAX is but I wasn't entirely looking for an AJAX solution in the first place. Although I wasn't looking for an AJAX solution, this is the solution I was looking for. To give you some background I coded a bar at the top of my website that gives the user (customer) a countdown for the amount of money they have to spend to get free shipping. I ideally would like that countdown to update as soon as the "Add to cart" button is pressed. The reason why I used this code is because it would allow my customer to continue shopping on the same page without having to click out of anything.
With this context, would it be possible to have this code refresh the page upon clicking the "Add to cart" button?
Thanks, Nate
Hi Nate! thanks for the extra info. You can add some extra code into the ajaxify script to tell it to update your free shipping progress bar without having to refresh the page. It needs to be specific for your theme and the classes of your bar, but it should be fairly simple if I know the class or ID of the shipping bar text. If you have a link to your site that I can see I may be able to help you add that code.
To be clear all you need is the link and nothing else? The link is https://sugar-laine-cutters.myshopify.com/
Since I haven't opened the store to general public yet the password is: "rotlisberger"
Let me know if you need any extra info, thanks
-Nate
Hi Nate,
I went to your site but I didn't see anything about free shipping in the bar at the top. For me it just says " Processing time: 1-3 business days"
Can you help me find the area you want updated when someone adds to cart?
Yes sorry I should've explained it better to you. I have that message display before the user adds anything to the cart. If you add something to the cart and refresh your page it'll display the price required now. I could take away that message if that clears up confusion.
I think the price countdown is not working apparently and all we can see is the same message even after adding products to the cart. I understand that you need a message there with a price countdown. I understand you also know AJAX then what is the actual issue? Do you need a solution of a simple page refresh on an addtocart? something similar to, like what update cart does on cart page?
Yes that's the issue. The message doesn't update at the top until you refresh the page. All I'm looking for is some sort of code to refresh the page when the "Add to cart" button is pressed. Either that or some type of code so that the message at the top doesn't need to be refreshed in the first place and auto-updates. I'm not too sure if the 2nd option is possible but all I need in its simplest form is a page refresh upon clicking the Add to cart button so that the user can see their new total as they add something to the cart instead of having to refresh the page manually. Thanks for the help,
Nate
did you try my code? It should work exactly how you want.
I did try it yes, I'm not too sure if you had received my email but the code you had sent takes me to the cart page upon clicking the Add to cart button.
To be clear what did your code intend to do?
The code I've tried implementing does the same thing, takes me to the cart page. Although this is a worthy solution, I just dont want the user have to click out of the cart page every time they add something to the cart.
Nate
there was a simple error in my code. This should work:
var cartTotal = cart.total_price;
var cartGoal = 3500; // your number times 100
if (cartTotal >= cartGoal) {
$('.announcement-bar__message').html('Your order qualifies for free shipping!');
} else {
var cartDiff = cartGoal - cartTotal ;
$('.announcement-bar__message').html('Add just '+Shopify.formatMoney(cartDiff, "${{amount}}")+'to your cart to receive free shipping!');
}
Hi,
I am using Venture theme. This functionality is working perfectly fine on all the pages except product pages. As soon as someone adds a product to cart from product page, double of whats exactly has been ordered gets added to the cart. I believe my default add to cart function on product page is working in tandem with the new one. Any solutions to this?
@Nrotlisberger I see! did you write the script for that bar or is it an app?
You would need to add something like this to the ajax script inside this function
$.getJSON(_config.shopifyAjaxCartURL, function(cart) {
... past code in here (probably on line 102)
}
var cartTotal = cart.total_price;
var cartGoal = 3500; // your number times 100
if cartTotal >= cartGoal {
$('.announcement-bar__message').html('Your order qualifies for free shipping!');
} else {
var cartDiff = cartGoal - cartTotal ;
$('.announcement-bar__message').html('Add just '+Shopify.formatMoney(cartDiff, "{{ shop.money_format | remove: "'" | remove: '"' }}")+'to your cart to receive free shipping!');
}
email me if you need more help 🙂 mail@handhugs.com
Hello, do you mind posting a simpler version of this, so when someone adds a product to cart, the text on the add to cart button changes to "Added to cart!" momentarily instead of "Thank you!"? I'd prefer it if an extra line didn't show up below the button, and I don't need the view cart or the continue shopping functions.
I'm using the Debut theme.
Thanks so much!
Sorry, my previous post was supposed to be directed at @TyW, but if anyone else here knows how to do this, please share! Thank you.
HI,
when I try to convert web language to English ( shop domain/en )
but it is not working and will redirect to ./cart
Hi There! I added the <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> and Ajaxify cart works now. However the Cart icon on the top right corner of my theme is broken and does not go to the cart page. When hovered on it shows javascript:void(0). As anyone experienced the same thing and knows how to fix this?
Need Help with broken Cart icon on my theme.
After adding <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script > as suggested in previous posts, the ajaxify-cart is functioning correctly but the cart link on theme is broken. When hovering on the icon is shows javascript:void(0). How to fix this? Thanks.
Hi, I have implemented it according to your Guideline. Its almost working fine on the Collection page. But not work on the Product page. Now I am facing problem....
1. In the mobile message not showing. In the desktop view, I changed the collection page product box height space between two-row.
2. If the product added on the collection page the cart does not count the item number. After reloading the page it will show the added item on the cart
Hi, I'm having the same issues, when I add the product on the collection page the cart does not update in the top right, after reloading the page it will show the added item on the cart.
Any ideas on a fix?
I use Debut Theme.
Thanks
Hello,
I have followed the tutorial and am having the same issue - the cart icon is not updating when an item is added to cart. Is anyone able to help?
Here is the link to my store, I am using the Brooklyn theme.
Thanks
I solved my issue. Now it works fine. Actually, these scripts not work for all themes. You need to work on the scripts based on your theme code. Here is my client site. You can check www.incensepro.com
Hi, Can you please help me. I have added the scripts code on my site. everything is work fine but mini cart no updated when add to cart from the collection page.
Site: https://www.incensepro.com/
Hi! I am using the Debut theme and this does not work for me at all. I followed everything to the T.
@DeyDey2020 and for everyone else asking about the cart number not updating in the header until you refresh the actual cart page in the Debut theme, the issue can be resolved using the solution posted by @gab33 on page 3 of this thread.
@Closy-Market Sorry I can't help you further, I don't know how to code. I just followed the instructions here like everyone else and combed through all the threads until I found a solution that worked for me.
Hi,
I tried the solution too but it did not make any difference.
Please let me know if you find a solution!
Thanks
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