Shogun Shopify Page Builder: Developer Crash Course

[Music] welcome back guys in this video I'm gonna show you how to leverage the popular Shopify page building app called Shogun Shogun is a no code or minimal code solution for clients to easily create and customize pages on their website it's a drag-and-drop page builder that they can use to create layouts and pages themselves without having to enlist a developer but as you'll learn in this video we can actually use our skills as a developer to extend the capabilities of Shogun and use things like custom classes so we can insert custom CSS into elements and also create our own custom elements so in this video what we're gonna do is we're gonna start with the basics we're gonna start with why merchants might want to use Shogun then we're gonna show how it works from the clients or merchants perspective and then we're going to cover how we as developers can fully leverage this powerful page building tool first up let's talk about why merchants might want to use Shogun to demonstrate why merchants might want to use Shogun let's have a look at the alternative which is to use the inbuilt customizer of your Shopify theme I'm currently on the themes page underneath the online store sales channel and as you can see I've got my list of themes here lots of experimentation going on on this particular shop Chris's testing shop but you can click customize on any of these themes and it'll take you to the customizer this should be something you're quite familiar with if you've been doing Shopify for quite a while while working with Shopify you can customize the look and feel of different pages by using this sidebar and the selector right here to change what page you're editing so I can go into the product page and here are the list of available options in order for me to customize the product page in here you've got overall theme settings which in theory effect multiple areas of the site or just don't make sense to put into a particular page section now the issue with this or I guess the trade-off is that it's not drag-and-drop I only have the options available to me what's in here maybe I want to change the layout of how this page looks and there's not currently an option in the customizer and I mean I as a developer I actually like the customizer better it's a lot more solid in the sense that there are less scenarios to test for and therefore it's going to be more robust but the issue is from the clients perspective and that could be that they don't have as much control over their layout as they would like and that is where Shogun comes in so Shogun is an app and like all apps in shove-off I we access them through the apps menu of our admin as you can see I've already got Shogun page builder installed but if you haven't got it installed you can click this button here to visit the App Store and then it's just a simple matter of searching for the app and then clicking add app there you go I'm not gonna click that button because I've already got the app installed once it is installed you can click on the link for Shogun page builder and then once the app loads you're taken to this page where you can start creating pages so I'm gonna do that right now I'm going to click this button for create page click on let's do a standard page for our first page and instead of loading a template let's just start with a blank page I'm gonna call this page landing page and instead of the landing page style which removes your header and footer I'm just going to include the header and footer let's hit create page and our page is now going to be created in draft mode all right so how Shogun works is it's your your typical page building tool it's drag and drop so you have spaces on the page and you have elements over here that you can literally drag and drop to build your layout obviously you want to build your layout in a way that makes sense so you want to use your knowledge as a web developer or designer to build a website that makes sense and functions on every screen size what I mean by that is doing stuff like for instance if we have a first section here let's drag the section on and inside what I'm gonna do is drag another section which is going to be our container if you've been doing web design of development for a while you should know what a container is if not you will see very shortly so a container is going to contain the contents of the page so that it doesn't extend the full-width on large screen sizes so a number I like to use here is 1200 because that is the wide screen size in Shogun which we'll see in just a second and what I'm going to do so that this centers in the page is going to right and left margins and now you can see our container is in the middle by looking at these dotted or dashed lines one thing I like to do which is not compulsory but I think is going to be very helpful to you is to go over to this layout tab this layout tab is a godsend when you have complex layouts because sometimes it's not clear what the nesting is or that there are basically two sections here and right now I'm clicking around and I can only select this blue section and they're both called section so it's very important at least for me to go into this layout and start to rename these sections so for this one the container I'm going to call it container and this I'm gonna call section one to differentiate it from any other section now you can see I click on that I get the container and if I want to access the parent section maybe to put in a background image I can by clicking on that and then now I have this section on the outside which is pretty impossible to click this is one of the issues with Shogun once you start to build complex layouts the drag-and-drop functionality starts to kind of break down a little bit which is why this layout tab is very important for selecting individual blocks that you bring in all right so what I'm gonna do I just need to make one more change to the container so that it works on mobile screen sizes we're going to go down here and click on this inside our margins and this allows us to affect the margins on different screen sizes so on everything other than wide desktop strains I'm going to set the left and right margin to 20 and by default it's going to copy whatever you put in right and left into vice-versa if you don't want it to link you can set that and then you can have freeform but we do actually want be margin on the left and right to be the same so I'm going to go through and make sure that it's only Auto on the desktop and everywhere else when it gets real tight it's gonna be left and right padding of 20 as you can see with these dashed lines all right let's bring in some content now maybe this is gonna be like a hero section and so we can try and click on how section 1 and give this a background image I've got this picture here of Singapore already loaded up and what we're going to want to do is set a minimum height otherwise it's certainly gonna be as tall as the minimum height we set so I'm gonna set 400 for that and as you can see now we've got some separation between the overall section and the container here now what we can do is drag in some content into our container and we do that by clicking dragging and as you can see there's these lines if I put it there it's gonna appear outside the section as you can see here that's not what we want so we can drag it here we can put it above the container that's not what we want Eva what we want to do is have it inside the container so I'm gonna call this page heading and I'm gonna change the text color to white actually that's not that much better contrast isn't perfect but let's just go with it for now then I can drag some text into the container as well I believe that's in the container yep text is in the container and with Shogun you have this rich text editor so if you want things like a different font size or centered text you end up doing it here rather than in your sidebar let me make it 20 and just say subtext grab all of that Center it all right so now I've got a very basic section that we've built in Shogun what I'm gonna do is click 'save up here and that's going to make sure that US changes aren't lost but right now we haven't actually published it to this landing page so what we're gonna do is we're gonna click preview and Shogun's going to generate a preview for us so there you go we've got our hero section here and if we reduce the width of the screen we can see that once it goes below 120 well maybe it's not particularly obvious but the container is moving with us actually to make that a bit more obvious what I'm gonna do is align this to the left so this is gonna be on the left of the container just so you can see what the edge of the container is let's preview the page again and as you can see it's in a 1200 pixel wide container and then when we bring it down under 1200 the margin is fixed to 20 but then when we're on bigger screen sizes it centers nicely in the center of the screen so that's a good practice to have whether you're building Shogun pages or building them normally and I feel like with Shogun the most underrated tab is this layout tab here and so that's basically how it works you can drag and drop bits of content in and you basically create a structure we can also create a two-column section here so actually I'm going to follow my convention and bring in a section I'm gonna rename this straightaway because I don't want to get confused section two and let's bring in actually let's bring in another section and do the container again so max width 1200 and then we set the margins for the different screen sizes so on desktop it's going to be Auto and then for everything else 20 cool I'm gonna rename this section to be container and as you can see we've got a more logical layout when we do this it's more clear that we've got we've got our section one inside we've got a container and in that container we've got heading and text for section two we've got a container and soon we're gonna bring in some columns into that container and then we can drag in like an image on one side I've got this image of me here in Brisbane and maybe another heading let's make this one h2 and welcome to my website I think there needs to be a bit of margin here so I'm going to create some margin between the sections by going into styles there we go hit save on that let's preview the page and there you have it you can see here that because we've got two containers set up and they both have the same max width imagine that the content here is gonna line up with this image and if we actually right align this content to the other side of the container it would line up with this as well so let's have a look at what this would look like on smaller screen sizes by going into responsive mode and on iPhone X you can see that it'll start to stack on lower screen sizes there you go on tablets looking okay and yeah you can kind of see now how you can go about building layouts in Shogun it's not completely foolproof you still need to make good design choices but essentially a person who is a good designer but doesn't know code could come in and do all this right so that's a standard page a standard page meaning that it's basically static content we're not customizing something that brings in a lot of dynamic content from our store like a product page but that also is an available option in Shogun so let's have a look at that quickly let's right-click on the Shogun logo and click open a new tab and this time when the page loads I'm going to click create page again but instead of standard page I'm gonna click product pages it wants us to choose a specific product so I'm going to go for awesome sneakers and it's going to ask us do we want to use a custom layout or an existing layout both work quite differently so I'm going to click existing layout first and let's see how that works as you can see we've got our standard debut theme and there's not actually much we can edit we can click on this box here but we can't actually edit it we can't actually edit and drag and drop here what we can do is place an element above this section so maybe we want to put a banner in there we can place an element below or we can place an element in this text block now the reason why we can't actually effect here is because this is all dynamic content that comes from the template so this right here is just coming from the description of the product and so we can shove whatever we want of Shogun's code in there and it'll render and if we want to put some content outside of that template code we can do so as well using a shoguns specific layout but essentially you're limited to what you can do here you can't have full control over the product page again we'll see how this looks from the back-end perspective in just a sec so let me cancel out of that it's going to warn me that I haven't saved and I'm gonna open up Shogun again as you can see has actually created the draft page so let me just delete that one let me hit create page product page again find that product and this time let's choose custom layout let's hit create page and here you can see we have got full customization we've got a blank page and right here we've got something called a product box with the product box we can drag in some of this dynamic content into here and the product box as you can see determines what the actual product is so if we bring in something like a product title the title of the product will automatically come through because the product box which is nested within already knows what the product we're looking at is so what we can do is use some of the layout elements as well as the dynamic elements to build our product page so we can drag the product image into the left here and we can drag stuff like the variant selector the price the quantity so all the stuff we need to actually create a working product page and of course the Add to Cart button we can all drag and drop that in as dynamic elements and because we've got this parent container of a product box with the actual product dialed in all of these are gonna be pulling from this particular product all right so if we hit save on that and we preview the page you can now see that we've created a fully custom product page using Shogun which definitely needs a lot of work but the principle still applies that we are totally changing our product template using Shogun so the question you might be asking yourself or you should be asking yourself is how does this actually work with the existing Shopify theme architecture because if you understand how theme development works which I've covered in previous videos you'll know that there are templates for each of the different page types and the code within those templates including the schemas make up what goes on the page so if Shogun is changing our pages how is that actually working so let's take an actual look at what Shogun is doing here you can see for the landing page at least we are using the handle pages slash landing page three fun to hit publish on this page now if we go to view live page we can see pages slash landing page three okay so obviously we're still using the pages template but if I actually go into the store and let's have a look at the page in our admin here we go landing page 3 you can see here that all the Shogun content is being loaded into this content box of our page in the admin if we click on show HTML you can see there's a whole bunch of Shogun code in there basically Shogun hijacks our content property here and throws in everything it needs to display the page and then it uses this alternative page suffix page Shogun default and that's what allows it to basically use the existing template but simply insert its content wherever on your template you insert the page content with products it works a little bit differently so if I go into products up here and let's find awesome sneakers if we scroll down right now we've got the standard product template suffix so if I look at this awesome sneakers in the browser you can see we've got our old product page that's because we haven't actually published our modified version using Shogun so let's do that right now so this page was the landing page yep this word is our product page let's hit publish and see what happens ok so the page is published let's view the live page and you can see that this product unlike the other products is now going to be using this Shogun layout so if we go back to the product in the admin and we scroll down to the template suffix you can see here that we're now using products again custom which is basically taking the product object and feeding it into a custom set up by Shogun let's have a look at that right now let's go into edit code and let's find that template which was product Shogun dot custom liquid as you can see here is an auto-generated file by Shogun it doesn't make sense to edit these Shogun templates directly because they are overwritten by Shogun when you hit publish so don't actually go in and do that but here you can see this product Shogun custom liquid it's a completely custom template but what it's doing is still bringing in that product and as we saw before going back to here the product in this instance is awesome sneakers limited edition so that's something a little extra for people who have an understanding of the theme architecture of Shopify and want to understand how this is actually working with the existing theme architecture in the case that we were doing the page before where it wasn't completely custom so let me go back and delete this page I'll then go back create our product page again but this time I will use the existing layout if we hit create page and we go down to this editable section right here which is now looking like a text block if we maybe add in a separator and then under the separator we add in another text block just maybe copy the text in this one Larr MIPS and there we go it doesn't MIT doesn't really matter what the text is we hit save on that we hit publish on that once it says the page is published we can go back to our awesome sneakers limited edition page let's now have a look at the template suffix it's back to product indicating that it's using the existing layout that we've set up in our theme but in our description this is where the content has been inserted by Shogun so if I click on show HTML we can see here that this is all Shogun HTML so just like we saw if the landing page what it does is it puts the Shogun content into this description field but on the flip side if you create a completely custom product layout what its gonna do is completely switch out the template and just use the product object okay so that's what is happening from a tech perspective behind the scenes and so you can understand how Shopify Shogun is plugging in to your existing theme architecture all right so that's basically how we can create no code custom layouts in our Shopify store using show garden page builder the problem is when we get to a point where we want to customize a little bit further and we actually want to use some of our developer knowledge and skills to make further customizations well in Shogun there are a few ways we can do that and that's what we're going to cover in the next few sections in this section we're gonna learn how to customize the look of existing Shogun elements using CSS classes what I'm gonna do is click create page click standard page and instead of starting with a blank page what I'm gonna do is scroll down and use any one of these templates I like this one and what this is going to give us after we create a name I'm gonna say learning page four so I don't conflict with the others let's create that page and as you can see we have got a page full of elements lots of nesting lots of different layouts and different elements like tabs we've got hero sections we've got four column layouts two column layouts and if you want to see how it's all structured you can always go to the Layout tab in your sidebar and have a look around they haven't actually named the sections differently which I'd highly recommend this is gonna get a bit confusing if you're making your own layouts but that's just a side note I've already spoken about that what we're talking about in this section is customizing elements and if I click on this tab element for example there's plenty of options to add you know another tab but your options are kind of limited right so you've got the options here in controls and then your styles are limited to basically min height max width text alignment margins padding's background box shadow and toggling display on different screen sizes the only way we can actually add our own custom CSS is by this single field here which is to add a CSS class we can't actually add our own CSS rules in here but that's cool what we can do is create custom classes that we will then use to override the styling of these elements so in this case with these tabs elements maybe I want the tabs to not have that border radius on the top there actually hover and show at the same time but you can see when I move my mouse you can see that the top just above the tab with the hash one has these curved edges maybe I want them to not be curved edges which means border-radius zero there's no actual option here to change that so what we're going to do is create an override class now I like to use a convention here where I use Shogun override and then the name of the element but you can literally write whatever you want in the CSS class I just find this is very clear what this is doing and if I have to use importance so the exclamation mark important it's definitely gonna make sense that I am overriding existing styles it's just a way I like to keep my CSS organized before we actually create a class on that what we're going to do is duplicate our theme so I've already done it here what I recommend you do is to go into actions duplicate theme and make all your theme changes there so now from this point on we're going to be editing the code in this theme and previewing that so if I scroll down the hallway and then we'll get down to the bottom where we can start to put in an override classes so this is the theme dot s CSS liquid file if it didn't show up by default you can go into assets folder here and click on theme CSS dot liquid all right this is where we can change the CSS of our theme I'm going to copy this separator comment here and change that to Shogun overrides and now within Shogun overrides I'm going to put in my override for this particular tab section now what you're going to need to do is if you've got a preview theme that isn't the currently live theme just gonna hit save on this then what you're going to have to do is we publish your page because if you click here to preview the page before you hit publish your preview is always going to be generated using the currently live theme and the same goes for what you see in your editor this is always going to use the currently live theme so if you're familiar with proper theme development practices you should always duplicate the theme you're working on if you're going to make code changes so in order for us to see this with the CSS changes we're going to need to publish and then make sure that we're looking at the published page through our preview theme so if I click view live page after publishing you can see we are previewing debut which is the currently live theme what we want to do is keep that URL in mind but go back here to our theme preview this theme specifically and then once we've got confirmation that we're on the correct preview theme then we can paste back in that URL and any changes we make to the style sheet for this preview theme will apply to this page okay so let's go in using our dev tools and inspect this element right so if we scroll up we should see that CSS class somewhere right here we see Shogun override tabs okay so if I want to affect this tab right here the active tab I'm gonna have to dig into Shogun tab box let's have a look and see if this is the correct one if I go in here into my dev tools change the border radius to zero we get the square look right it's only affecting this one right now okay so what we're going to do is have to create a CSS rule that goes from here the parents where we have the CSS class and digs into this tab box so let's work our way through the structure starting with our class Shogun override tabs then let's dig into this ul with the class of Shogun tabs Shogun rounded which may actually be the class that's giving it that rounded border then let's move into the list element and let's target it through the two classes Shogun tab and Shogun tab active now obviously this is quite specific but you will find yourself having to be quite specific when you're overriding styles in Shogun and sometimes they might be set with a hash like this so an ID which means they're set very specifically so you might have to use importance you might have to get very specific using a lot of nesting but as you can see here we still haven't got there there's just one more actually than I need to go to and that's Shogun tab box and now you can see that the border radius if we toggle it off you can see that it's rounded and then if we toggle this on you can see that no matter which tab is active it will have the hard edge rather than the soft edge that it had before okay so if we want that change to be permanent we can grab that and copy and paste it into our style sheet hit save on that once that's saved we can refresh the page and we should start to see that our tabs look the same because that style is now coming through from our style sheet so if we have a look just to double check we can see there is our rule there with the border radius of zero all right so probably not the most practical example like how many times you're going to want to change the border radius of a tab but probably a more practical example would be to customize the button look because maybe you have a specific style guide or theme and it's got a specific type of button then you want to keep that consistent so what we can do is similar process let's go to a button maybe this one here under banner title too let's go over to styles scroll down to where we can put in the custom CSS class and I'm gonna put in Shogun override button I'm gonna hit save on that and then hit publish I know it's annoying having to click the button twice but that's what we have to do and once the page is published let's go in and follow a similar process to customizing our button let's right-click on the element and check that it has got the class and this is something to note with buttons in Shogun buttons are made up of a parent div with the a tag within it so if I try and change like the color of the button from this parent tag it's not going to work that's why we need to actually target the a tag from within this div all right so let's do that let's start a new CSS rule let's do Shogun override button and then we put a space and an a to target the a that's inside and the first change I'm gonna make because it's all capital letters maybe we don't want that maybe we would rather have it as lowercase so there you go now we've changed it to be lowercase alright everything that has Shogun override button is now going to have a lowercase title all right now maybe I want to invert the button so let's change the background color to white the border color and with a border to a 1px solid black and the font color to black as you can see none of these changes are taking effect and that's likely because we are not being specific enough and they're not able to override the existing style so sometimes or often times when you're overriding styles in Shogun you're going to need to put important in front so there you go if I want to keep that style what I can do is copy that right into here like we did before hit save and when we refresh the page you'll see that that change has now persisted so any button that we put the class of what was it again Shogun override button I believe yep any button that we put that class on will take on those features so this is pretty cool if I wanted to create a new button I could drag in another button here and then I would go down add that same class to get that similar styling looks like this button is different to the button here that is styled within this template but we should start to see the text be lowercase and the button background to be white and all that when we publish so if we hit save and then publish and then look at the page let's refresh the page and as you can see here the button style is a little bit different because there were some settings on the button that we hadn't set but you can see that it is all lowercase and that before we hover over it it's got this white background with a black border so what we might want to do is so that we don't have to recreate this button every time or duplicate it is we might want to create a custom snippet so this is I think very handy once you've done a lot of customizations to a particular element maybe it's a combination of using the available options within Shogun and using a override CSS class but what we can basically do is take this button and click this little ribbon here to create a snippet and what I'm gonna do is call this custom button I'm gonna click confirm and now what I can do is go to the saves column which we haven't been to yet and inside I've got my custom button which has got all the exact same styles of this because that's where I saved the snippet from so if I pull that in we'll get the exact same button although I have to make sure it's inside the particular container alongside its sibling there all right if I hit save on that just to prove that it is looking right on the front end let's refresh the page and you can see we've got the same button style duplicated okay so you can do this with any elements you can go through customize whip CSS any of the elements within Shogun and then package it with the Styles you want and then you can save the snippet and then you've got your different customized elements here in your saved column this of course doesn't give you access to any of the HTML though so if you want to be able to change the HTML of some of these elements or you just want more full control that is going to require you to use what's called a custom element and that is actually one of the most exciting features of Shogun for developers is the custom element and that's exactly what we're going to cover in the next section custom elements in Shogun are a way for you to build your own element from scratch and then be able to drag and drop in that element into the Shogun page builder you can think of custom elements kind of like Shogun's equivalent to Shopify sections if we take a look at a Shopify section by heading into our theme code and going to a section within our sections folder here let's have a look at the header actually let's have a look at the hero section because that's what we're going to be building you can see if we scroll down we've got a schema which defines the options that'll show up in the user interface and then we use the value set via that user interface to affect the code so as you can see here we're taking settings from the section object so this is the way we would create customizable sections using Shopify without Shogun but the way to do it in Shogun is by using a custom element which is kind of like a less fully featured version of this so let's have a look at how we would create a custom element I'm gonna go back into the Shogun page builder app and if you remember from landing page 3 we created this hero section which will show up in just a sec this hero section right here just using three basic elements well four and so we've got the section we've got another section within that is our container and then heading and text so perhaps this isn't the best case study because we are able to create something pretty good using just the elements that come with Shogun but let's think in a hypothetical situation here that actually comes up more often than not that you might want to create something with a custom HTML structure or perhaps you want to limit the options available over here maybe you've got some custom styles and if the settings are played around with too much is going to look a bit wrong with your custom styles that you set up in the CSS well if we want to create our own section we can do so using a custom element and have full control over the HTML CSS and even JavaScript so let's go to here to go back to our Shogun app and I'll show you where we can create a custom element we just need to go over here to the Advanced tab and we click here for new custom element there are three tabs one is liquid one is CSS and one is JavaScript so we can write CSS rules that will be inserted into the page wherever this custom element is and we can write some JavaScript that will go into the page wherever this element is inserted so they'll all get put together and put wherever we put this custom element let's give this a name and let's call this hero section and now what's interesting with the liquid section here we can set our own liquid variables here but there is no schema like there isn't a Shopify section what Shogun actually does is it scans the file here for anything that looks like a liquid variable what it does is it pauses that and it'll show up on the right here so let's just start building and you'll see exactly what I'm talking about so let me set up a hero section div and then inside that hero section I'm going to create an inner container for the heading and text just like we had before and then for the heading this is where I'm going to load in the first part of dynamic content so I'm just going to call this heading now you can see just before there was this loading bar and it said pausing so it basically has read this variable off of what I've written here and it's put it over here so what we need to do is just check the type is correct and the position of where we edit it is correct so we can either set it to inline or we can edit it from our sidebar let's just edit it from our sidebar and in our list of available types plain text makes the most sense as you can see here there's a bunch of options there's not as many options as a Shopify schema so for instance we can't do a drop-down list as one of our input options which is unfortunate but that is some of the limitations within Shogun the next variable I'm gonna do is a paragraph tag with some subtext and if we were to have a space in between we'll get a parse error we have to actually have no spaces so what we can do is something like this with an underscore if we look over here plain text that's cool actually what I might do is instead of having it defined as a pea or a pea tag I'm going to make this a div and then change the input type or the value type to rich text and what that's going to do is when we're editing that is going to be inline and it's also going to have all those options we saw before with the changing the font size the font color and the text alignment among others okay what we can also do within this template is use conditionals so if then statements so we can actually throw in some extra liquid here and say if heading the capital is not blank then we'll render this h1 element to the page if the elements or the the user puts in a blank value then the h1 won't even show up on the page which is a good way to do it that way you don't have a blank h1 there just filling up space with any of its margins and padding let's do that again for the subtext so ago if sub not blank and again if you've never programmed you know sections or done any liquid before this is gonna be probably a little bit outside your comfort zone the previous video on this YouTube channel is all about liquids so you might want to take that one before you get stuck into custom elements and if you understand how sections work with the schemas I think this will won't be too much of a stretch of figuring out this actually works it's basically just a dumbed down version of liquid or a limited version of liquid where you don't set these variables you just put them into your code and then they get passed so yeah definitely if this is confusing you recommend you watch my Shopify liquid tutorial but if you're following along fine let's click Save on this section or on this custom element and before we write the CSS I want to actually create a page and bring it in so I like to open up Shogun in a new tab in this instance because we are going to make some more edits to this custom element let's go and create a new page that is just going to be a blank page that is going to hold this particular element so let's call it landing so we don't actually have to do the - landing page 5 there we go let's include the themes header and footer create the page and now what we can do is scroll down in our sidebar in the build tab and you can see custom here we have the hero section so let's drag that directly onto our page and as you can see here we've got the heading value in the sidebar and we've got the text in here and if we actually go in here because we've set it as a rich text type we can have access to the rich text editor so I'm going to call that subtext and now I'm going to put in the heading just heading right so these two variables are the ones we set here remember so if I hit save on that and I believe we can just preview the page because we don't need to use anything unique to our preview theme and if I inspect this you can see it's the exact same structure that we set up we've got the heading and we've got the div with all the styles that the rich text editor will throw in there ok so obviously this is not looking great fix this up with some styling so I'm going to put some classes on these so hero section this is the B II M convention by the way if you're wondering what the double underscores are and then here for the text so I'm going to make sure the hero section heading is text aligned Center and then for the container we also have to set that up as well so let's do that up here I'm going to do it just like we did before in the first little section of this tutorial 1200 pixels with a margin left and right of auto so that it'll Center in the page and then I'm going to throw in my media query 768 and we'll do actually not 768 1200 and then we'll set the margins specifically margin left 20 margin right 20 pixels cool so that should be oh whoops we need to actually target the container I forgot that and put that in here sweet okay so that should be all good for the container and we've got the hero section heading centered let's hit save on that and one important thing to note whenever you save a custom element we need to make sure that this is bringing in the latest so we ever need to refresh the page so that we're bringing in the modifications or we need to hit publish again if we've already published so as you can see the changes are coming through now and if we hit preview page you can see we've got the heading that is centered and we've got this container which you can't actually see the air yet of unless you look here in the inspector of 1200 pixels so another thing to note is you know this is looking quite nice now because I've set it in the middle but I can actually align left and aligned right with this subtext but this is always gonna stay in the centre so maybe that's an issue and you just want to make sure that this subtext no matter what is in the middle we can actually override whatever we set in the rich text editor so I'm just going to do that now I'm going to add to this no actually let's do it on another line so because we are going to use important so I'm going to target any paragraph tags within our text element make it a line text Center and I'm going to put important on there and this will make sure that no matter what our setting that we put in our rich text it will still fix to the middle I just got to save this refresh the page and now when we change this even if we align left' and Orion align right it's still going to align to the center and if we inspect why that is for some reason I can't click on preview I think because I have to hit save first there we go you can see if we look inside we've got Center right now it's Center but if we did align it to the left in the actual rich text editor it would still get overwritten because we've set our own custom style with this important flag which is going to override it all right cool so that's a very basic custom element which doesn't really make a lot of sense why we would have it to begin with because we can replicate that in Shogun using the elements available already but use your imagination here maybe you'll get to a certain point where you'll need to use a custom element you'll need to actually update the HTML or it just makes more sense if you've got the developer skills to build it exactly how you want it and then bring it onto the page there's one more thing actually before we wrap up that I want to bring into this custom element that is really important and is a cool feature of Shopify Shogun and that is a drop zone so I'm going to create a new div with the class of hero section drop zone and in here I'm going to create a new variable I can call it whatever I want because it won't show up on the front end once we change it to a drop zone but I'm just going to call it drop zone because that makes the most sense now when the page is passed and drop zone appears over here I'm gonna change the value type to drop zone we're gonna hit save let's refresh the page over here now while that's reloading I'll explain what a drop zone is so a drop zone is we've seen it already it's basically something that allows us to drag and drop in elements within another element so because we've set up this custom element here with a drop zone what we can actually do is drag and drop elements onto our own custom element so I can take this button and then suddenly I've put a button in our custom element let's bring in another button and now we have two buttons and this makes it expandable because I can drag in as many buttons or as little amount of buttons as I want into here I can actually drag in whatever I want into here so it gives us a bit of expandability of our custom element so what I'm gonna do hit save on that let's preview how that looks and as you just saw before it's stacking one on top of the other so one of the things we might want to do is assuming that we do have buttons within our drop zone we can do something like this where we're going to have let's say the first well let's do not last child we'll give it a margin right of 10 pixels and that's going to create a margin between all our buttons in our drop zone and then what else do we want to do we also want these two display:inline let me just experiment a little bit here inside our dev tools maybe we can display flex okay that's a bit weird justify Content Center let me try that so let's throw that into our drop zone here oh section underscore underscore drop zone hit save on that and if our page was already published we would just have to hit republish again but we are previewing so let's just refresh here let's see what that does to our custom element and as you can see they're still stacking let's see what's going on here ah it appears that the buttons aren't nested properly let me go back here and as you can see this is interesting the nesting isn't correct so this is another little quirk within show gun don't know how that happened but let me drag in well let me do placate this button and then it should be on the same line there we go okay so we didn't get it right on the drop zone there we go the buttons are on the same level now let's see how that looks now and as you can see they're now in line with a margin between them that's a good little thing to see there there's there's often little nesting issues and layout issues with Shogun's so this layout tab is going to be very useful for debugging and figuring out why you have weird layouts definitely go in and check in here and if these aren't lining up then they're not in the same sort of nesting area one more change I want to make to this drop zone I want to put a margin on the top maybe of 20 pixels so we can go here margin top 20 pixels hit save on that and there you can see it's already updating in our page builder so there you have it guys that's a custom element not the best example as I mentioned because we can create this section without using a custom element but there may be times especially for me there's been lots of times where I've had to create something custom and having full control over the HTML is really cool it is limited when you say for instance wanted to create something with like a drop down like you would in the Shopify section unfortunately dropdowns aren't one of the options here in the value types so it is quite limited compared to Shopify sections but for stuff like this as long as you can safely assume what the content is gonna be in this drop zone then you can start to write some style rules like this and create something quite custom so there you have it guys that's basically the main capabilities of Shopify Shogun we've covered the basics of how to use it and we've also covered how we as developers can add further customization to this powerful page building tool for me I'm still a fan of the native way of doing Shopify theme customizations which is to use templates and the customizer but that being said there are a lot of clients who want to use page building apps who maybe want to change layouts without having to enlist a developer and so I have been working with a few clients recently that really want to use the Shogun page builder extensively so I think it's a valuable skill to have and it'll continue to be popular in the future even as Shopify releases its new theme paradigm hopefully in the next year hopefully less than that I really want to get my hands on a new theme paradigm that was announced at unite last year if you want to check it check out that conference but yeah that's basically it guys if you want to learn more about Shopify Shogun or just Shopify theme development in general or app development definitely leave your comment below and just in general anything to do with coding web development programming I want to create the videos that you want to see so let me know what you want to see in the comments below like the video if you liked it and subscribe for more tutorials all right thank you for watching I will catch you on the next video

Channel: Code with Chris the Freelancer

Views: 33,809

Keywords: Chris the Freelancer, Code with Chris the Freelancer, Web Development, Digital Nomad, Learn to Code, Shopify Shogun, Shopify Shogun tutorial, Shogun app, Shogun Page Builder, Shogun page builder shopify, shogun page builder tutorial, Shopify Shogun course, Shopify Theme Development, Shopify Development, Shopify Development Tutorial

Id: AUYDya6FNQc

Length: 59min 48sec (3588 seconds)

Published: Mon Mar 30 2020