in this tutorial i'm going to show you,how to use the coming soon features of,the drop theme i will be working with,theme version 2.0 earlier versions of,the drop theme had slightly different,functionality because collection meta,fields did not exist yet so be sure you,are using version 2.0 or later when,following this tutorial,first step to using the coming soon,features on the drop theme is to set up,the proper meta fields,so from your shopify admin you're going,to go to settings,meta fields,and we're going to create two different,meta fields the first one is going to be,a product,level meta field so you're going to,click on products,add definition,we're going to name this launch,it's very important that the namespace,and key be exactly as it's shown here so,it should be my underscore fields dot,launch,this is used in the code of the theme,and so it's important that it's not,launched or launched date,it needs to be exactly as written here,and it needs to be launched,you can give this a description,like launch,date of product,and the content type is going to be date,and time,and then when you click that you're,going to choose date and time,now for the validation you want to leave,this blank do not put any restrictions,on the date,unless of course you are trying to,restrict the specific dates for your,employees but most circumstances there,shouldn't be any restrictions and this,just automatically fills in but do not,select a date,validation,so once that's set up it's,set to launch we're going to save that,and we're going to go back,and create one for collections so we're,going to click on collections,add definition,and this is also going to be launch,and again it needs to be my underscore,fields dot launch and that,is very important,so then description is going to be,launch,date for collection,and then we're going to select the date,and time,date and time and leave that blank we're,going to save that,so now we have a launch,meta field for products and a launch,meta field for collections,let's go through how to use the,countdown section so i have the,countdown selected,and these are the settings here on the,right hand side,so in this first example i'm going to go,through creating a collection countdown,so we have a collection that's going to,drop,or launch,soon and we want to promote it,so first when i click on select,collection you'll see i don't have the,collection created yet and i want to,actually create it with you so the first,thing i'm going to do i'm going to click,create collection,and we're going to do,i'm just going to name this coming soon,but this could be any collection you,could be having a new sneaker drop or a,clothing line is going to come out you,can name this whatever you'd like i'm,just going to do,coming soon for this,and then you would create the collection,just as you usually do i'm going to go,based on let's see,something easy here,i'll do based on vendor to add these,products,so i'm going to click save real quick,and that gives me two products which is,fine so these are two bibs,that i'm going to have coming soon,and so,you can see the metafield launch date,right here,and we're going to select the date this,collection is going to launch,so it needs to be a date in the future,as long as the date is in the future,from the minute that you're setting it,up then the countdown will start,if it's in the past then it's already,launched so this has to be a future date,so i'm going to go ahead and just choose,this saturday,and i'm going to click save,and so we have that collection set up,coming soon,and select so the way that the section,works is it's going to take the first,product,that's inside the collection you chose,and it will use the first two images of,that product,now the first product right now is this,red bib and the image is kind of small,if you look at the products you'll see,there's only one image so that's why,it's only showing one image here,and so if you want to you can actually,override the images selected in this the,section settings here under override,image 1 and override image 2. so i could,select different images here,in place of the one that was selected by,default,another option i could do i'm going to,go ahead and remove these is to go to,the collection in the admin,and i could change the order,of which product is showing first so i,can go to manually,and then change the order i'm also going,to change a setting here to show more,products in my coming soon collection so,i'm going to save this real quick,and now there's more,products in here as well,so i'm going to just move one of these,other products up,and then,go back to,our section so now it's using the first,product i've selected which is this,swaddle blanket and it's using the first,and second image of that,that product so i'm going to save my,changes so far,i'm going to scroll down i'm going to go,ahead and keep the images that are here,so i'm not going to use the override,images and move on to link text link,text will show up in the upper right,hand corner and it only shows up when,you select a link so this is if you want,to maybe,link to an outside page that describes,how the countdown works,that's what we have in here default but,you can change the wording of this text,so i could click on one of my pages,and then it would show the link here and,i can change the text here,let's just add a single question mark so,that will open up the page that i,selected here if you remove the link it,will remove it from,the section,next this is the during countdown,settings,so while it's in the countdown what will,it say so you could say collection drops,in or you could edit this to say,whatever you'd like collection you could,say collection launches,and then the button here you can edit,the text for this,to something else if you'd like,and then this is the heading down here,in the bottom right hand corner so the,new drop is almost here so you can also,edit that and by default this is going,to link to,the collection,url if if you had selected a product,it'll link to the product page,and then we're going to go down to the,after countdown,now once the countdown ends the text is,going to change and this is the text,that will be shown so you can change,this label to say,collection has dropped and then you can,say a message because a message will,appear here,and it will say,that it's completed so you can say,countdown complete the collection is,here you can edit the message that,reveals and then you can also edit the,button text so now it's time to shop,ready set shop,and then you can edit the heading this,says the new drop is finally here,and again that still links to the same,location,the section styles this is if you want,the section to be full width,and then the spacing is for the top and,bottom which is like all sections in the,drop theme,right now it's just set to bottom that,way that the section,is very first and it touches the,announcement bar,and so this is how we would set it up,for a coming soon collection,now i'm gonna change this and do it with,a product instead so i'm going to remove,the collection,and you can see here's that text again,this is what it looks like once the,collection,countdown is complete so you can see,that,so i'm going to select a product instead,so i want to actually find that,muslim swaddle blanket because i'm going,to use that as an example,and i'm going to select that now you can,see automatically it's already starting,to count down and that's because this,product,belongs inside of a collection that has,the launch date,here so by default it's going to look,and say okay is this in a collection,that's coming soon that has a that has a,launch meta field if so use that date to,start the countdown,now you can override that,countdown date if you wanted to on the,specific product and to do that we're,going to go to,the product,in a new tab,and if i scroll down i have a launch,date for the specific product as well,and if i select one here i'm going to,choose a date even farther in the future,save it,and sometimes when you save your meta,fields give it a few seconds it can be a,little slower to update i'm going to,save my changes here as well so you can,see now we're at 28 days away,so,instead of using the collection,countdown date or launch date it's using,the product launch date instead so you,can always override the collection,launch date with the product launch date,by applying it to the product,now if i didn't want that i could go,back to the product and remove the date,save my changes,and it will go back to using just the,collection launch date and i'm going to,give it a second to update,so i gave that a second to update and,now it's showing three days which is the,launch date set on the collection,so that's how you use the countdown for,a collection or product,now that we have our countdown set up,i'm going to have a look at our coming,soon collection,so this countdown in the template header,you will need to make sure that your,collection has a launch date and so if,you remember our coming soon collection,does and you'll see it does have a,launch date so this launch date on the,collection is going to be what shows in,the template header,and if you click on the template header,section and scroll to the bottom you'll,see a few,settings for collections,and one of them is show countdown and so,if you don't want the countdown to show,in the header you can also turn it off,with this setting,our coming soon collection here,has the launch date set and so any of,the products that exist in this,collection,when you're looking at the collection,page will have the notify me button it,also will show the coming soon label if,i go to one of the coming soon products,in the coming soon collection you'll see,that it shows the coming soon header,and it does not show the purchase form,and this is how it's set up by default,so we're going to go through how to,actually make changes to what the coming,soon header looks like so you're going,to click on coming soon and you can see,there's quite a few different blocks,that you can work with i'm going to go,ahead and take the countdown and move it,below the title,and if i click on title you'll see,there's one setting over here on the,right to show launch date so it's,showing right here the date that it's,going to launch i could hide that or i,can show it,next i'm going to click on description,right now it has a shortened description,it's showing just the first few,sentences it could be just a little,tidbit of your product information,and then,that's if you want to use the full,description down below or you can,unselect this and it'll show the whole,description it's including the bullet,points here as well,if i didn't want to show the description,at all i could either hide or remove,this block,next is the notify button,and,when you click on this it shows,we will email you as soon as this drops,and,it will notify,the merchant,that this customer wants to know when,this is going to drop,the next thing is the text pop-up so,this is right here this is the size,guide which creates a pop-up you could,have a table for sizes in there i'm,going to go ahead and click on that,you'll see you can change the label you,can change the content that shows or,choose content from a page and you can,use meta fields for all of these so this,is unique on a product level if you,don't need the pop-up you can go ahead,and remove the block,the next is an accordion title so this,creates these accordions for content,and so you can actually change the name,of the the title here um the content,that shows whether it's open by default,or you can use page content,instead of this content here and so you,can also remove this block if you don't,plan on using it,and then if we go to add block you can,re-add those back so we can do a text,pop-up or accordion content which we,just had and then the last one here is,just text so if you just want to have,basic text it can be meta field or you,can type it here,you can have that showing as well so,we're going to remove that for now and,i'm going to go back i'm going to put,the description,and then i'm going to leave it with just,these features here so i'm going to save,my changes,now if i click on this coming soon,collection you'll see that the settings,that belong in the section itself,have to do with the image gallery so,right now it's,i have the enable click to enlarge which,means this button here so i can click on,it and view the image in the enlarged,gallery and i have the option for,gallery size so i can reduce this to,medium and it will make it,half and half across the page,i'm going to go back to large,and then this also has section spacing,like all of the other sections in the,drop theme,so that's what the coming soon header,looks like now,there is a setting also inside purchase,form so i'm going to click on that,at the very top it says show on coming,soon products,so if you actually want to show the,purchase form on the coming soon,products you can select this,and it will show here and what it does,is it still doesn't allow the customer,to purchase the item,they still have to get notified when it,launches,but,it does have this additional gallery it,does show the price and then you also,have all of the other blocks that you,could possibly add to your your product,form like rating payment turns the,variance,everything else that would be on a,normal product there's lots of different,block options to select,and so the intention of this was more,let's say,you really want to have a lot of,sections on your product page so we,could,go ahead i'm going to move this down a,few so you could have your initial,coming soon header then this is the full,description and then maybe some further,details using the details list then,we've got our media gallery so you have,a lot of sections and by by now the,customer has scrolled quite a bit so if,they still want to be notified and see,the gallery again instead of having to,scroll all the way to the top this is a,great option to show the purchase form,farther down and so you have that option,and it's still going to have the notify,me form if you don't want to show the,purchase form at all you just go back to,that setting and,uncheck that,and so that's how you would set the,product page for a coming soon product,collection for the drop theme is a,normal grid layout,but the drop theme does come with an,alternative collection,template which is called the timeline,and we're going to talk about how to set,that up and use it so i'm going to go to,the the template picker,choose collections and timeline,now right now it's using the home page,collection to preview this so i'm going,to change that to my coming soon,collection for preview,and,then i can see my coming soon products,so in this i have a few options first,the timeline collection if it's a coming,soon product is automatically going to,show these countdowns over the top of,the images,and so it's kind of repetitive to have,the countdown in the header as well so,for this i'm going to go to the template,header,and i'm going to scroll down and remove,this show countdown,so then it's just the name of,our,timeline so this can be changed i'm,going to say,coming soon,drop or something along those lines,and you can also write a subheading if,you wanted to here,and,something along those lines so i'm going,to go ahead and save those,changes and if i scroll down you'll,notice that every single product has the,same launch date and that's because,these products are inside of the coming,soon collection,which,has the drop date of march 5th 2022,now the timeline works really well if,you are planning on having,different dates of things launching so,it's like it's called a timeline of a,picture of what's coming out and what,has already come out,and so if you want,to use this for different products that,have,different launch dates then this is how,you would set it up so i'm going to go,ahead and create a different collection,and i'm going to name this,drops,i'm gonna go ahead and save this,oh i gotta make some selections so let's,see what products i'm gonna put in here,i'm gonna go ahead and do,books let's do yeah let's do the books,and save that okay so here's the books,now in this scenario,i want this collection to show all of,these products,when they launched or if they haven't,launched yet when they're going to,launch and i don't want it to be set to,one date in the future these books are,going to launch different dates one,could want one could launch one week the,next week and so on and so i am not,going to apply the launch meta field on,the collection itself,i'm going to do it individually on the,products so i'm going to take this,first product here i'm going to open,that in a new tab,and i'm going to choose a launch date,for it so i'm going to choose a launch,date,in the future save that,and then this book is coming out the,week before that,and so i would go through and choose the,launch dates for each product,so i'm going to do the week before,and save those two,and going back to here i'm going to,preview,this,template with my new collection drops,so the first two products are going to,have a countdown,this one is for tomorrow and this one,launches in one week so it says here by,default it's dropping on march 9th and,this one is dropping on march 2nd,that has coming soon features is the,featured product section,so i'm going to go ahead and show you,how to use that so i'm going to click on,the featured product,and select a product,this swaddle blanket is a product that's,inside of my coming soon collection and,the coming student collection has a,launch date selected so that is why the,countdown has already begun it's going,to be available march 5th now if i,wanted to overwrite this date remember,you can do that by applying a date on,the actual product itself so i can apply,a launch date here,in the future,save that,and you can see now that the date is,farther in the future so it's using the,launch date on the product,so the key to remember is the launch,date that's on the product will always,override the launch date on the,collection,we can go ahead and remove this launch,date,save our changes,so i refreshed it and you can see that,now it's back to three days,now it's important to look at this,product,this product is in the coming soon,collection and this is how it's able to,get that launch date from the coming,soon collection
Congratulation! You bave finally finished reading how to put a "coming soon" message in shopify for each product and believe you bave enougb understending how to put a "coming soon" message in shopify for each product
Come on and read the rest of the article!