how to create a popup on shopify

hey what's up christian here and today,i'm going to show you how to do a smart,pop-up on your shopify site let's get,started,so i do want to start by saying that,some themes out there,do offer a,pop-up version of what we're going to,talk about today but i would say it's,the dumb version of a pop-up because you,don't have,the ability to customize the timing or,if you show the pop-up on certain pages,etc so,what we want to do is add an app that,will take over some of that stuff and,i'm going to also show you how to create,a cart abandonment pop-up so that when,the customer is leaving the checkout,page or the cart page the pop-up shows,up saying hey we can offer you a,discount don't leave us yet so it's a,little bit more proactive than again,shopify's built-in tools which allow you,to create a abandoned cart email so,whenever they fully exit of that they,actually get sent an email um with it,but this will be more intent based so if,they're about to leave they will,recognize it and it will show them a,pop-up right there so let's get started,by adding the app that we're talking,about which is sumo which we talked,about on several videos before,we're gonna click on customize your,store so we can go search for this app,we're gonna type in sumo,and it's gonna be the very first one,it's gonna see sumo boost conversion and,sales buy sumo with a little,white crown or it could be a paper boat,nobody knows,add the app,perfect now what we're going to do is,we're going to click on sign up and it,needs our store url so we're gonna grab,that from here,and copy that,paste it right there,our email address,um let's see let me create one because i,know we have a few accounts already,created so i don't want to mess this up,and i know we don't have one for my,so let's do this,sign up and it will actually make you uh,select a service but we don't have to do,that because i believe if you click on,that yeah it will just open which it did,already open up,the app store again so we've already,done that so what we want to do is copy,and paste the following before the,body tag of your html so we're going to,click on that,that means that we've copied it,to our store or our clipboard sorry,we're then we're going to go to online,store,and then,themes,we're gonna do actions edit code,now we're gonna go to the theme.liquid,and then in here what we can do actually,is click control or if you have a mac,command f,and then search for the closing body tag,which is going to be typically yeah it's,going to be right at the right at the,end i'm going to click enter enter,and then control or command paste that's,going to insert the sumo,code that we just grabbed we're going to,click on save,i'm going to go back here to sumo,and say start using sumo,and there we have it so,initially it's going to say like yeah we,created this,very simple and basic form to start,collecting emails right away,i'm going to click on,edit that particular one,so i can show you how the back end of,building the form or the pop-up works so,and this will be the same if you were to,click on forms right here at the top and,then click on create a new form right so,for this particular case we're going to,do collect email addresses,and then the form type,here's where you select a pop-up which i,would recommend to do a pop-up,um i would steer away from welcome mats,those are according to google this too,disruptive now before we move on i just,want to say welcome to everyone new my,name is christian pinyon one of the,co-founders here at bit branding we've,been helping frustrated store owners,since 2015 becoming impactful store,owners through tutorials tactics and,strategies and the one way that you can,support our channel is by hitting the,subscribe button and turning on,notifications so sumo will create an,automatic form it's very simple form so,we're going to click on edit on that one,just so you can see what it looks like,in the back end i'm going to go back to,step number one which is your goal,we're going to collect email addresses,that's what we want to do here,the form type,we want it to be a pop-up,you do have some other options for all,these so you can actually create,different things for for your website,depending on your needs,then the design,the current template right now is just,the default um,but they do have some other ones that,basically you have to pay for the pro,version to get all the other ones um,let's see if they have anything,yeah i believe all of them are locked,but that doesn't mean that you can't,necessarily make changes to this,particular form because you can actually,go in here,and as you can see you can actually make,this bigger,if you wanted to you can select,different layers and move them around,and you can actually add new things like,image background image,social buttons check box drop downs so,there's a lot of things that you can do,within this right here to actually,design it do keep in mind that this over,here on the left hand side changes based,on what you have clicked on so if you,click on this heading right here this,text this will give me,options to change that particular text,so it will give me options to change the,font the sizing text align etc so it's,pretty powerful as far as all the,changes that you can make to it,but again it might be a little bit of a,learning curve when you're going through,this the first time trying to figure out,okay where,where are the settings right so when you,click on it the settings on the left,hand side change we can go back over,here and we'll go back to the main,design template,now,once you've designed your your pop-up,how you want it or if you paid for the,pro sumo version you're able to use some,of the templates and that will give you,a starting point,to design better,better forms,then you want to click on the visibility,of the visibility you have two options,the smart mode which,will automatically take care,of when the time and place of showing,the form or you can do manual mode and,this is where i believe,shopify's capabilities sort of stop,even with the design actually you have a,very limited set of things that you can,do with the design so this is a little,bit more powerful when it comes to the,design and when it comes to the,visibility so,you can do things like the user leaves,so show before a user leaves your page,so it says if a visitor hasn't seen a,pop-up in one month,um then use you know whenever they leave,the the,with their,cursor then show that pop-up or you can,do timed so you can control exactly when,the pop-up appears so,you can say show the pop-up after five,seconds,if a visitor hasn't seen the pop-up in,one month,other rules in here you can display the,show or don't show on different pages so,you can actually control what pages this,pop-up shows up and we click on show,advanced settings,um you have a few toggles in here to,potentially show to users who have,already subscribed if you want to keep,showing the same pop-up to user whoever,subscribed but you don't want to do that,and then hide from users who's opted out,so if they didn't subscribe do we keep,showing the same thing over and over,maybe you can toggle that on so that you,don't keep bombarding them with,something that they don't want,let me click on next,um oh let me go back real quick the,design is very important that once you,design the subscribe one there's this,other one over here which is the success,one so don't lift leave this one blank,like this you want to make sure that you,make a little bit of changes to to this,one as well to match your branding or,whatever you created for the actual,subscribe pop-up so once they click on,subscribe now they will be taken to this,other one right here where they have to,click off,let's go back over here to success and,then in the success,sumo actually has the the the ability to,send the emails and send the automatic,email responders and all that stuff you,don't necessarily have to do any of this,stuff right here,if you already have a email service so,if you have an email service provider,like mailchimp,campaign monitor aweber etc,clavio is a very popular one with,shopify users,then you just connect it through that,app and then your third-party email,service will take care of sending the,emails and doing all that,all that stuff so once you're done,doing everything in here we can publish,that,now that is the sort of simple email,pop-up to just collect email addresses,from your store now i do want to remind,everyone if you're liking this video so,far make sure you hit that like button,we appreciate that now another thing,that you can do here within sumo and,pop-ups is to create an abandoned car,pop-up so in order to do that,you can't go for some reason you can't,do it through here to the forms we have,to go through monetize and then create,shortcuts,so we're going to create our new,shortcut and then in here you have,actually several options in here you can,do a grow email list you can reduce the,bank canada so that's the one that we're,going to do reduce cart abandonment,create this shortcut,and then in here the setup process is,going to look a little bit different but,it's going to be maybe a little bit,easier and less,cluttered than just creating the simple,form so on this one you have the ability,to um maybe,not edit it as much as the other one but,it still gives you exactly what you need,so if you want to offer a 10 off or a,free shipping or an actual dollar sign,amount,you can do that right here so free,shipping is actually pretty popular so,you can get free shipping on this order,right now which is very important and,very cool what they do here,so um i'm not gonna change any of the,settings in here i'm gonna click next,and then on the pop-up form the success,form right this will automatically give,them a very unique code just for them so,you don't have to worry about creating,new codes or having the same code and,then being online everywhere and people,using them this will actually create a,very,generic but at the same time unique code,for that particular person only which is,very very important,and it's very cool because they it,creates it right there on the spot so,that that person who just signed up or,subscribed to you they can use that for,that particular order it's not something,that they have to use in a future order,or anything like that so they can,actually click on that button and copy,it right there and this automatically,sends them an email with that,code as well,now if they don't see that right away,where they can actually copy that code,from there the smart bar,form,will show at the very top saying the,actual discount so they can it will,always be present when they're going,through the checkout process,and so you have the opportunity to also,change the email what the email says and,how it says it and who is it coming from,etc,and then you can also see the display,setting rules so,by default it's going to be on urls,containing car checkout or checkout and,if your store has something different,than that then you can add those,containing those words right that are,part of the url um right here on,this setting right here,click on next,and then here's where,it's already connected to our shopify,we're going to do oh we're going to do,our little bits treats,copy,and get rid of the https,confirm,all right so now we're actually,connected i'm going to click on next,then here's where you have the,opportunity to for this particular,cart and form uh connect your,email service provider in here we're,just going to leave sumo in there,now before i show you how this looks i,want to tell you about our free master,class training that will walk you,through the five pillars that must be in,place for your online store to scale,consistently and profitably no matter,what's going on in the world make sure,to check that link in the description,below,now that we have this turned on i want,to see how this looks so let's see if we,did everything correctly here let's go,to our store,and let's add,some dry bones,super tasty five bucks,can't beat that,and then let's click on view cart and,check out,i really want to make sure that this,works so right now this should work if,my cursor leaves the uh the actual page,so,let's see we're about to leave,no,that one didn't work let's go to,checkout,just to make sure and we may have to do,an incognito,um it could be it could be that smart,you know where it actually recognizes,that i'm logged into my own account,so,see there we have the word checkouts,okay let's let's go do an incognito so,this thing got a window,a,bits of treats,oops not the admin,all right so let's do the same thing,let's go to our bones,let's add that to cart,and let's try it on this page oh there,we go it is pretty smart so get free,shipping on this order right now enter,your email below so,let's just do let's use franklin's,that way franklin will get this email,i'll be like why am i getting some,discounts for dog bones,now you're not franklin,i'm gonna hit submit and there we go,click the button below to copy the,discount you can copy it right here and,continue to check out,i see the problem here we hit a little,snafu,um,we have to connect our domain so we,haven't done that yet but we will we,will so the code the way it works is uh,you have to have a custom domain in,order for this to kind of go through so,um since we don't have a custom domain,for a little bit streets website which,is pretty unfortunate because we should,just buy you know a domain make this a,real website um i'll be that will make,my heart very happy it will make piper's,heart very happy and harley's as well so,um either way let me see if i can get to,the checkout through here not through,the,um pop-up,okay now i do want to test this make,sure that the discount works i'm going,to paste that discount and hit apply,boom there you go discount free shipping,has been applied,all right so there you have it that's,how you create smart popups with sumo,installed on your shopify store don't,forget to leave a comment below if you,have any questions about what we talked,about today or if you have any ideas on,maybe creating different pop-ups and,different things like that i would love,to hear it and i would love to make,follow-ups to all the videos that i,create so again if you have any ideas or,any questions let me know down below,because all this content i'm creating is,for you guys and it's for your benefit,so please let me know we appreciate you,thank you,onto the next one,you

Congratulation! You bave finally finished reading how to create a popup on shopify and believe you bave enougb understending how to create a popup on shopify

Come on and read the rest of the article!