FREELessons: 8Length: 56 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Install and Customize a Storefront Theme

So far, I've left all the default settings for the store theme. But that's not very interesting! Let's set up some custom styles to brand our store.

2.4 Install and Customize a Storefront Theme

Okay, so were gonna move on. And we done WooCommerce settings, so now were going to look at Storefront Theme, and I'm gonna show you how to install and customize the theme. So we finally get rid of this massive great box at top of my screen, so let's click the Let's go button. While it's launching, I'll have another drink. That launches the customizer for us, and there's a little tool that you can go through here if you want to. I'm gonna give you that tour instead, so we won't look at that. So here's my store, now that I've got storefront activated. So you can see I've got a welcome page as my home page, I've got my latest products listed first. My products are on sale and my best sellers, and WooCommerce automatically identifies those for you and helps you market those products. But you can see that at the top, because I selected to display categories and products, we've got category images here and they're missing. And I'm going to add those a bit later on so don't worry, so let's customize it. So the site identity open running with WooCommerce is not just another WordPress site. It's my fab store, so if you wanted to you could add a logo up here and an image for your site icon which will appear in the browser up here. But I'm not gonna do that for now, I'll click Save and Publish. And then I'm gonna go back to looking at the header. So I can customize the header here as well, and I'm gonna change the background color of the header. And I'm gonna use a shade of pink, so let's scroll up so we can see that, that's a bit too dark, let's go with that okay. So that looks a bit horrible now, with all the black, so I'm gonna change the text color and make that white and the link color as well. So I'm already adding a little bit of branding to my site. So I'll Save and Publish that, and if you're familiar with the customizer you'll have done this before. I'm gonna do something similar to the footer, but first what I'll do, is I'll copy the Hex code for that color there that I've used in the header. I'll go into the footer, I'll select the background and I'll paste that in. Let's scroll down so we can see how that looks, it's just wearing away and doing its thing. And again I'm gonna change my heading color and my text color to white and I'm gonna make the link color a, that's not very nice is it, a pale pinky gray sort of color. Okay, so I click save and publish to save that, and then go back and I can change the typography as well. So this isn't actually the typography as in the fonts, but it's the colors. And the only thing I'm gonna change here is the color of my links. And So I can Publish again, and then I'm gonna change the button color so that that matches as well. Now I'm going through this quite quickly, because I'm just changing a few things to customize my store. But you can see I've already got some branded colors there let's change the color of the text on the buttons as well. There we go, right so my buttons on my header and my footer all look nice and consistent. If I wanted to I could obviously add a logo and some images there as well. So here you can customize whatever you want, you can also add your own additional CSS. You can either do that by typing that in here, or you could do it by creating a child theme of the storefront theme. Now if you do run your own CSS don't edit storefront theme directly, because what happens is when you update your storefront theme which you should be doing to keep it up to date and secure, is that you'll lose everything that we've done. So never ever, never please edit a third party theme plugin directly you should always create a child theme for a theme that you want to make changes to. So that's the customizer, I'm gonna click Save and Publish to save all my changes there and then close that down, and let's take a look at the front of our site. So, that's my homepage, and I'll come to these images shortly and here's my shop page. So that shows my products and categories as well, so you can see there's a grid with more products there. So that's the storefront theme, which we've just looked at, let's just check whether there are any more questions. No more questions have come in during that section. Sebastian has said thanks for the non-answer to your question about Google Calendar which I'm hoping you'll get from her, and Adam. But let's move on to our final lesson which is Product Settings.

Back to the top