Powerful Free Shipping Bar

BACK

Home Shopify App Powerful Free Shipping Bar

MODE Shopify Premium Theme: The Free Shipping Bar Feature

today I'm going to show you how we set,up our free shipping bar in our mode,theme so you'll notice here,um in the car drawer right now I've,added a product and I'm being informed,that if I spend another,15.55 I will get the free shipping,notification,um so underneath theme settings and cart,you're going to see all the information,you're going to need but here you can,see I have added USD and then here I,have 100 dollars,and then this is the 50 cents now don't,put in a dot in order to indicate this,because it will not work so you just,have to just leave it without the dot,and just write it like this so right now,if I spend over a hundred dollars and,fifty cents I will indeed get the free,shipping notification so if I add one,more product to the cart we can see I'm,now eligible for free shipping so as you,can see here I've swapped over to my,country location Finland and it's set to,Euro and in this I'm going to use,Finland as France as my examples I want,to have that if you spend over 200 euro,in Finland you will get the free,shipping and then for France we're going,to say that it has to be 300 Euro now so,it's going to be written a little bit,differently to the USD because we need,to really hone in on the location so,what I mean by that is I need to,actually put in first a country code now,if you don't know what the country codes,are you could Google them or if you,check out our cart drawer guide,um I have a link over to a PDF file,where I just basically writ out,everything for you so if there's a,country you need to find you can just,come in here look for say Finland here,you can see Finland uses Euro and fi is,the country code here so I need to go,back here and I need to put in fi and,all in capitals as well by the way and,then put in Euro and then I said I,wanted to be 200 euro and zero cents,and now I have to do the same for,friends so I'm just gonna,put in a new line for friends,go back over here and look for friends I,can see friends here so FR is the,country code for France so if it Go F4,in Euro and then I need to put in 300,Euro and zero cents,so now once this green bar at the top,loads across and I click on the cart I,should be seeing that I need to add a,yeah here we go so here I can see you,need to add 113 Euro and five cents and,now if I was to go up here to the bar,and switch over to friends,it should mean I have to add another,extra 100 euro if I click here and it,does indeed so I need to add more here,um if it's a case that for other uh,countries in Europe that they are going,to use all the same,uh discount so let's just say for uh,Germany Ireland any other country that,uses Euro and they're going to have the,one discount you could just simply go,here Euro and then just put in the,amount so let's say a 150 euro is the,amount so if I swap over now to say,another country here in the list say,Austria that's just gonna show me that I,don't need to put in as much so oh that,didn't switch over so I click Austria,here,and now if I check m

The above is a brief introduction to Powerful Free Shipping Bar

Let's move on to the first section of Powerful Free Shipping Bar

How To Use Free Shipping Bar | Free Shipping Bar Tutorial For Shopify

hey there guys my name is marcus and in,this video i'm going to teach you how,you can easily use,an install free shipping bar on shopify,so the first thing you want to do is,just click here add application,and let's wait until it's going to load,when we have it,go to bottom and click install app,now let's just wait until it's going to,load,and here we go so first thing,set up free shipping go to shopify admin,settings shipping,so this is the first thing we need to do,is come here,and you can add fulfillment service,manage rates here,and you see the rate name price free,for shipping too so we have it,now what you can do open the relevant,shipping profile add a shipping zone to,this profile,add a condition select based on order,price,so let's see shipping profile,we can go create a shipping zone we can,add a rate standard,and you can add conditions so,based on the order price,and now enter minimum order price,same as the goal in the free shipping,bar app,let's go on node 2 50 right,and price free rate name standard based,on order price,okay click done condition,50 and up and i'm going to delete the,first one here,delete so standard condition 50 euro and,up,price is free we got it now what we need,to do,is pretty simple and pretty easy uh,we'll just,install also these open those,create a new bar and now you can have a,basic template or premium template you,need to upgrade to,access the premium template and you can,go,shades of gray good mood harvest gold,like let's say harvest gold here,and now you see preview free shipping,for orders of 100,only 99 you're away from free shipping,and now,my first free shipping bar that's the,name of content,i'm going to zoom in more so you can see,it clearly,so free shipping goal is a 50 euro this,is what we did in a straight from the,beginning,in our condition,and free shipping for orders over 50,euro,initial message free shipping for orders,over 50,progress message away from shipping so,let's say if they are going to enter,multiple products go achievement message,congratulations you've got a free,shipping,you can add a link to a bar you can,include close button,no select the display position top bar,pushes down the rest of the page,always visible while scrolling top bar,pushes down the rest of the page,and,currency you can like optimize it where,you want to have,so if i'm going to have it and manual,placement or bottom bar,i'm going to leave it just right here,currently again you can add it to,dollars i'm from europe so i'm going to,leave europe,background text color special text color,everything i'm going to leave it like,this,font again you can change that you can,also change the font size,so you can go righteous and then it's,going to get changed as you can see,so when i'm going to choose carter one,it's going to look like this you can,increase also the font size here,and as you can see it's pretty big so,i'm going to make it smaller,and i'm going to change the righteous,and let's say i'm going to 420,it's pret

After seeing the first section, I believe you have a general understanding of Powerful Free Shipping Bar

Continue the next second section about Powerful Free Shipping Bar

Shopify how to add a Free Shipping Bar

hi this is Jung from let's go choppy,file and in today's video I will show,you how you can modify the announcement,part of your theme so that you can,display the amount that is missing for,someone to qualify for free shipping and,actually this is fairly easy to,implement if the value only gets updated,on a page refresh so we will start,building exactly that but then we will,also take it to the next level and work,on updating this value without any page,reloads so if someone clicks the Add to,Cart button this should update,automatically and even if someone is on,the cart page and then he decides hey I,want to unlock this free shipping offer,oh maybe I would just add another one of,these then this message should also,update and this implementation will be a,little bit more advanced so you can,decide which one is better for your,level of coding and I also have to give,you a small warning because this,implementation right now won't work very,well in a multi currency setup so this,would need further improvements and this,goes a little bit beyond the scope that,I can teach in this video but anyways I,think this is a great way to increase,the average order value so let's dive,into it alright so most modern themes,already come with some settings in their,customizer to display an announcement,bar and you might either have an entire,section that is called announcement bar,or if you're using the W theme like I do,you have the settings in the header,section so down at the bottom I can show,this announcement bar and here I can,enter the message that I want to display,and in the first step we will go ahead,and add a few settings to this section,so that you can first enter a message,before the free shipping is unlocked,then the success message so when someone,qualifies for free shipping and we will,also have a slider we will select the,threshold value from which free shipping,will be unlocked,so therefore we want to navigate to our,theme files and simply click the action,button and then edit code and as we saw,that the announcement bar settings live,within the header section we want to go,to the section folder and simply open,the file that is called headed liquid,and if your theme had an entire section,that is called announcement bar then you,want to open that file within the,section folder and down at the bottom of,these section files you will find the so,called schema tag and within the schema,we define all the settings that are,available in the live customizer so we,will add our new settings to exactly,that schema tag so let's search for the,settings that are already available and,they should be somewhere at the bottom,so here we have the checkbox to show the,announcement bar and down below we have,the text or the input of type text to,announce something here so this is the,text that will be displayed right now,and you can see that all these control,elements consist of at least three,attributes so we have the type which is,checkbox in this case and an ID so

After seeing the second section, I believe you have a general understanding of Powerful Free Shipping Bar

Continue the next third section about Powerful Free Shipping Bar

WooCommerce Free Shipping Bar - Quick guide for new users

this video is a quick guide for,installing and using six features of,woocommerce free shipping bar plug-in,this is a five-star plug-ins on envato,market,it encourages the customers buy more,products to get free shipping,by watching this video you can learn how,to use it quickly,do not forget to subscribe our channel,to get the newest video from villa theme,number one how to install woocommerce,free shipping bar,go to dashboard plugins add new,then click on the upload plugin button,choose to upload zip file of woocommerce,free shipping bar from villa theme,author and click on install button,after plugin installed successfully,please activate,now the plugin is activated and you can,start configuring to use it number two,how to set up for display free shipping,bar,firstly you need to create a free,shipping zone on woocommerce setting to,the plug-in work with,go to woocommerce settings shipping,then add new shipping zone,enter zone name,choose zone regions which you want to,provide free shipping,add shipping method,edit free shipping method for a minimum,order amount which customers have to,reach it for free shipping,i entered 99 it means that a customer,needs to buy for a total 99,or over to get free shipping on their,order,now come back to woocommerce free,shipping bar general tab,enable the plugin and choose the zone,for free shipping,in design tab you can design the color,of background,text link for the free shipping bar,click on save button and check the,results,now your site has a free shipping bar on,the top to promote your customers buy,and buy more,when a customer reaches the minimum,amount to get free shipping bar,a congratulation message will be showed,number three how to set up for,displaying free shipping,icon,in woocommerce free shipping bar slash,design you can choose the icons for the,gift box,a custom icon or a truck icon,in effect tab enable the option show,gift box,when customers click on the truck icon,the free shipping bar will be appeared,number four how to set up for displaying,progress bar,go to design tab then enable the option,enable progress,you can design the colors font size,effect,styles positions for progress bar,let's see how progress bar displays,it looks like more attractive with,customers,progress bar also displays on cart page,and checkout page in order to stimulate,customer buy more to get free shipping,you can choose to show small progress,bar instead of big progress bar by,enabling small progress bar,choose the position for it,the small progress bar is displayed on,single product page,cart page and checkout page,number five how to show your own,messages,you can create your own messages on the,free shipping bar on your site,go to wcf shipping bar message tab,type the messages as you want,please note that keeping our short code,for displaying min amount,total amount cart amount,let's see,the messages are displayed as you want,on front end,number six how to use option detect ip,the plugin has an option for adding,d

After seeing the third section, I believe you have a general understanding of Powerful Free Shipping Bar

Continue the next fourth section about Powerful Free Shipping Bar

How to add free shipping bar on Shopify 🚚 Free Shipping Bar Shopify App ✅ Shopify Tutorial

hey dear welcome to in this tutorials,today i'm going to show you how to add,free shipping bar on your shopify online,store,so this tutorial will be very helpful,for you if you are beginner and started,your online business with shopify,so in this tutorials i am going to use,top popular shopify,free shipping bar app by hackstom,and it has almost 9,000 plus review and all the review,are very positive this app we can,use fully free on the basic plan,and in the premium plan we have to pay,monthly,9.99 per month so in the free plan,we will get fully customizable banner,display,at any desired position device targeting,face targeting option to add link to the,bar,emoji support on the bar and in the,premium plan we get all the basic plan,and unlimited action bar zero country,targeting,auto currency conversion bar background,images,or to schedule performance tracking so,now i'm going to show you how we can add,this,app on our online store and,add free shipping bar at the top,of my website,so i'm going to copy this title,of this app or name of the app then,going to log in my shopify online store,so here is my shopify admin panel,now going to click on the apps button,now going to click on the visit the,shopify app store,so on here i'm going to type the,app's name free shipping bar then click,on the,search icon,and here is the apps that we are wanted,to use,free shipping by hackstorm,we are going to click on the title of,this app,now going to click on the add a button,next click on the install app,so we have installed this app now,we can add our,bar from here so i'm going to click on,the add new bar,here the basic template and premium,template so we are going to use,basic template so i'm going to use this,one,everything is ready here,and we can select display position,from here add add,link include close button,and we can add currency,or change the currency from here here,they still configuration that we can,change from here text color special,color and background color,also we can manage font size,by preparing this player after,okay so now i'm going to click on the,save,bar has been created now going to,visit my website,wow here the free shipping bar,added and displaying here so thank you,for your time to watch this video,if you think this video is helpful for,you then click on the like button and,subscribe to my channel

After seeing the fourth section, I believe you have a general understanding of Powerful Free Shipping Bar

Continue the next fifth section about Powerful Free Shipping Bar

How to create a Free shipping bar with amount calculation on Shopify

hey everyone this,is coren from the speedicom team and,today we are going to see,how you can create a free shipping bar,that will calculate the amount left,before free shipping this is actually a,very cool tutorial because you will be,able to display,to your customers the amount left before,they can,benefit from your free shipping rules,before we begin,you should always make sure that you,duplicate your theme files,just in case you make any big mistakes,and you want to come back to your,original theme files,so for that you need to go to online,store themes,then click on actions and duplicate here,you can see i already,have a couple of copies so once you have,duplicated your theme files,come back to the tutorial by the way you,will find the tutorial link,in the description of the video and,first copy the css code,and while i'm copying please don't,forget to subscribe to the channel and,also check out all the other,cool free tutorials that we have added,and we plan to add a lot more,so once you've copied yourself the css,code,you need to go back to your theme files,click on actions and edit code,then you will have to find the assets,folder,and the theme.css file,actually this file may be named,differently depending on the,theme that you are using so if you don't,find theme.css please don't panic,for example here you can see that we,have given you a few,examples of what you can find in your,theme it's,maybe a theme that says that liquid,timber.scss.liquid also it's,scss or just css so it's pretty much the,same thing,then it can be default that css.liquid,or styles that scss that liquid,etc so if you're not sure which file you,should open,you can actually go back to your,theme.liquid file,and this is something you will find in,all the themes,and here you can open the search bar,with ctrl,f or command f and look for css,and here let's see,there you go you can see that for us,it's theme.css,so once you've found your file you will,go all the way down and you will paste,the code that you just copied and you,will click save,after that we will need the html code so,let's go back to the tutorial copy the,html code,and back once again on the code editor,and this time we'll have to find the,header.liquid file,this one is in the sections folder we,open the header that liquid,sometimes this kind of problem may occur,you just have to,refresh your page there you go and then,you will just paste your code at the,very beginning,of the file there you go and of course,always click on save all right so once,you've copied the html code as well,you will be able to already see the,shipping bar on top of your header,also please don't worry about the,british pump that you see,on my store it's just the default,currency on this store,and whatever the currency you have,yourself will be displayed on the,shipping bar,also if you want maybe i'll give you,just a quick tutorial on how you can,change the format of your prices so you,go to,general settings in your shopify,settings an

After seeing the fifth section, I believe you have a general understanding of Powerful Free Shipping Bar

Continue the next sixth section about Powerful Free Shipping Bar

How To Add Free Shipping Bar On Shopify Tutorial

in this video i'm going to show you how,to add shopify free shipping using apps,head to apps recommended apps shopify,app store,alternatively head directly to,apps.shopify.com,or search shopify app store,after doing that search free shipping,click on this one,i highly like to note that free shipping,is something not recommended for,worldwide usage if you are for example,having or supporting worldwide usage i,really don't suggest this,but yeah go ahead and choose any of,those that work for you for example i'm,just gonna search for free as i'm,looking for one that will actually be,used for this tutorial,this one looks good has a lot of reviews,we can even view the demo store right,here,and here it is,as you can see here is everything about,it it looks amazing looks cool,if we go ahead and say for example we,shop now as you can see here is free,shipping,for example choose this one,add two cards,and then we can,check out for example,it will show us the free shipping bar,now to add this app click on add app,in the top right corner click on install,app and now we will have these for,information to fill out,you guys get the idea i'm going to exit,this click install app,the app will automatically be installed,i believe that social proof is highly,one of the biggest ways to actually,convert more sales,so as i said,go here,choose your,category,head to this page i'm going to close,this as i don't want a notification and,as you can see you can have a lot of,tickets a lot of stuff that will,actually i believe pump your sore and,actually make you drive more sales you,can choose a badge to add as you can see,add for example a percentage,minus,and there's a lot a lot of option you,can even click on active you can book a,demo with the store hands-free,you can even unlock premium which has,even more and it's all only just nine,bucks per month,and yeah that's basically it,to have this,activated click activate on the top,bottom corner,as you can see it will be activated show,this badge on products that are sold 10,times at least in six months or you can,even have this set to be zero or one at,least,update it on the top bottom corner and,that's basically to access the settings,of your app head back to shopify,apps,and you'll find this right here and it's,going to open your app right here that's,basically it thanks for watching and,goodbye

After seeing the sixth section, I believe you have a general understanding of Powerful Free Shipping Bar

Continue the next seventh section about Powerful Free Shipping Bar

Free Shipping Progress Bar WooCommerce (Step by Step)

in this video i'll show you how to set,up a free shipping progress bar in,woocommerce in just a few simple steps,so without further ado let's get,straight into it okay so here we are on,our woocommerce store,and when we add a product to cart i've,already added one so when we click on,this um a slide card here here we can,see our shipping progress so it says,that currently i'm at 251 pounds away,from unlocking free shipping,okay and if we add more products or even,if we increase the quantity on this one,once it updates,you can see that we're one pound away,from free shipping so i'll just go ahead,and add,another product to cart,okay and here you can see it says,congratulations we've now unlocked,standard free shipping so this is a,great way to increase your order value,and encourage customers to ultimately,spend more with your store okay so if,you want to achieve a similar result the,first step is to head over to,wiisuite.com go ahead and download the,all-in-one checkout plugin for wiicomas,it's currently free and in beta mode,i'll leave the link in the description,below once you've done so let's head,back over to our dashboard okay so here,we are in our wordpress dashboard so,assuming you've downloaded the,all-in-one checkout plugin the second,step is to go ahead and upload that,plugin so you go plugins add me,go ahead and upload and install the,plugin once you've done so you'll see,this aio checkout menu here for all in,one checkout go ahead and click on this,okay so now the third step is to go,ahead and click on this mini card option,here to activate our free progress,shipping bar okay so first you want to,go ahead and enable this mini card,so we'll toggle this on and then here,you get to choose a position so you can,um display the mini card icon on the,bottom left or bottom right okay so i'm,going to go ahead and switch this to,right this time,and then here we have the option to,enable a free shipping progress bar so,as i said this is still in,beta mode everything is functional but,we've got um more exciting features to,add so we want to give you the ability,also as well to set up different rewards,um based on a user action so for example,you can say if a user buys um,over,five items they'll get free shipping if,they buy 10 items maybe they'll get a,free gift and so on,so,this progress bar will tie into that as,well but for now the only option is to,enable this free shipping bar and then,here we can go ahead and specify,our free shipping threshold,okay so i've set mine at 2 500 and in,here we've got,you can go ahead and customize the,message so this is the initial message,that the customer will see and then also,the message as well to let them know,that the need to spend x amount and then,also a congratulation message,okay so we just hit save changes,okay and that's it and now when we view,our store page we will have this free,shipping bar here so,if i go ahead and add another item to,your cart so i've already qualified free,shipping we can go

After seeing the seventh section, I believe you have a general understanding of Powerful Free Shipping Bar

Continue the next eighth section about Powerful Free Shipping Bar

Increase AOV Using A Dynamic Free Shipping Bar

hey everyone so in this video we're,going to cover how to increase the,average order value,um using dynamic free shipping bars now,we could be talking about a top bar or,an on-page unit,and i'll show you what that looks like,but really so first thing what's the,purpose of using the dynamic free,shipping bar um the purpose of it is,it's really a great unobtrusive way to,encourage customers to spend a little,bit more money so that you're upping,your average order value um it displays,to them the exact dollar amount that's,still needed to get that free shipping,so for them they're going to save on,shipping costs and for you,you're going to obviously increase that,average order value,you'll have to figure out what that,threshold is how much it needs to be,purchased before offering free shipping,for your specific site but once you,figure that out you're good to go and,and so what i'm going to do now is just,show you an example,of a client of ours and how they're,using it so you'll see here they have a,top bar,and they also have this is actually an,on-page unit this is the one that i'm,going to show you how to build,you can also do it as a top bar we have,clients who use the top bar so that as,they're clicking through the different,products and things they'll see if,they've added something to the cart,then it will show them how much more,they have and it's on a lot of pages,some clients think that's a little too,uh a little too much and so they go with,having it just on the cart page and then,on the checkout page as well and i'll,show you the checkout page because they,have the same unit on their checkout,page as well so in our system what it,will do is you're going to set the,threshold and then it will automatically,update based on the total amount that's,in the shopping cart,so,let's jump back into amp3 let me show,you how to build it so at this point you,should already have some things created,then you should have your site in there,if you this if you're just barely,getting started you're going to want to,watch our creating,creating the the different,campaigns video and walk you through all,these things you can go through,the onboarding videos,so what we're going to do is we're going,to click into our site and we're going,to add a placement so like i said we do,have templates for the top bar but we're,going to just specifically show you the,on-page unit here only thing we need to,do is,add the placement name and click on on,page we're going to leave both of these,off and then we're going to click on,next and go to the others what i'm going,to do is show you,the unit that has already been built,real quick so we'll click on edit so you,see on page shipping bar,those are both off,where do we want it to display the,defaults going to be show on all pages,so what because these are on page ad,units we're just going to show them on,selected pages so you can add urls here,contains,and then enter the part of the url that,it contains so for shopify we're going

After seeing the eighth section, I believe you have a general understanding of Powerful Free Shipping Bar

Continue the next ninth section about Powerful Free Shipping Bar

Shopify Dev: Update Free Shipping Bar without Page Reload

hi this is Yun from let's go choppy phi,and welcome back to the second part of,my free shipping bar tutorial where we,will have a look at the advanced,implementation so that the value for,someone to qualify for free shipping,it's updated whenever someone adds an,item to the card without the page having,to refresh and the same thing should,work on the cart page if someone adjusts,the quantity you can see the message,gets updated and it should be fun to,implement this so let's go alright so,starting this video I assume that you,have already seen part 1 of this,tutorial and just to quickly recap that,by now you should have this modified,announcement bar and you can display the,amount that someone needs to add in,order to unlock free shipping when you,add an item to the cart this value won't,get updated automatically and you need,to refresh the page so that it gets,updated and if you haven't seen part one,yet I highly recommend you go back and,watch that first so you can get a really,good understanding of what is going on,but otherwise if you're using the W,theme you could also go ahead and copy,and paste the content of our modified,header that liquid fire and you will,find that attached to the video,description,okay so that being said I can already,tell you that in this video we are going,to write some JavaScript code to,implement our update functionality and,therefore I want to give you a quick,overview on how the JavaScript is,structured within the W theme and you,will find the same pattern and many,other themes as well and I can simply,right click with my Chrome browser and,then go to inspect and switch to the,console and in here we can test and,debug JavaScript code but what I want to,show you right now is that our theme,fires attached an object that is called,theme to the window,and in that theme object we will find,all the theme elements that have to be,managed in some way by JavaScript and,just to name a few examples here we have,the mobile navigation or maybe the,search drawer or some videos if we have,videos on our page and all these,elements contain methods that help to,control them so for example we could use,the MDOT search drawer and in here we,will find a method that is called open,and this would simply bring up the,search bar and in the same way we have a,method that is called closed and this,would dismiss the search bar and in the,same way we are going to create a helper,function to update our shipping bar and,then we will simply call that every time,an input changes okay so now we can have,a look into the actual theme code and in,your theme files you will find a folder,called assets and this should contain,the theme j/s which should contain most,of the JavaScript for your theme and you,can already see the window dot theme,object which I just showed you on the,front-end and here it is set to a blank,object and then over time you will see,that all the other elements are added to,this object so we have the theme of,currency the draw th

Congratulation! You bave finally finished reading Powerful Free Shipping Bar and believe you bave enougb understending Powerful Free Shipping Bar

Come on and read the rest of the article!

I am a shopify merchant, I am opening several shopify stores. I use ppspy to find Shopify stores and track competitor stores. PPSPY really helped me a lot, I also subscribe to PPSPY's service, I hope more people can like PPSPY！ — Ecomvy