Hi guys, welcome to WebSense Pro, welcome to another Shopify how-to video and as you have
already seen the title of the video, I'm gonna show you guys how you can add a stylish looking
pricing plan on your Shopify store. Again, this feature is not available in the default theme,
free themes of Shopify but I'm gonna tell you a really cool way to add this completely free of
cost. All you have to do is just watch this complete video and make sure to subscribe this
channel because I have created a ton of tutorials related to Shopify UI enhancement,
the way where you can add a lot of features on your store completely for free,
so there's no harm in subscribing the channel, right? So make sure to hit that subscribe button
in order to get the more tutorials and enhance your Shopify store. So let me show you what I'm
gonna teach you guys in this video. So as you can see on my screen, I have this stylish looking
pricing plan and there's an option for yearly and monthly and we can also see that it's
animated on hover and similarly for the early version and it has this best value showing up
and you can change this badge text, you can change the badge color, you can change all of
the text here and it also has the compare plan feature. So if I click on compare plans,
you can see that you can add your plan name and add in these check items and compare the plans
you can add and all of these text, numbers, button color, all of that feature is changeable
from customize settings. So if I go to customize settings, this is my pricing table section which
I'm going to show you guys how you can add has this monthly plan option where you can see I
can change all of this text here, feature new, feature old, whatever you want to add in you
can add it here and you can also change the word page here, you can change the pricing here,
all of the stuff you can change on your own. You can also link the product so if you want to
make it clickable, you can simply click on the select product and it will be
linkable to that specific product and this is the option where you will select it as the popular or
recommended. If I enable that you can see I have this most popular badge showing up where I can
change the text. Cool right? So all of these feature you will be getting and very easy and
very simple to use. Also you can add three monthly plans and three yearly plans so here we have the
monthly plans and here we have the yearly plans. If I click on yearly and switch to yearly here
you will be able to see the early plans where I can change the pricing and all of the stuff can
be changed super simple just like the way I showed you in the monthly plan and here we have the
feature comparison row so you can add as much feature comparison rows as you want in order to
display this compare plan table which is going to show below that so all you have to do is just
click on this add block here and you will be able to add this feature comparison row and when I click
on that you will have this option to check mark it or cross it so if it's enabled it will show a
green color arrow and if it's disabled it's going to show a red color cross so if I add
feature test and click on save it's going to add additional row with the first item showing
red color cross item so if I open it up now hit refresh
and if I click on compare plans you can see that additional row has been added with the first
item as being red cross and last two items as in green draw we can also just disable it here and
show the red cross item if I click on save and hit refresh again click on compare plans you can
see that we have it here the cross item showing up and you also have a lot of color and styling
features as well in this section so if I click on this pricing table here you will have the option
to add in logo here so below choose your plan you'll be able to add the logo if I try to add
my company logo let's try adding that so I'm gonna add this one here click on done
and here you can see the logo has been added you can change the logo width and you can change the
logo width on mobile you can change the heading size to be small and large here is the section
heading you can sort of remove that section heading as well there's a subtitle you can remove
the subtitle as well if you want to or you can add in your own text here we have the option of
subtitle color so here we have the subtitle showing up and we have this alignment option as
well so if we change the alignment you can see that we have this alignment changing up here
and here we have the option of enable card shadow so if we disable that we will not be
seeing any shadow which looks a bit weird I'm gonna enable that and here we have all of the
coloring option which you can change adding option and this is for the popular plan badge
so that's the most popular badge we can change the color to red or whatever we want
popular badge color background color
you can see that how easy it is to customize you don't need to have any code knowledge at all it's
gonna work completely fine for you and you can see that compare plans button here we have the
option to change the compare plan and the hide plan button color and all of that kind of stuff
if we change it to blue you can see that it's been updated and you can also add in your own
custom css so if you feel there is any option missing and if you have a little bit of css
knowledge you can add in your custom css as well okay guys so you have seen how the pricing table
section is gonna work now i'm gonna show you guys how you can install it on your theme and let's
start implementing that i'm gonna install the fresh dawn theme and show you guys how you can
add this section before we proceed to adding this section i'm gonna show you this app which
we have created just for you guys this app is gonna add the feature of volume discount
on your shopify store so if you are looking to add in volume discount feature to increase your
shopify store sales make sure to try this app this app has seven day free trial so you can use it
completely for free for starting seven days you don't have to pay anything and if you feel that
it's helping you get more sales with the volume discount feature make sure to continue using that
and leave us a feedback cool link of this app will be in the description you can also search
it by big bulk discount okay now i am gonna proceed with this tutorial and in order to do so
i am going to install the fresh dawn theme so let's scroll down to the bottom here we have
dawn theme so it's already working on dawn 15.3.0 in this section but the reason why i'm
scrolling the fresh dawn theme is that i want to show you guys that it's going to work completely
fine if you stall it on the fresh without any code customization just the one which i am going to
tell you other than that you don't need any additional settings for that because in this
spec particular theme i have added a lot of customization and it's if you visit that theme
you can see
that we have this transparent header and we have this mega menu and we have this different type
of slider so all of these features which we are seeing currently on this theme is not available
in default on theme in the free version but if you subscribe this channel and watch my other videos
you will be able to add all of these features on your own without needing to have a developer
code right okay uh so let's install the fresh dawn theme click on add and it is being stalled
okay guys guys while this is being stalled if you are new to shopify and if you are new to this
channel there's a link in the description if you use that link you'll be able to sign up for your
new shopify store for just one dollar a month you don't have to pay default 29 30 dollar pricing
i think it's 30 dollar so you will be able to sign up to your shopify store for just one
dollars a month link in the description hurry up limited time off up okay guys our fresh dawn theme
has been added i'm gonna click on publish and then click on publish again
perfect our latest fresh dawn theme has been published i'm gonna click on three small dots
and then click on preview to see how it looks and that is how it looks perfect now let's
add this section for the pricing plan click on these three small dots and then click on edit code
by the way guys this section should also be working fine on paid team as well so if you're
using paid team and you don't have their feature on your theme make sure to use the section
completely free to use uh and the code which you will need to add is available on this link
so click on the link in the description this link is available no paywall for that just click on
the link and you will get this code so i am gonna go to code editor and then create a new section
file so i'm gonna click on this arrow for sections folder and here we have this add a new section
i'm going to name it pricing plan you can name it whatever you want the file name is irrelevant
here because that section file click on done after adding the file name and make sure to
remove all of the current code and copy the code from here click on copy code button and paste
the code after pasting the code just hit save and now i'm gonna open the theme customizer
click on these three small dots and then click on customize theme to open the customizer
so
and here we will add our new pricing plan section click on art section and search for pricing plan
and here you will see pricing table actually so just click on that and you will have your
pricing table showing up so that's how easy it is to add it i'm gonna hit save and then go to
home page and reload my url to view the section and here you go you can see that our section is
showing up these are the yearly pricing and these are the monthly pricing and here we have our
comparison table showing up and now let's check out in the mobile version to see if it works fine
click on inspect and
so check 75 version
and i will need to refresh i think because it's not properly loaded for some reason
so here i think we'll have to reload that view as close the preview
let's open it up again perfect now it's working fine on inspect element code
okay so here's our spec we are inspecting it on iphone 15 iphone 14 pro max and that's how
it's going to look like on iphone 14 pro if i scroll down you can see that these are the plans
these are the monthly plans and these are the this is the comparison table
which is movable and if we switch to yearly plan that's how it's going to look
on the mobile version looks cool right so that's it for the video guys let me know in the comments
below if you want me to add in more feature or if you want me to create new sections for you guys
would love to do that completely for free just let me know in the comments below
until next video have a great day