Customize Your Shopify Cart With A FREE SHIPPING Progress Bar (EASY + NO Apps)
HTML-код
- Опубликовано: 9 июл 2024
- Add a free shipping progress bar to your cart! Works with the free Shopify themes like Dawn.
This video took quite a bit of time to, so if you liked it please like and subscribe - it helps us keep making videos like this.
----------------------------
📄 Code for this video can be found here: theprompted.co/blogs/tutorial...
👉 Want to hire us for personalized help? Book a consult call: theprompted.co/pages/hire-us
▶️ Subscribe for more videos like this ➡ @theprompted
----------------------------
TIMESTAMPS
00:00 - Introduction
01:38 - Making the theme customization
07:00 - Customize the progress bar for your store
----------------------------
#shopify #tutorial #ecommerce #freeshipping
Themes: Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight
----------------------------
Music track: lucid by massobeats
Source: freetouse.com/music
![How To Add Free Shipping Upsell In Shopify Cart [Without App]](/img/1.gif)
Thanks a ton! Great work! worked perfectly on Crave Theme as well!
Thank you! You guys are awesome.😃
You're a legend!
This has been amazing, i can't express how thankful i am.
You guys rocks and i will stay tuned for more news from your channel! i am hungry for knowledge!
Thank again and keep up with the good works.
Thanks it works!
Wow this is exactly what I was looking for! Thank you so much!
You’re welcome!
Thank you so much! This looks so clean, it's perfect. I really appreciate your tutorials
Glad you like them!
Thank you again for helping me with this, I am just getting to implement it into my store tonight. You're the best !
Happy to help!
Thank you so much! Very helpful!
Glad it was helpful!
tx, useful shait!
Wow that’s cool man I’ll definitely try this out
Awesome - let me know how it goes!
Thank you so much! It worked for me. This is exactly what I was looking for for a while. Can you also make a video on how to add both free shipping and free gifts in the same tracker?
This is a great addition. Have seen a tutorial elsewhere, but the option to include this on the page or drawer is perfect. Thanks. And, would love to see a tutorial that allows you to place the quantity selector on the same line as the add to cart button on the product page. Keep sharing. Very valuable information!
Glad it was helpful!
Thanks for the video
You're welcome!
Thanks bro :)
You're welcome!
You Rock Brooo!!!!
Hi, just a thought. Could you make the progress bar has 2 step? Example when you hit $20 = free shipping, When you hit $50 Free gift
Great idea! Added it to the suggestions list
Thank you! Is it possible to do this if we have only added free shipping over a $100 spending threshold for our US customers, but not for the rest of the world? I only want US customers to see the progress bar, not everyone else. Thanks.
The progressbar looks so good! Sadly i have no cart.name in my schema settings. Working with DAWN 15.0.0. Any help would be really appreciated!
great video,thanks for creating !! just wondering if that wouldnwork on impulse theme by archtype? plz reply
Unfortunately this solution was designed for the free Shopify themes, so it might not work. I haven't specifically tried to implement it in the Impulse theme but it probably just needs a few modifications only to work.
muchas gracias! where can i find more icons like the one you use before congrats?
That's actually just an emoji. You can find all different types of emojis using online resources like emojipedia
Thank you very much for this video! Unfortunately it is not working with the Sense-Theme. Do you have any ideas why?
I've tested it and it I found that it also works with Sense.
What errors are you getting? What version are you using? Could you try the installation on a fresh version of Sense to either re-create the problem or find a step that may have been missed?
this is great! although how can i make it work with converting currencies ? it only takes the number set in currency goal, but 70$ is not the same as 70 euro for example . also i would love to enable it based on number of items in the cart, how would this work?
I'll be looking into both of these things for a 2nd version of this - thanks for commenting!
another great video!
Thanks man! Really appreciate it, has helped me a lot with the website!
Do you happen to have a mega-menu video ? I am desperate to customise the standard mega menu - add opacity / overlay background to it - some transition features and be able to position the submenus according to parent folder and so on :].
If you have a link or know of someone else or a forum dealing with this, I would be grateful.
Keep up the work!
I'm glad you like it!
I have a couple navigation menu videos that you can check out: ruclips.net/video/dwjEeU3_tH0/видео.html and ruclips.net/video/wUWo39swCC4/видео.html
The second one has a solution for a opacity/background feature, but not sure what transitions you're looking for. But do check those out and let me know if they help!
Thank you for this amazing tutorial. Can we customize it to be by the quantity of items in the cart instead of the amount of money? for example: You are 1 item away from free shipping.
Great idea - will look into that for the next version!
Hi,
Thank you very for those videos. Unfortunately, the integration of the red add to cart button and inventory feature has overwritten the payment badges and the shipping progress cart.
Could you please guide me on how to restore these elements?
Thanks in advance for your assistance.
Best regards
I'm not sure what integration you are using, but any customization you add to your store you'll have to be careful of how it impacts previous customizations. If you're using the theme editor settings to change the add to cart button color, it should not affect your other customizations. If you are using an app, then its possible it's not compatible with the custom code.
Hello and thanks for your video, it works great. Just a quick question, on my website I have multi currency, €/$/ AUD$, when I set up the free shipping for 100 for example, it's 100 in all currency. Means Aussie people will have free shipping for less amount spent. Is there anything that can be done so it's 100 in the original currency and that it updates automatically when we switch currency?
Thanks! Will be looking at multi-currency for the next version of the progress bar.
Can you please add a feature that allows us to enable and disable the option to show the threshold message and bar or just threshold message when the cart is empty?
Thanks for the suggestion! Will consider that for the next version
Thank you for this GREAT video 🙏🏻🙏🏻 but the issue is the text under the progress bar is in gray color and my scheme is dark, so the text is not visible enough. Do you know how to fix it??
Thank you and good point! I just made an update to the code. There's a new setting for the text color that you can adjust to match your theme
thanks for the great video, will the progress theshold be in your stores default currency? and change based on market for example store is set in usd?
It works for the store's default currency, but likely won't work for multi-currency stores.
@@theprompted thanks for the reply, any idea on how to get it to work for multi currency?
Can't say for certain yet - I would have to dig into the Shopify theme code to understand how Shopify manages multi-currency.
Really appreciate your work and guide for all these! Beginner friendly!
Just curious, I have a small problem whereby I'm selling to multiple countries, such as US and Canada therefore it has different exchange rates. My store is in USD and my main product costs USD$50. However, in the progress threshold i set $60 for free shipping. however whenever a canadian customer enter my store, it automatically shows the USD$50 as $67CAD and when they add to cart, it automatically qualify them as free shipping. It works fine for US customers showing they are $10 away from free shipping.
Is there anything I'm setting up wrongly?
Thanks for bringing this up and I'll have to look into this. The code does not specifically consider multi-currency stores so it'll likely need to be modified.
Hi. I was so excited for this tutorial! But unfortunately, it doesn't work for stores with different shipping rates based on shopify markets :( Love your channel bdw. Subscribed!
Thanks for your support! We'll look into making a new version that can support different ship rates.
It worked. Thanks a ton.
Can we also add a sticky bar at the top showing the free shipping bar?
Yes, that would be possible. You would first have to add the shipping bar code to the relevant pages (ex: as a section), and then modify the css so that the position is fixd
@@theprompted Thanks, I'll try.
Very good video, thank you.
Everything worked for me except for one problem.
With the first product I still have a comma in the price in euros (€30.01), but with the second product there is a dot again (€10.02). The third product in the shopping cart also has a point. I have changed the cart.js according to your instructions with amount_with_comma_separator. But it does not change. Do you have any advice?
When you say first product, second product, third product, do you mean you have three products in your cart, and the line items have different currency formats (dot vs comma)?
If so, that is strange because this customization does not modify how the cart item prices are shown. We are only adding the progress bar into the cart. Is it possible you have another customization or app that is interfering with your cart?
I have a problem, first its not showing in The cart page only in drawer , but Thays fine , the thing is , when i have a product in the cart and i add the quantity of the same product its displaying the code for the money left needed and its only updating when i refresh , any ideias how to fix it?
What theme and version are you using?
Assuming you're using a compatible theme, then it seems you may have missed a couple steps in the installation. What I would suggest is install a fresh new version of Dawn and try it again. If you get a different result then you can backtrack to see what you did differently the first time around.
Hello! I cant figure out how to do this for the narrative theme. Any ideas? I cant find cart.js and the code is different etc. Would love any help. Thanks!
Unfortunately the Narrative theme is a Shopify 1.0 theme, which isn't supported by the Shopify 2.0 platform. You would need to upgrade your store to one of the newer free Shopify themes (ex: Dawn) to use this customization.
When i add or remove item from my cart i have to refresh page for the shipping bar to update any ideas how to fix this?
Using motion theme
It sounds like the javascript to handle the dynamic behavior isn't working for you. This customization was designed for the free Shopify themes like Dawn, Refresh, Sense, Origin, etc, so unfortunately javascript modifications to the cart.js file won't work with Motion.
I dont have the cart.js asset only the cart.json template? any idea why?
If you're using any of the free Shopify themes (ex: Dawn, Refresh, Sense, etc), then there should be a cart.js file under the Assets folder. This will be lower in the sidebar than the cart.json file which is found in the Templates folder. If you still can't find it then you might be either using a really old version of the Shopify theme or a third party theme.
Hello! Is there a way to make the progress bar quantity based and not price based? I'm trying to do "buy any 4 items get free shipping"
Any help would be really appreciated thank you!
Yes, this is possible, but unfortunately requires some code updates. I have this in my queue and will be coming out with a new version with this feature!
Great man.! but the value of free shipping never update on cart untill i refresh the page
same happen on product page as well
This sounds like an issue with the js. Can you double check those steps?
What I also suggest is to install a fresh new version of your theme (ex: Dawn) and start again from scratch. If you get a different result it can help you troubleshoot what went wrong.
@@theprompted i have the same problem but i cant update my theme because i have a lot of apps and code , any help?
The idea of using a new version of the theme is to have a draft theme to work through the solution without affecting your Live theme. Once you get it working it will be easier to add back to your Live theme.
Could you please show me how to add two more goals? I'm thinking of a free gift and a discount. Also, how can I visually represent these goals on the progress bar? I imagine having an icon with a delivery van at the beginning, then a gift icon in the middle, and a percentage icon at the end. This way, the bar would indicate how close or far one is from a goal.
That's a great idea - I've added this to our suggestions list!
Super video! Helped a lot but i still have one issue. I set shipping to 4,5€. Free shipping is set to orders above 55€. When I add 1 Product to the cart the shipping bar is correct. But when I add a second item its the 2 items price + the 4,5€ Shipping. And because of that it messes up the sipping bar. Checkout is 53,98 but it says "goal reached" although the goal is set to 55€. Can I exclude the shipping costs from the shipping bar? I would be very grateful for your help! Kind Regards
I'm having the same issue. My store currency is Aud. My free shipping amount is $55.
- If I add two products to the cart ($17.5 each, totalling $35) the bar will correctly say 'you're only $20 away'.
- Then I remove one item from within the car draw. It now says 'you're only $28.55 away'.
- My shipping amount is $8.95 and it's somehow including this amount now. (8.95 shipping + 17.50 product + 28.55 = $55 free shipping threshold.
It's an awesome bar! I hope you might have a suggestion for @viralFans and myself to get it working!
Thanks a bunch :)
Strange, I haven't been able to re-create this issue.
Is your shipping charged as a line item in your cart?
The progress bar should only be adding up the cost of items in the cart, which doesn't normally include the shipping charges.
@@theprompted Hello, i fixed the problem. After I published my store the issue was resolved! Very weird because it did not work when my shop was restricted with a password.
That's great! Glad it works now.
what if i want the progress bar to be linked with items on cart?? for example we give free shipping on orders over 3 items, indipendent of amount
That can certainly be done - I'll add this to the list to look at!
Hi sir, I want to 3 Goals like %10 discount on 50 USD, %20 discount on 100 USD, %30 discount on 150 USD how can I recreate like this code? and this code calculating total value my item value > 50 but total value is 45 cause we have automatic %10 discount on 50 usd so total value is 45 usd this code writing 5 usd more for free shipping how can i fix this
how do i change the amount until free shipping?
To set the amount on your backend (ie. actually affects the pricing when checking out), you have to go to Settings --> Shipping and delivery and then edit your shipping thresholds. You can learn more about it here: help.shopify.com/en/manual/shipping/understanding-shipping/shipping-rates
For the frontend threshold set using this customization (ie. the number that shows up on the progress bar of your store), you have to change the threshold number in Theme Editor --> Settings --> Cart --> Progress Threshold (example shown at 06:35).
You will need to adjust both whenever making any changes to your shipping thresholds.
I have a problem when deleting an item. It then says "You're only €{{amount_with_comma_separator}} away from free shipping" until i refresh. Does someone have a fix for that?
Did you try the troubleshooting step at the bottom of the tutorial instructions?
how do I get this to work with multi-currency checkout?
Good question - I'll have to look into that
Yooo perfect time to delete upcart app lol
U saved me alot of monthly subscriptions, thanks prompted ❤️
Love it!
@@theprompted
One thing will be great with this feature and that's the color of the progress bar before and after reaching the goal
I think everyone will like that option
Hope u update it 🙏
@@theprompted+1
@@theprompted+1
@@theprompted plz :"(
i sell worldwide and i have different options for free shipping depending on the country that my customers order from (because shipping is much more expensive).
would there be a way to set different prices depending on the country? maybe it could utilize the already determined "free shipping" options under shipping and delivery.
Yes, having the threshold automatically determined would be quite useful! I would have to look into this.
However, Shopify calculates the shipping rates on the checkout page after the customer inputs their address. So your scenario would be quite complicated and would require some workarounds to make it usable.
@@theprompted yes i understand. however it should be somehow possible to just show different prices based on location. i'll have a look into this.
thanks a lot!
Why it is not working on the cart page. By the way such a great video. It will be good if this work on cart page as well :)
Thanks! I show what it can look like on the cart page at 01:23. For the cart page to function, you have to make sure you update main-cart-items.liquid file as shown at 04:38
How can the text be repositioned to be above the progress bar?
To do this, you can simply move the div for goal-message and its contents to above the div cart-progress-bar-container.
Okay, thank you. And, how would I create more space under the cart progress bar or place a horizontal line underneath like the other sections in the cart that are separated by lines?
@@theprompted I have made the following adjustment:
{% if remainingForGoal > 0 %}
{{ dynamicPreGoalMessage }}
{% else %}
{{ postGoalMessage }}
{% endif %}
{% endif %}
Would this be correct? It appears fine, but I want to make sure that this is proper code syntax.
If it shows up properly on your store, then it should be ok!
Thank you very much for your help. I noticed a small problem with the code. I sell my products in euro €, so the progress bar is displayed with the € symbol. Then when I reach the free shipping amount, I get the second message. So far, so good. But when I remove a product from the basket and fall below the threshold again, I get the first message, but this time with the $ symbol. Do you know how to correct this problem ?
The code was just updated recently, so you might have tried this just before it was fixed. Can you try again with the new code and let me know if it works?
@@theprompted I reused the old version of the code, strangely the currency problem was solved, but now when I edit the cart (add or delete), it marks a message "An error occurred while updating your cart. Please try again". I did a test, the problem comes from the "cart-progress-bar-custom.liquid" file. Do you know how to fix this problem in the code?
The error is too general to know what's going on, but if it's not where the progress bar should be, then it's likely a different problem.
As for the progress bar, I highly suggest using the latest version. fyi it was updated less than a day ago.
@@theprompted Ok no problem, thanks, so I'm using the latest updated code. But the problem is that now it says "{{amount_with_comma_separator}}" instead of the currency when I reach the progress bar goal and come back below the goal. I've noticed that the problem only occurs with the store's main currency. For other currencies, there's no problem.
Got it, thanks for the feedback. Looked into this and it's related to Euros format using commas instead of periods. If you replace {{amount}} with {{amount_with_comma_separator}} in the cart.js code, then that should solve your problem. I added a bit more information in the code/instructions link if you need, under a troubleshooting section at the bottom.
Hello, thanks a lot for this tutorial! unfortunately when adding the code in settings_schema.json I have an error message that says:
Section 8: setting with id="cart_type" option value is mandatory
Section 8: setting with id="cart_type" option 'type' is not a valid attribute
Section 8: setting with id="cart_type" option 'content' is not a valid attribute
Section 8: setting with id="cart_type" option 'id' is not a valid attribute
Section 8: setting with id="cart_type" option 'default' is not a valid attribute
Section 8: setting with id="cart_type" option 'info' is not a valid attribute
Any idea why? Thanks a lot!!
Did you modify any of the schema settings that were shared? It seems like the schema code is getting the id cart_type, which isn't a valid type. Try to re-start the process again but simply copy+paste the shared schema settings without any modifications.
@@theprompted that's what I've done, no midifications and I have this message unfortunately
Hm, that's strange. The structure of the json is very important. Is it possible you missed a comma or perhaps pasting it inside the wrong bracket? Be careful on the hierarchy of where you place the code and avoid extra commas or make sure there are no missing commas (each setting needs commas in between except the last one).
hey grate video, i coulden't find cart.js ...could it goes by any other name?..... i found a cat.js i don't know if it is the same
What theme and version are you using? If it's one of the Shopify developed themes then it should have a cart.js
Why can't i see the progress bar anywhere?
This tutorial was designed for the free Shopify themes (ex: Dawn, Sense, Refresh, etc). Are you using a premium/paid/third-party theme?
@@theprompted I'm using Refresh but i fixed the code and now it works. Thank you
Glad you got it to work!
Sorry but I faced some bug related to this section today on my store 😢
I found that when we use a discount that happens inside the cart such as amount off product or order, the progress bar reset itself when it reach the goal and request another reach, I tried to fix it but I'm too noob when it comes to JavaScript 💔
Can you help us fixing this issues so we can you use it for something other than free shipping?
Thanks in advanced!
Do you mind elaborating on the issue? Normally discount codes are applied on the checkout page, so by then you would have already navigated away from the cart page. Is there some other discount method you're using?
@@theprompted for free shipping discount yes, it apply at checkout
But for amount of order or product discounts, it apply in the cart and show discounted subtotal there.
Try the progress bar while order/product discount is active to see the glitch 🙏
@@theprompted sorry for commenting twice but i really love this feature and i don't want to go back to upcart app
Any updates? 🙏
@@theprompted and in case my previous comment wasn't very clear
The discounts that apply inside the cart such as "amount of order" or "amount of product" get applied and shown inside the cart, and when that happens, the progress bar think it's new cart and reset his goal
Meaning he doesn't recognize discount action for now
Sorry, I'm still not sure what you're referring to.
However, I will be revisiting the cart progress bar for a newer version of Dawn, so hopefully your problem gets resolved then.
There is no code in the link
You can reveal the code by opening the triangle toggle menus in the instructions section
it did not work for me :(
What problems are you running into?
great video! can you give please give script for € users also, please. this section "your only away for 34€" is changing for dollar sign.
Good point! I just made a small update to the code that should be able to handle different store currencies. Just replace it with the new code and let me know if it works for you.
@@theprompted Hey! worked perfect for dawn theme. Thank you, really enjoying your content.
Great! Thanks for watching and glad it worked for you :)
But if you do quantity changes in the cart itself, the $ currency appears again, but when you refresh the page "€" works again @@theprompted
@@theprompted it sometimes still refreshes to dollar when changing things in cart
impulse theme not working make it video will be useful 👍
Got it! Will add that to the list.
@@theprompted Any luck on this?
how we can make it like this journey like Buy 3 for 499 Buy 5 For 599 Buy 10 for 999
Thanks for the idea! Will consider adding this feature in the next version of the cart progress bar
Hi, after trying 2 times, it still doesn't work for me (Down theme).
The first time, the progress bar didn't appear and no error code was displayed.
The second time, it was the same except that an error code appeared at the bottom of the basket saying: (Liquid error (snippets/cart-drawer line 74): Could not find asset snippets/cart-progress-bar-custom.liquid).
However, I followed the video 100%.
The error is saying that the cart-progress-bar-custom.liquid file isn't found. Here's a coupl common reasons why it might not be found (even if you did create a new file):
- Did you by any chance have a typo in the filename or add an extra ".liquid" in the name, so that it's cart-progress-bar-custom.liquid.liquid?
- Did you create it as a section file instead of a snippet? Make sure you're creating it under the "Snippets" folder
Good job!
unfortunately, on the Craft theme is not working. My cart-drawer.liquid is empty. Do you think this is the problem? Thank you!!!
You might be looking at the cart-drawer.liquid in the Sections folder. If you go to the Snippets folder instead, you'll see another cart-drawer.liquid file. That's the one that should have the code
How can i turn it off? theres no option I see to enable/disable.
Unfortunately there's no setting for that. I'll have to add one in the next version.
For now, the simplest way is to comment out the line {% render 'cart-progress-bar-custom' %} from your main-cart-items.liquid and cart-drawer.liquid files.
Hey man great Video, i really like the progress bar on my shop but i run into one issue. If customers change the ammount in the cart and not over the shop its saids "You're only €{{amount_with_comma_separator}} away from Free Shipping" instead of the nummber. Is there any solution to this or did i make any mistakes with the code? I did every step exectly like you four times now and it still saids the same thing...
I have the same problem. Have you found a solution?
@@ViralFans nope i will probly have to buy an app for the progress bar
Did you update your cart.js file by replacing {{ amount }} with {{ amount_with_comma_separator }}? There's a "troubleshooting" section at the bottom of the link that might resolve this issue.
dawn theme 13.01 my cart.drawer file only have this code in it {%- render 'cart-drawer' -%} i had to go on github wheere someone was sharing the file...thats crazy. Thank you for the video!
ps: please make an update for this so we can add product suggestions on the cart something like You may also like.
fyi if you're seeing just {%- render 'cart-drawer' -%} you may have opened up the section file instead of the snippet file.
@@theprompted Thank you so much! Please consider adding an option of You may also Like or Frequently bought together. Also put a tip jar in your video description your making us save money so we can at least thank you :)
You're welcome! And yes product recommendations on the cart page has been added to our suggestions list.
I appreciate the sentiment! Right now our channel is still too small to add the tip feature, so the best way to tip us for now is to share our tutorials with as many people as possible to help us grow!
Thanks for your support :)