showgun shopify

hey guys sam here from keycommerce.com,in this video you're going to learn how,to build product pages that convert more,of your customers using the shogun,landing page builder now most stores,just have a basic page that looks just,like this it has an image title,description and that's about it these,product pages are okay but if you're,like most store owners you're probably,getting a conversion rate of one to two,percent using this sort of page i'm,going to show you how to build what's,called a long form product page these,product pages don't just have this top,section here like a regular page they,have multiple sections going down the,page with crafted content that,skyrockets your conversion rate to 3 5,even 10,in some cases that i have seen they have,videos they have frequently asked,questions related products and then,reviews down the bottom to start,building our product page the first,thing we need to do is install the,shogun landing page builder app in your,shopify store go to the description of,this video you'll find a link you can go,and sign up right here click add app at,that link put in your shopify admin url,and install the app in your store,there's a seven day free trial and we'll,build our store right now during that,trial once you've installed the app log,into your dashboard and go to apps and,click on the shogun landing page builder,you'll see this dashboard click add page,go to product and then search for your,product name find your product and click,import to shogun when it asks you what,type of page configuration click,existing layouts and click create page,you'll now see this page here and this,is where we start building out the,sections of our page in this tutorial,right here we're going to be building,out this product page with all the,sections already planned because i'm,using another page as inspiration for,your own product page i recommend,following along building out this exact,template that i'm showing you right here,first and then at the end of the video,go through and edit the text and the,images and the video to match your own,product the first thing we need to do is,we're going to add in the first section,that's underneath the description for,our product what we're going to do is,grab the section element here and just,drag this in,we can actually delete this element here,this is from the old description from,the original page it's okay to delete,that we're going to add a new one in,later now with our new section we're,going to add in tabs so find the tabs,over here and just drag that in it's,going to create this little element here,and we're going to have three different,tabs let's create them now one two three,and i'm going to name these the,different names of the tabs that are,going to be there so the first one is,going to be description,next one's going to be good for,last one's going to be specs see it's,created these three different tabs here,that we can actually add other elements,to right here and we can actually add in,our text boxes so scroll down and find,the text element and drag that in for,the first one now i'm going to pull in,the actual description that i've already,written you're going to do the same for,your page too so i'm just going to paste,it right in there it is you're going to,have your own description in there as,well i'm going to go to good for and do,the exact same thing i'm going to add in,some text i'm going to paste in my own,text as well you can have this you might,not even want to have that good for but,this is good to show the benefits,basically or what people can use the,product for the specs that's just going,to be a list of all the specifications,for your product you probably have this,already you can also write it yourself,too awesome that's all we need to do,there the next thing we're going to do,is add in some sections with icons down,below so to do this we need to scroll up,and go to columns,and drag this in and make sure it's,dragged in below make sure you don't put,it inside this but you put it down below,we're then going to drag this all the,way across so it's just a small little,section over here and i'm going to go,down and find the icon element and then,add that in there i'm going to change,this to,the envelope,because i'm making this icon about fast,and free shipping,i'm then going to go and find a heading,and add that in here to this section,here i'm going to change the text here,to fast and free us shipping you can add,in any sort of benefits here that you,want to put and it's going to show up,underneath the description for your,product i'm going to make this a h3 i'm,going to make sure it's left aligned i'm,going to change the line height,to 2.5 and i'm going to add a margin to,the left so click on styles up here,scroll down to margins,turn off the little link button the,little chain button and change the,margin left to 20 pixels that moves this,across and gives it a bit of space,awesome now that we have this built,we're now going to be able to select the,columns so make sure you're selecting,columns that says columns here and then,click the duplicate button this saves us,a lot of time so now we can just edit,this one directly i'm going to change,this to a bed let me change the text to,100,night,happiness,guarantee,awesome that's fantastic now once i,finish each section i usually like to,click save,and if it's not a live page as in you're,not editing your live products click,publish otherwise you can select this,eye button and preview the page now when,you preview the page it's not going to,show you exactly what it's going to look,like this is the downside of doing this,but if you make it live click publish,when you click here and click view live,page it's going to show you the actual,product page and you can see now we've,got this section down here below that we,just created and we've also got these,icons here too which is what we exactly,just created just now you can see now,that this is actually a live page on my,website now keep this in mind as you,build this page you may want to just,keep it as a draft until you've got it,built out like i show you in this video,and then click publish once it's fully,finished let's create the next section,for the next section just pull in the,section element make sure you select the,very bottom,paste that in now we want to edit some,parts of this section change it to full,width change the minimum height to 500,pixels and go to styles and change the,margin top,to just 50 pixels i made sure to just,unselect this button here so it only,changes the margin at the top now i'm,going to go back and i want to actually,add a background image so i'm going to,click pick image under background image,i'm going to find an image that i want,to use for this section here so i'm,going to select this image here you can,see it's now created this full section,here with a background image of the bed,which is going to be really really,awesome for my product next thing i want,to do is add in a text box drag this in,right in the middle there now let's go,and style this we want to make the,minimum height 50 pixels,the max width i want this to be 40,make sure you change this to percent,here i want to add a margin of 100,pixels to the top and bottom and then,for the margin right and left i want to,change this to auto it's now centered,the text in the middle this is going to,look much much better i'm going to,scroll down and go the padding and,change this to 20 pixels on all sides,keep that checked so it adjusts it for,all sides i'm also going to go down to,the background color and change this to,white so you can just drag this all the,way up to so it says ffff and then,change the a to 70 which makes it,transparent so see we can kind of see,the background in the back this is a,nice stylish look and it looks very,professional i really like it okay now,we have our text box now here you can,actually add any text you want any sort,of benefits that you want to see let's,look at our actual finished page so we,say fall asleep stay asleep drown out,the outside noise and let your mind rest,with a snooze sound cocoon really really,cool now to make it look like this,you're just editing this text box for,example fall asleep stay asleep,fall asleep stay asleep now you're going,to use,these settings here to actually edit,this so you can just change this,to a heading 2,center it change the size to 36 and then,change the color,to black,boom,see right there i've made it look just,like this there it is,it's a bit different because of the,screen width but the actual font is the,same and then adding in the text down,below i'm going to change this to a,paragraph as well change this down to 16,pixels,i'm going to center that,awesome that looks fantastic i'm going,to click save and publish,let's now check in and see how our page,looks,awesome so that's what it looks like,right there that looks fantastic looking,really really nice let's move on to the,next section we're now going to add a,section like this with these benefits,stacked in three different rows let's,build the first section first we're,going to drag in a new section,underneath that one we're going to make,it full width and go to styles and,change the top margin to 20 pixels we're,then going to go and add in some columns,we're going to change the max width of,these columns to be 1200 pixels we're,then going to go to style and change the,margin right and left to be auto see,that centers these columns in the middle,and we're going to scroll down and,change the padding for all sides to be,30 pixels,now let's add in the content so i'm,going to pull in a header over here and,some text and then an image on the right,hand side cool let's now edit this so,i'm going to change the text this is,text that i prepared earlier peaceful,white noise from a real fan and then i'm,just gonna paste in my own text you're,gonna have to write this text yourself,for your own product but you can copy,this similar sort of design,change my image i'm gonna pull in an,image from earlier,cool that looks fantastic and make sure,that this text here is left aligned it's,just going to look a lot better and i'm,going to add in a margin at the top of,this of 10 pixels just to space it out a,bit from that top heading,cool,that's looking really good now what we,can do is actually duplicate this,section two times so now we have these,extra sections here we can change the,content now just like on this design,here this middle one actually has the,image on the left hand side that's very,easy we can just drag this image by,selecting this little handle at the top,same with the content here and just,swapping the sides now we just go in and,change out the image and the text with,what we actually want to have in these,following sections,fantastic now we have these three,sections here let's save and publish and,see how it looks,beautiful that looks really really nice,let's keep going with the next section,we're now going to add in the video,section so let's pull in a new section,element here put that down below change,this to full width max width of 1200,pixels go to styles change the margins,left and right to auto and we want to,add a padding to the top and bottom of,50 pixels now we just want to find the,video element here drag that in,and if you have your own video here you,can just paste in the link upload it to,youtube as unlisted and then paste in,the link here you can also use vimeo,here's our video here make sure to,deselect related videos from other,channels we don't want to show other,channels when the video finishes we want,to keep the people on this page,fantastic okay let's keep building the,next section that's a very simple,section we're now going to build the,frequently asked questions this uses a,heading and some accordions right here,i'm going to walk you through how to,build that exactly in this bit here just,add in a new section below similar to,the previous section make it full width,max width 1200 pixels,change the margins right and left to be,auto and then adding padding to the top,and bottom of 50 pixels we're going to,add a heading frequently asked questions,let's type that in now,and i'm going to add a margin to the,bottom of just 20 pixels that creates,some space below before our accordion,let me go back to the elements and just,drag in the accordion right below so,we're going to have to make some edits,to this accordion let's change the,controls here to change the size to 22,pixels,center the text change the heading,padding to 14 pixels it's gonna look a,lot better and then i like to change the,heading text color to black so just drag,that down and go to black it just looks,a lot better there we go of course you,can change this to fit your own brand,but if you want to make it look just,like my page here that i'm creating this,copy of the snooze page you can just,follow what i'm doing here cool now go,back,and go to text and just drag this in,underneath the accordion awesome we have,that there what i like to do as well,right now so we can see that this is,actually working but we need to go and,create these new accordions so i'm going,to create a new pane i've got five,different panels here and now i'm going,to go in and actually change the heading,of each panel,cool now here's a helpful tip is instead,of having to drag in and change the text,here every single time i'm actually,going to drag it out of here,and then,add in my text and i'm also going to add,in some padding,just 20 pixels,on each side,for the text and see it creates a nice,little space around it just looks a lot,nicer now that i've done that i can go,and clone another four of these,and this saves me a lot of time having,to go and create that padding all over,again it's not a big deal but i always,like to save some time so i'm going to,open all these up and then just drop in,that text for each one,awesome and the last one here,now that i've done that i'm going to go,through and edit the text for each one,just to make sure it's all properly done,okay that's looking really really good,as i said before you're going to have to,prepare a lot of this stuff yourself,because you're not going to make a,product page for this exact product,you're going to make it for your own,product so you should have a list of,frequently asked questions already made,ready to go and just paste them in just,like i did just now awesome let's now,create the next section which is going,to be the related products section right,here i'm going to create a new section,drag this in just like the previous,sections i'm going to make it full width,1200 pixel max width go to styles make,the margin right and left auto and then,make the padding on the top of the,bottom 50 pixels,i'm going to add a heading and you can,say related products but you can also,say something like you may also like,make sure you have a margin at the,bottom of 20 pixels remove that linking,button just to give some space now we,add in a collection so go here on the,the content scroll down to shopify there,it is pull in the collection,now you need to go to the collection,section of your shopify dashboard and,create a new collection you can call it,something like related products and then,just manually add in the other products,that you want to show,for this product here i've already done,this previously so i'm going to type in,related products pulls it up confirm and,it's going to pull in three different,products right here now it pulls in the,product images which is really really,cool but i also want to have the title,of the product the price and an add to,cart button just in case they want to,also add that to cart so i'm going to,drag in product title i'm going to pull,in product price and add to cart button,we're going to go style these and then,we're going to clone them over for the,other two products okay change the,heading to h2,just fits nicer and then add a margin on,the top and bottom of 5 pixels,fantastic for the product price i'm,going to center that and add a margin,top and bottom of 5 pixels,for the add to cart button i just want,to add a margin top and bottom of 10,pixels,fantastic and you'll see it,automatically pulls in the product tile,the price and the add to cart button for,that exact product we can now clone,these,and then drag it over to the other,products,fantastic that section is now created we,can now keep working on the next section,which is going to be the reviews section,this is what it's going to look like so,i've already installed stamp.io here i,have some other videos on how to install,this software it's fantastic it adds in,images it's a great way to show social,proof on your website this is actually,added automatically to the pages if you,follow my tutorial on how to do that we,still need to add in this title here so,that's what i'm going to do right now so,i'm going to go in add a new section,drag that down below make sure this is,full width,1200 pixels,margins auto,and padding on the top and bottom of 50,pixels i'm just going to add a heading,type in,see why people love snooze you can,change anything like even testimonials,or what customers are saying you can say,anything you want matching your brand,voice that's now done i'm going to click,save and publish,let's now take a look at our page the,desktop version we just created so there,we have the description looking really,nice with the icons this full width,section with a big benefit there some,more benefits down here created looking,nice got the product video,frequently asked questions,related products and they've got the,reviews heading with the reviews,underneath the problem with this page is,that if i view this on mobile like if i,click inspect here,click this button,and then view this on mobile there's a,few different problems here firstly this,isn't center aligned this looks really,really weird we're gonna have to fix,that and there's two images in a row,here that looks a bit weird so we're,gonna have to fix that so now let's go,back to our page and let's work through,these together the first thing we need,to fix is this being centered on mobile,now shogun makes it really really easy,for you to change the mobile view,compared to the actual desktop view so i,can even click this mobile view and see,we can see here that the problem is here,these are not center aligned so i click,on this element here the heading and,what i can do over here is i can,actually click this button here,click mobile and now i can create an,edit that only applies if someone is,viewing the page on mobile so if i click,this,the same for this one change it to,mobile,that's now only going to show centered,when they're on mobile so there we have,it there it's still on the side,and now on mobile it's centered now what,about this section here so the problem,here is that this text box here has a 40,max width and when you're on a small,screen that means it can only show up as,40 of that total width so we're just,going to click this button here,view the mobile edit and change this to,90,boom look it looks so much nicer now and,if i view this on desktop it looks good,looks good on mobile too now the next,section we need to change is this,benefits section here i don't like how,this is left aligned and rather that be,in the center and these two images here,that kind of looks a bit weird the good,thing is sugar makes this really easy we,can just click this just like we did,before change the mobile view and then,make this center aligned let's do that,for all the headings,clicked it there we go,save for this one here,now to fix this section here what's,happening is because this section here,has text image image text it just flows,in that order so we just have to change,the order of that row to fix this we're,going to select the middle column here,and over here change this to right first,so you see it just flips it around but,only on mobile so now we go to desktop,it looks the same but mobile it looks,nice there's a text you know the heading,text image heading text image heading,text image this just looks a lot more,professional now let's view what this,actually looks like click save,click publish,let's now take a look at the mobile,version of the page so see if everything,has been fixed,okay awesome that's centered on mobile,that's looking really really good now,so this is centered now and they're,stacking really really nicely now that,those things have been fixed this page,is basically ready to show to the world,you can start running google shopping,campaigns to this page so that's a full,step-by-step walkthrough on how to build,a really awesome product page using the,shogun landing page builder like i said,before get this landing page builder,check out the description i'll put a,link to this page builder you can go and,get it installed on your store there's a,seven day free trial i love this builder,i use it for a lot of different stores i,highly recommend it makes it super easy,to make awesome long-form product pages,like this one if you haven't checked out,our product page mastery course,this video is a part of that course this,is the last video in the course that,ties everything together i recommend,going and checking out that free course,100 free a lot of really valuable,information in there guys go and check,it out hope to see on the inside take,care i'll see you next time bye,uh

Congratulation! You bave finally finished reading showgun shopify and believe you bave enougb understending showgun shopify

Come on and read the rest of the article!