how to add newslator to a page shopify

Hello everyone welcome to Websense Pro I'm  your host Bilal Naseer as usual with a new  ,Shopify how-to video and in today's video  I will teach you guys how you can add a  ,pop-up to your Shopify store without using  any app yes you won't be using any app any  ,paid nor free app we'll be adding a pop-up  using custom code as you can see the pop-up  ,this is the pop-up that's how the pop-up  looks like and it will show up on load we  ,can add the time delay on this pop-up we  can have feature to add multiple entrance  ,animation in this pop-up and if you want  to learn stick to the video don't forget  ,to subscribe and comment so without further Ado  let's get into the back end of our Shopify store,okay guys so that's the freshly installed Dawn  theme and that's the back end of the Shopify  ,store I'm already logged in as you can see I  have recently added this Dawn theme and its  ,latest version which is 7.0.1 and if I refresh  there's no pop-up at the moment showing up okay  ,now in order to add the pop-up we will go and  edit the code click on these three small dots  ,and click on edit code before editing the  code please make sure to have a duplicate  ,in case you add a wrong code or add  the code on the wrong line numbers  ,you can easily revert your theme back to its  original state Okay now click on edit code,and first we will be adding our GS code  in global.js so that's the file where  ,we will be adding our JavaScript  code for uh the new slider pop-up  ,scroll down to the bottom and  now I'm gonna paste the code,so that's the JavaScript code  jQuery code which we'll be adding  ,to make sure that our pop-up run smoothly and  ,in this final line after adding the JS code this  line is for if you want your pop-up to show only  ,once per user you will mention it true for now  I'm adding it as false because I want you to  ,show you guys how the pop-up will look like so if  you make it false the pop-up will keep loading,  ,again and again, I'm going to discuss further  uh features of that jQuery pop-up in a while  ,after adding that into a theme okay now after  adding the GS code uh hit refresh sorry hit save,after saving the global.js file  navigate to your theme dot liquid  ,and include the jQuery CDN in order to  do that I'll just search for jQuery CDN  ,and in there you will find  releases.jquery.com from where you can add,jQuery okay let's click on minified  version and I'll just copy this,and paste it add it below head in your theme dot  liquid file okay now hit save after adding theme  ,dot liquid jQuery including code let's add in  some CSS world now navigate to base dot CSS file  ,and in that fire we will be adding our CSS  code for the pop-up so that's the CSS code  ,just copy the complete code and paste  it on the bottom of your CSS file,there we go now click on Save,and now lastly We'll add pop-up  code in our team load liquid file,it's not I'll be adding this code in our  theme dot liquid file we can add this code  ,below head on top of my file so I'll just add  below the jQuery code which we already added  ,now paste the code again don't worry about  the codes you will find all of the codes  ,in YouTube video description so I'll add  a blog post link where I'll add further  ,instructions on which line number you need to  copy and paste the code to okay now hit save,and after saving the file let's  go to our theme and hit refresh,here you go our pop-up is showing  up now let's just refresh again,and here you go pop-up is showing  up now if you go to the JS code,global.js I have these triggers attend page  triggers means that user will have to scroll  ,down to the bottom and scroll back up in order to  view the pop-up and onload is already implemented  ,implemented so if anyone comes in to your website  it will show this pop-up and on idle means that it  ,will take some time to load uh when the pop-up  shows it will have to scroll down to a certain  ,level and we have like several animations as well  we can display the pop-up in fading animation we  ,can display the pop-up and fly in right fly  in left and flying up animation so that's the  ,defined animation so what we're gonna do will  currently it's showing up as fate now I'm gonna  ,show you guys how it will look when I copy the fly  in line fly in down value and it paste this copy  ,this value and paste it under inverted commas  of Animation just like I did and hit refresh  ,sorry hit save and then go back to home page  and refresh okay after saving the GS file hit  ,refresh and you will see that animation is  updated as you can see it's coming from the  ,down similarly we can try other animation if you  want let's try one more which is fly in right,it's safe and then go back to  the home page and hit refresh,as you saw that the pop-up window came  from the right okay we have a few other  ,settings we can add delay currently it's  100 Ms we can increase it to 500 Ms or  ,whatever you want whatever is suitable for  you I already told you guys about the user  ,session thing so if you want to appear  this pop-up to display this pop-up only  ,once per user you'll have to go to the end  of this GS code and Define it here the true  ,if you mention it true it will show only once  now, for example, I did it true it's safe,now if I go back to my home page after saving  this file obviously it will not show me after once,once and now if I hit refresh again,as you can see the pop-up is not showing  up because we added a global session from  ,js code which is saved here pop-up shows right  application so if you open the inspect tools  ,and application we have this pop-up shown here  true we can delete this for now because I want  ,you to show I want to show you guys about this  pop-up okay now define false gain and hit save,okay hit refresh,there we go our pop-up is showing up again  that's it for the tutorial guys you will  ,find all of the codes in the YouTube video  description and you can add this customized  ,pop-up to your store without using any app  you can add images to this uh pop-up you can  ,I already added the newsletter form which is  same as the bottom here so it's the default on  ,them newsletter form which will add a customer  to your store I hope you guys liked it uh make  ,sure to subscribe the channel comment on the  video below until next video have a great day

Congratulation! You bave finally finished reading how to add newslator to a page shopify and believe you bave enougb understending how to add newslator to a page shopify

Come on and read the rest of the article!