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
Hi, were you able to resolve this issue? I am using the Debut theme and this coding did not work for me. Thanks!
any luck?
I really wanted this to work for me because it is absolutely something I need for my shop. I followed it to a T.. but sadly it still takes me to the cart page instead of just adding to cart.
what version of the Debut theme are you using? The most recent version should have this function available without any code modifications.
Hi, it works for me! Thank you. Is there any way to change the colour of the message that pops up after adding to cart? Part of it is now green and I would like to change it to all black.
Many thanks,
Marielle
Marielle what theme are you using. I'm using Debut & all of this didn't work at all. Still taking me directly to cart. Any suggestions?
This works for me and my custom theme but the page never refreshes unless it is manually refreshed.
Any solutions to this?
https://www.the-olivegrove.co.uk/collections/wraps/products/souvlaki-arni
I have now reverted to my saved theme copy as it's better to take them to cart than having a frozen page.
Hey! I just made this update myself, and figured out where to change the colour.
Look for this piece of code in the "ajaxify-cart.liquid" snippet:
.ajaxified-cart-feedback.success {
color: #000000;
Where I bolded the 0's above, that's where you will enter the HEX# of the colour you'd like the text to be
**I am using the "Minimal" theme and I just followed this tutorial to a tee and had no issues, everything worked as planned. Thank you!!
🙂
To change the color, under the
ajaxify-cart.liquid
Hold down command + F and search "Color"
You will find something that says:
}
.ajaxified-cart-feedback.success {
color: #3D9970;
}
Where it says "#3D9970" is where you can copy and paste a new color code.
Hi, I am using the minimal theme and it does not work for me
I finally got mine to work on my Minimal theme. For anyone who might have been struggling, I had to make sure there was a linebreak above and below the line:
{% render 'ajaxify-cart' %}
I have theme "Supply". I cannot find {% render 'ajaxify-cart' %} anywhere.
I have successfully added the "add to cart" with qty to my catalog pages, but that takes me to the cart and I would like to fix that.
This is as close as it gets:
settings:{
cartType: {{ settings.ajax_cart_method | json }}
}
}
</script>
{% if settings.ajax_cart_method != 'page' %}
{% include 'ajax-cart-template' %}
{% endif %}
Any ideas?
@kkris That code was in the original instructions, you add it to theme.liquid yourself, but you just have to make sure that there's a linebreak before and after.
Hi Kris, could you share how you added the quantity to you catalog page, is it a "- an +"selector??
I`m trying solve it on my theme "Groca".
Thank you.
For the Brooklyn theme, this worked by just creating the Ajaxify-cart.liquid snippet. Did not have to do the additional steps as has been listed for "Debut". Will be testing and confirming if this works fine. The only place I have caught an issue is with Product Recommendations (within a single Product page, at the bottom), where the Add To Cart button is still opening the Cart Page.
Also, as a follow-up for those who want to edit the design. It is very easy to do from within the Ajaxify-cart.liquid file. Can confirm, works.
Hi! So i tried it yesterday and it worked for awhile. Then i went on doing other stuff like adding the shipping calculator and it stopped working! 😞
Hello!
Thanks for this - the functionality works great! I do have a problem however: when the button changes (adding... & thank you states) the background colour of the button and text becomes unreadable (see the image attached). I can't seem to find how to change the colour of the button when it is in the dynamic state. Can you help?
Additionally I was wondering how the success message can disappear after a few seconds (instead of it staying). I am not good at coding so apologies for the questions.
All help is much appreciated!
Thanks!
For the text to disappear, go to Ajaxify-cart.liquid and search for addedToCartBtnLabel. Under this line, you can find
window.setTimeout(function(){ $addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted'); _setText($addToCartBtn,_config.addToCartBtnLabel); }, _config.howLongTillBtnReturnsToNormal);
just add this before },
$('.ajaxified-cart-feedback').remove();
so it should look like this
window.setTimeout(function(){ $addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted'); _setText($addToCartBtn,_config.addToCartBtnLabel); $('.ajaxified-cart-feedback').remove(); }, _config.howLongTillBtnReturnsToNormal);
if you need to increase the time change the howLongTillBtnReturnsToNormal value
For the label colour, I need to look at your code to know what's wrong, but you might be able to change that if you go to Customize Theme > Theme Setting > Colors
If not it is probably in theme.scss
I might be able to know where it is exactly if I see your website
Hey,
Thanks for the feedback- the line solution worked, but sadly I am still struggling with the button colour.
https://dancingwithgoats.de/products/my-man-drawer-is-bigger-t-shirt
Here you can see what I mean after you click add-to-cart.
Any help would be awesome.
Thanks!
It's definitely your CSS and you should be able to fix it in your theme customization. try using a different colour for your buttons to see if you can find a better colour. the problem is that your codes invert the colours when activated, I need to see your codes to know where to change it.
It's in theme.scss search for .btn and see if you can find it, between { & }.
Also might I suggest using <!-- split --> for your product description.
Thanks for this. Super helpful.
Unfortunately I am getting a repeat of the success message and can't seem to locate the fix. Are you able to help please?
Hello,
I was able to get this feature to work on Express theme, so thank you! But I see a few people have the same issues as me, where the "Added to cart" message shows twice.
Does anyone have a fix for this?
No...I have tried everything, even ajaxify...but no results in Brooklyn theme...
Verónica
Lovethispetshop.com
In newer Debut themes, it's not necessary to update the header.liquid file.
Just use the correct "hide" class in the ajaxify snippet:
$(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count)).removeClass('hide');
@gab33 Using the correct hide class in the ajaxify snippet without changing header.liquid worked for me - thank you!!
Hi This helped me! thanks a lot!
Hi,
I tried and followed all the instruction given above including <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> plus necessary line spacing but it doesn't help in staying on the product page after adding products to the cart. Can someone help please?
Thanks a ton in advance
hi! I love this and I got it to work perfectly on "Impulse" theme. I then tried to do the same thing to the "Impulse New" theme and it did not work at all. Is there something different that I need to do for the newer theme? I replaced all of the .size() with .length as well.
Thanks!
Hi - I am using the Impulse theme and sadly it's not working for me. Can someone please help me?
are you using an old version of the impulse theme? It should allow for AJAX add to cart automatically.
@HandHugs - i am not sure it mine is old one. here is the url - https://rkmholdings.es/
can someone please post the ajaxify-cart code with replacing .size() method with .length
You only have to replace .size() with .length from the ajaxify file. It’s clear from the given instruction. Do ctrl+F and search .size(). I think they were about 3-4 that were highlighted and then you replace all them with .length and you’re done.
Your theme is slightly outdated - you can update it for free and test it out, but you might need some help with that. I couldn't test out the add to cart function because all the products I saw were either sold out or not available to add to cart. Impulse should always keep you on the product page when you add to cart. Try it out on the Impulse demo site:
Hi, this is my first ever message on a board so please forgive any breaking of rules etc.
I have added the Ajaxify code to my Minimal theme and it works brilliantly, except . . .
. . . it doesn't show variant choice to users.
Has anyone managed to amend the code so it shows the 'variant choice' dropdown and passes the data to the cart?
Thanks
Andy
I also use minimal theme and it works excellently. Are you sure you did follow the original instructions well?
Please share the codes.
Hi Andi, I am also looking for this capability. Have you found a solution yet? I am still researching and will be happy to share if I find something.
I am using the Brooklyn theme.
I have also added the Ajaxify code to my Debut theme and it works brilliantly, except . . .
. . . it doesn't show variant choice to users.
How do you amend the code so it shows the 'variant choice' dropdown and passes the data to the cart?
How can I make the success message stay when I trigger the Ajax call a second time?
Currently, the previous message disappears when I add another product to cart: https://88bw7ndp7utzxmkv-40459239580.shopifypreview.com
Thanks you.
I have followed the instructions exactly. It does work for me on chrome but doesn't work on Safari on iPhone. Please suggest any solution for this.
So I followed these steps and found that the procedure applied to some products and not others. I believe this is because I have an app I'm using as custom options for some products (the same products that redirected to the cart page). How do I fix this? I use the Pacific theme.
Hello ive followed this guide 100% and I've triple checked it and it still seems not to work on my Brooklyn theme can anyone please help ?
Hi, I have also tried adding the same script to my Debut theme but the cart page continues to come up when adding a product.
Has anyone got this to work on the Debut theme?
My theme is the original Debut version I started with in January 2019. I would be happy to update the theme, but there are numerous customised scripts running that enables better functionality than the out of box version. So I don’t want to have to re-do these if updating the theme over-writes any of these customised scripts?
My site is live: https://ptpdist.com.au
Any suggestions?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024