0:00 In this tutorial, as part of the Infigo core learning pathway, we're going to be having a look at updating the look and feel of your brand new storefront that we've been creating so far.
0:12 The first thing to tell you here, if we're logged in as our storefront administrator and looking at the administration screen, is how to actually get the front end of your storefront.
0:23 Easiest way to do this is to click on the public store button, which is on the top left of your screen.
0:29 That will take you in a separate tab directly to the current front end of your storefront. You can see that in our new e-commerce we've spun up storefront.
0:41 There's already a lot of content already being created, although we do have full customization options over these elements. If we want to return to the admin area, we can either go back to the previous tab.
0:54 Alternatively, we can go to the admin button on the top right side when we're viewing the front end and logged in as an administrator.
1:02 Now there's a few different places in the Infigo administration area where you might need to update different elements on your site.
1:10 First and foremost is the appearance settings area. Thank you. So if we navigate back to our admin area, I'm just going to go to the appearance settings.
1:28 And this screen is kind of storefront-wide settings on the look and feel and branding of our storefront. So you'll see, for example, that we've got the ability to choose different logos for color and white scenarios.
1:41 We can choose different color themes that are used throughout our storefront, different fonts, images for different scenarios, and then more in-depth options such as the color customization.
1:54 of the editors, other fonts, and the layouts of certain screens. Updating any of these is easy.
2:02 Simply make a change. You may need to upload a new logo if you don't have any available. And then click on Save.
2:14 This is one of those instances where you may need to clear your cache before those changes that you've made take effect.
2:23 So, for example, I can see on my default storefront now that the footer is now using my white logo, which it's utilizing by default.
2:34 Now, there's several different areas within the Infigo software where we may want to update content of different pages. So, for example, we've got our homepage, we've got any additional content pages we may create, things like terms and conditions pages, shipping information, we've got product pages
2:53 that we may want to populate, loads of different things, which are found in various areas of the admin section. However, they all utilize the same methodology for actually building the content on those pages.
3:06 And actually accessing those pages to update things is very, very easy from the front end. So, for example, if we want to modify our homepage, we need to find the exact element that's relevant to update on our home page.
3:23 Easiest way to do this if you're logged in as an administrator is to go to this button, the content overlay at the bottom of your screen.
3:30 This will give you an indication of every single content element that's being utilized on this particular page. So, for the homepage, for example, there's quite a few in play.
3:43 If you need additional context, you can go for the content overlay option, which, where possible, will overlay different areas of your storefront to give you information as to which part of the page is related to which element block.
3:59 If we want to modify one of them in particular, we can just go to Edit, and that will take us directly to the back end of the store.
4:06 So, us to the modification of our homepage. Now, we have three different editor types that we can utilize here.
4:17 Rich Editor, which I would not recommend using in most cases for site design. Code Mirror Editor, which is useful if you do have the in-house skills for writing your own code, your own HTML.
4:30 But most of our brand new users would be most comfortable using the console. Content Template Editor. This is a building block approach to building the content on your different pages.
4:42 So, we can see that this is using the Content Editor by default, and I am using the Builder approach. There is a lot more content on the Content Template Creation elsewhere on the Infigo Academy, with a much more detailed learning pathway available.
4:56 In this particular scenario, I'm going to be going through the absolute basics. So, we can see that there's some content already available on here.
5:06 We have a slider and we have a section which contains four columns and those four columns contain different information. We can modify those.
5:14 Alternatively, we can put we can make a brand new section, which will add a separate block to the bottom of our page.
5:22 I can then specify how many columns that's going to be in, and then I can start adding some content to that particular column.
5:30 So I, I've added a couple of example elements there, but we can see that we've got a lot of different element types available for us to add, which allows us to populate the page with pretty much everything we need, including an embed block if we want to insert some custom code.
5:46 Once we've made those changes, we click save, clear our cache, our homepage that we've modified and we can see that the changes that we've made in this case, quite basic, have now appeared on our homepage.
6:04 Now it is important for me to quickly mention where we might need to add certain elements, certain important elements of our page content.
6:13 Two areas we want to look at in particular. First and foremost, we want to look at the editable content area.
6:21 This is where a lot of site-wide options are going to appear. Things like modifying the header, the footer, the homepage content, payment, various different parts of your products and MegaEdit, your checkout, payment options and so on.
6:37 Another area we might want to look at is the creation of content pages. As mentioned before, this is sort of additional pages on your storefront.
6:48 You can see we've got a few which are created by default, which we're free to utilize, or we can create brand new ones.
6:55 And each of these is built in exactly the same way as we saw utilizing those content templates. Content templates also apply in other areas of the site, things like products, category pages.
7:09 And so And that's it for the basics of modifying the look and feel of your storefront. In the next tutorial, we'll have a look at actually creating a basic product and then populating its landing page.
