bonjour bonjour we are back all right,how to create a countdown timer on your,shopify store to create some urgency,just like this right here let's go to,the steps pretty easy so follow me,step number one is you're gonna go to,your online store right here once you,are on there make sure to number two,duplicate the theme you want to be,working on so there we go let's,duplicate this and we're gonna be,working on the duplicate that way if i,make a mistake in the code i don't mess,up my original code i can just remove,the duplicate and start from zero if you,work on your live theme and you make a,mistake you're screwed you have to call,me so,make sure you work on a duplicate,because if you call me it's going to be,expensive,um all right once the duplicate is,created right here you're going to click,actions,and then you're going to say we're going,to edit the code so welcome to the theme,editor,after that we're going to go to snippets,all the way down here,right there and we're going to say add a,new snippet i'm going to name my new,snippet countdown timer right there i,copy pasted it,there you go countdown dash timer write,it exactly like that don't change it,don't put a,space at the end don't put a,a capital c or anything just exactly,like this countdown timer and you create,the snippet so we're gonna be pasting,some code right here we're gonna do,command,v,and there we go and so you're going to,be pasting this entire block of code,now you don't have to pause the video,i'm going to tell you exactly where you,can get this code after at the end of,the video so you don't have to like,rewrite it i'm going to show you exactly,where you can get but in the meantime,can kind of put it wherever we want to,on our website,so this is where we come to the fork in,the road because you have two options,either you say hey i'm just going to put,this on all of my product pages that's,it that's all or you say hey i just want,to add this on specific product pages,not on all of my product pages so first,i'm going to address the one where it's,on all the product pages for that it's,pretty simple you're going to go to the,sections right here and you're going to,be looking for product dash template um,right here,boom,all right so this is your product page,template this is the code of your,product page and so now you decide where,you want that countdown timer to appear,and it's kind of up to you so i'm going,to give you another piece of code that,you can kind of paste wherever you want,to a certain extent you're going to have,to a b test it a bit if you're not,familiar with code,but let's say,i want it under the button so let's do,command f btn it's gonna look for the,button,here this is a button thumbnail slider,do we have another button,um,maybe if we look for the ads,here we go type submits name ads this is,the add to cart button right here that's,the entire code for the art add to cart,button so i'm going to put it right,i don't know the payments section,actually let me put it here,command paste,includes the countdown timer,now i want to change the date here let's,say 2022,and then i,even want to do a little bit of,commenting,countdown timer code starts,like that whenever you see something,gray it is just commented is not actual,code,that way when another dev walks in here,they understand what this is,up and we do some spacing spacings don't,matter in code so you can put as many,spaces as you want,there you go and we can save that,so now we're going to have our countdown,timer on all the templates don't believe,me let's take a look,we do actions we do preview,again this is not your live version,because we're working on a duplicate,special offer ends in 471 days 7 hours,and 19 minutes okay cool,but what if i don't want it on all of,the products no problem just follow me,along here first we'll remove,uh it from the product template so we go,to sections,my computer is having a hard time here,there we go it is still open on the,product template we find the countdown,timer,timer,no that's not what i want command f,timer,here,and i remove all of this,i save it,okay so now it is removed from all of,the product pages and so let's just add,it to one specific product page so we're,going to be adding a new section right,here click add a new section how are we,going to call it we're going to call it,product dash template dash,counts down,no caps no spaces in the back pretty,clear create the section,there we go we have a new section some,code that was pre-generated for us we're,going to remove all of this code because,we don't need it,and then we're going to go back to,product templates so the product,template section,right here,or,in my case the tab was still open i'm,going to command a,on mac to select everything or ctrl a i,believe on windows and then i'm going to,copy all of this code,copy,and i'm going to put it in our new,section that we have just created so,paste,all right so basically what we did is we,already had a product template that was,everywhere,the regular product template that you,use now we duplicated that product,template and we're going to add,the timer code in the second product,template and that way when you create a,new product you can choose which,template should it be,the product with without a timer which,is the old template or the new template,with a timer,show you how to do that but first in our,new product template well we got to put,our timer,so add that little timer snippet that we,had earlier,uh button this is our add to cart button,right here,so i think i put it here last time let's,put it back,again at the end of the video i will,tell you where to find all the code just,a moment please,and then we comments,uh,start timer,there you go,that way again if another dev walks in,here they know what they're looking at,make it a little bit prettier,there we go and then the end date of the,timer again let's do uh,november,26th because that's my birthday,2025. there you go,save great and there's just one little,thing left to do well two little things,left to do in case you want it on just,specific products is we got to add a new,template as well right here so add a new,template we're going to choose a product,template right here we're going to do a,liquid type and so we have to name it,obviously,we're going to name it product dash,countdown template we're going to create,that template,it was successfully created and then we,need to find one particular line in here,so we do command f on a mac control f,on a windows and we paste that specific,line,sections product template right here,it's highlighted in my case it's line,number five but it could be completely,different for you i just need that,specific line and we exchange it by,the referring to the new template that,we just built right here,so there we go,save,alright so now everything's working but,um you have to put your store,online live,to see this version so we go uh publish,try to do it when you're not too busy,not at a not on black friday that's what,i'm getting at,so okay our version is live now we go to,products and then we can assign,different products the black letter back,for example we're going to give the,black letter bag a countdown,we go to templates,right here product countdown template we,save it and we preview it and you're,going to see only the black leather bag,will have the countdown timer but if i,go to another,product like you see here but if i go to,another product you will not have the,countdown timer let's look at the yellow,wool jumper no countdown,timer and no count that time so i hope,that makes sense if you follow the link,down below you'll be on the ecom,expert's blog there you have all of the,codes that i just copy and pasted you,can just follow there again so it's,going to be really easy for you,everything is pretty straightforward at,this point have fun with your new,countdown timers and see you in the next,video ciao
Congratulation! You bave finally finished reading how to add a countdown on shopify and believe you bave enougb understending how to add a countdown on shopify
Come on and read the rest of the article!