how to display an estimated delivery date - shopify

hi,everyone this is coren from speed ecom,and in this new video,we are going to see how you can display,the estimated delivery date on your,shopify product pages it's going to be,an estimation,which means that you have to pick a,specific range of days for the,calculation,then you will have something that will,look like this,you can see that on the last line we,have the delivery estimated dates,but i have also added additional,information that is interesting to have,of course you can pick to only display,the delivery dates,we will see about that in a bit in the,description of this video you will have,access to the link of the written,tutorial where you will find all the,different codes that we will be using,and before you begin i would suggest you,make a copy of your theme files,that way if you make any big mistakes,you can go back to the original files,all you have to do is just click on,actions and duplicate,once you've done that please click on,actions and then edit code,then you will have to find three,specific files that we will need,the first one is sim.css,the second one is theme.gs,and the third one is product,template that liquid,you should also know that depending on,the theme that you are using,the names of the files may be a bit,different for example if you don't find,the,product template you may find the,product that liquid,or if you don't have the theme.css you,may find the styles,that css or timber dot gs,you know it just depends on the themes,so be careful if you don't find it,you still have these files they just may,be,named differently so now that the three,files are opened you have to go back to,the written tutorial and find the first,code,we will begin with the css code that,helps you customize the display options,of the content,area and the colors of the text for,example here,you have the margins in between the,lines you can customize the color of the,text,you can customize the font size or you,can even customize the highlighted text,so all you have to do is copy the code,itself then go back to the theme.css,file go all the way to the bottom and,paste it,of course don't forget to save it next,up we have the javascript code that,helps you calculate the approximate,delivery date between a set amount of,days,here you can see that we have chosen 6,to 12 days,which means that it will calculate an,approximate delivery date within 1 to 2,weeks,so now you have to copy this new code go,back to your theme.gs file,and once again go all the way to the,bottom,and paste that last code,there you go you can pick any number of,days that you want here you can,put two to five days or five to fifteen,it doesn't matter it will calculate,automatically,the range of days that you will have,chosen and,lastly the third code that we will have,to copy is the html code,this is the code that includes the,content itself,so once you copy this the most important,part is going to be,choosing where you want to display the,content,specifically so you have to go to,product template,and you have to find the title for,example if you want to,add the content content below the title,you have to,research h1,here for example you can see on the line,137,you have the h1 which refers to the,title,and then you can add the line here,and paste the code once you paste it you,save it,and you go to your product page and you,refresh the product page,so we can see that we have done,everything correctly because the,estimated delivery date is,displayed the colors are correct,everything is perfect,but at the same time i'm not really sure,about the placement of the content,i'm thinking maybe it would be better to,place it just below the price,and for that you just have to go back to,the product template that liquid file,and change the placement of the code so,i'm going to delete this code,and i'm going to place it for example at,the line,below here let's see where it places it,save you refresh the page,and there you go if you would actually,prefer to only display the estimated,delivery dates without the free returns,and the only available line,you can do so because we have prepared,another code,for that you have to copy and paste this,second code instead of the first one,and lastly as i told you before you can,actually change the color of the text,for example let's say we want to change,the highlighted green text into red,because we have a red,price for that you have to go back to,the theme.css file,and change the color code of the very,last line,here you have this color code and let's,say,the red i think it's ff and four zero,then i click save i refresh my page and,there you go you can see that we have,changed the color,you can also change the icons if you,want for that you have to go,to the product template liquid file and,here you have the source,source links to the different icons,so you can pick any icon that you like,add it to your,shopify files and then just copy paste,the icon links,i think this tutorial is really useful,especially if you have very fast,delivery,so i really hope you like this video,please leave a like or a comment if you,want to see something specific,also don't forget to subscribe because,we are going to add,more than 50 different tutorials that,will be very useful,you

Congratulation! You bave finally finished reading how to display an estimated delivery date - shopify and believe you bave enougb understending how to display an estimated delivery date - shopify

Come on and read the rest of the article!