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 what programming language does shopify use and believe you bave enougb understending what programming language does shopify use
Come on and read the rest of the article!