where to put free shipping text on shopify

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 that,we can uniquely identify this control,element in the code and we will have a,label so here it says show announcement,bar and it comes with a lot of other,translations and I think we can simply,add our new settings down at the bottom,so after this last color picker so let,me zoom in a little bit so you may read,this better,and then we will start by adding a comma,and a pair of curly brackets,and now we have to define the three,attributes that I just mentioned before,so we will start with the type which,will be checkbox,so this would be to enable or disable,the free shipping bar so we can put the,labor,let's say a neighbor re-shipping bar,Varla,again and then we have to set the ID and,I think we can set it to let's say is,underscore free shipping bar,then one more comma and let's set the,default value who files,and then no comma at the end because,otherwise it would expect another,attribute,and I think we can quickly save that,so want you to note that I prefixed this,variable name with is so that it already,indicates what value lies behind it,because for the question is this the,free shipping bar that can only be the,answer yes or no or let's say true or,false and developer terms and this will,help to make the code easier to read and,easier to understand or any future,developer including myself because if I,have to check back on this in a few,weeks I won't remember every detail but,this will help me to get back on track,very fast okay next we can add the text,field to promote the free shipping offer,and the text field when someone unlocks,the free shipping offer so let's add,another set of curly brackets,the type will be 'text this time,and then we also have to assign an ID,and a label,and now let's copy this template let's,add a comma right here and then we can,simply paste it because these two,elements will both be of type text and,therefore they will be very similar and,now the first one gets the idea let's,say remote free shipping text,and the second one can get the idea,let's say,unlocked free shipping text,and for the labor we can simply add,let's say message to promote free,shipping,and here the message for unlocked free,shipping,let's save these two as well because,then we can see if we didn't make any,mistakes because otherwise it would,throw an error and now we can add our,last control element which will be the,slider to select the free shipping,threshold so let's add one more pair of,curly brackets,and this time the type will be a range,element,and we can set the idea to let's say,free shipping threshold,and I think the labor can be pretty,similar let's do,free shipping,and whenever we use a range element we,have to define a few more attributes and,these are the minimum value for the,slider I think right now we can just add,0 and the maximum should be 200,and the step size should be five right,now and I think you can divide this,interval into a hundred steps so you,have to choose an appropriate step size,and what I also want you to note is that,I don't wrap these values in two quotes,because these are integer values and not,text values,can add the unit which will be hero in,my case,and the last thing is a default value,and let's set it to 50 and then save,this as well,and as it is saved so no arrows and now,we can check back on the customizer okay,so after a refresh on the front-end we,should now see our new customizer,settings in the header section and down,at the bottom we have this checkbox to,enable the free shipping bar and the two,text fields for our new inputs and even,the slider with the threshoid for free,shipping and step size 5 so this is,working perfect and I already prepared,these two messages just to save your,time so I would simply copy and paste,them but even if I check this show,announcement bar checkbox and have the,free shipping bar enabled we won't see,any of these values on the front end and,this makes sense because right now we,just edit these settings to the,customizer but we didn't use the values,anywhere so let's work on this okay so,back in the theme files we will now try,to find the place where the theme,renders the default announcement bar and,we know that the text input for this,announcement bar was a little bit above,our new settings so it's right here type,text and ID message text so we can,simply search for this variable message,text and see where to put out and it's,pretty much at the top of this file,within that paragraph and now we try to,understand what happens around this text,output so we can see that if the section,settings message link is blank then they,output this container and the paragraph,in between and otherwise so if someone,defined a clickable link in the,customizer settings then they output,this container and the paragraph in,between so what we can simply do now is,move to the top and add another if,statement so if and we will check all,the checkbox that enables the free,shipping bar so if section dot settings,that is free shipping bar,and remember this value can either be,true or false then we want to output our,own custom markup,and otherwise so if the free shipping,bar is not enabled then we simply want,to output what is already there and then,we have to terminate the if statement at,the bottom,let's do end if,and now we can work on implementing our,custom markup so let's start by,assigning all the variables that we will,need but we can also quickly indent this,so we know it's in between the if,statement and I think we will need four,different variables,so the first one will be the promote,text let's do a sign remote txt and this,should be equal to whatever the user has,entered into the customizer let's do,section settings dot remote free,shipping txt,and we will also apply an escape filter,on that value just in case the user has,entered some weird characters that might,break the HTML markup,then with the escape filter these,characters will be replaced,the next thing we need is the unlock,message,so this was unlocked,re shipping txt,and we also want to escape this value,see these other IDs that we defined down,in the scheme attack,and the next thing we want to get is the,value from the threshold slider,you,and we will multiply this value by a,hundred we can type x 100 and we do this,because when we later get the current,cart value top if I will return it in,cents,we can simply calculate the value that,is left,I having the threshold,and then subtracting the cart total,price,let's try to save it,and now we can output the announcement,bar,therefore I will copy the implementation,or the container from the default,implementation,announcement bar and then we have to,close it down below one,and in between I want to output the text,in a paragraph but now I don't want to,put out the default message so we can,delete this and I will wrap this in a,conditional statement so if the,threshold value has been reached we want,to put out the unlock message and if it,hasn't been reached yet we still want to,show the promote message so if the value,that is left is less for equal to zero,I'd put a paragraph,and if it's not less or equal to 0.so,else,something different and down below I,will terminate this statement,and in between I will now simply copy,this paragraph,so now I have one paragraph if the value,is less or equal to zero and one,if it isn't and I don't want to output,the default announcement text anymore,but instead I want to output our new,variables the unlocked text,or text,and now we should save this and test it,on the front end,and as a reload as paid right now we can,see our custom message for the first,time so this is already working and now,let me add a few items to the card so,let's do 1 2 & 3,and once I reload this page you can now,see the first problem because this value,is still static and it's not showing the,difference between the current card,amount and the threshold so this is the,next thing we can address but for now,let's add more items to the card so that,we can qualify for free shipping and now,once I reload the page or visit any,other page in the store we should see,the updated message which tells us that,we unlocked free shipping but this is,also working on page reload and we will,improve on that in the advanced,implementation but if your theme doesn't,use an AJAX card so this life,up-up right here then the page will,always refresh whenever you add or,remove an item from the card anyways you,can decide if this is beneficial to you,or not alright so as I just said we can,now address the issue that this value is,still hard-coded 250 euros and not,displaying the actual difference and,therefore we go back to the customizer,settings and instead of these hard-coded,50 hero,we will now just simply say add another,and then we will need some kind of,dynamic placeholder so we can simply,type value into some brackets and now we,will go ahead and within the theme files,we can search and replace this value,placeholder with the actual difference,so let's jump back to our implementation,and right here we defined or calculated,the value that is left to qualify for,free shipping in cents and now we will,drop to a new line and assign a new,variable we will call it value left,and then money,and it was simply equal to the value,left but we will apply a money filter on,this and this will make the amount match,to the money formatting of your store,and then down below in the promote,message we now want to replace our value,filter or our value placeholder better,to say,and we want to replace it with our new,variable which has value left money,let's save it,back on the front end,and now you can see that I don't have,any items in the cart right now and once,I add the first one and then refresh the,page you can see that this jumps to 40,euros and if I add another two and then,maybe visit the cart page this jumps to,20 euros so you can see that our dynamic,placeholder is replaced with the actual,amount so we are done with the basic,implementation of this free shipping bar,and it took me a little bit longer to,explain than I expected so I think it,will be better to do a separate video on,the advanced implementation on the other,hand I think it's very important to,explain everything in detail so you,really understand what is going on and,you can build your skills from there and,for all the people that are interested,in the second part I will promise to,upload it later tomorrow so that you can,finish the project if you have questions,regarding the first part you can always,ask them down in the comment section and,I will respond to every single comment I,get and as always I hope you learned,something new and found some value in,this video and if you haven't already,you can subscribe to the channel so you,don't miss out on future content then I,hope to see you in the next video bye

Congratulation! You bave finally finished reading where to put free shipping text on shopify and believe you bave enougb understending where to put free shipping text on shopify

Come on and read the rest of the article!