Posted by OK, we’ve made a lot of progress on our site. We’ve gone from nothing, to a self-hosted WordPress / WooCommerce site that’s almost ready to go. We’re now going to spend a little time completing the look and feel of our site to get it ready for launch. We’ll be adding logos, slider graphics, editing menus and configuring page sidebars. At the end of this tutorial, we’ll be ready for testing before our site goes live.
Upload Your Logo to Storefront
If you don’t have a logo, go to Fiverr and get someone to create one for you. It won’t cost you a lot and you’ll be surprised by the quality of what’s on offer.
The Storefront theme we are using has a recommended dimension of 470 by 110 pixels for your logo, so create your image file accordingly.
To upload your image simply go to Appearance > Customize and then select Site Identity. Click on ‘Select Logo‘ and upload your image file.
Whilst we’re here, lets’s also set the strapline for our site. This is what Google will pick up as the headline for our Google listing so it’s good to get this right. I’m going for Rock Tees – Music Memorabilia and Clothing for the Site Title, and Official T-Shirts, Hoodies and Hats from Your Rock Heroes for the Tagline.
I’m also uploading a 512 x 512 image to the site using the Site Icon box. This image or favicon, is the image that you see to the left of the site title in the browser, or in search engine results, and helps to brand your site online. When we’re finished we have something like the image below. All we need to do now is Publish.
Edit the Storefront Menu
We’re now going to create a custom menu for our Storefront theme to be more useful to our visitors. At the moment it includes links to a sample page, Checkout, Cart and Blog, which aren’t really necessary for our shop. It would be useful however for our visitors to be able to navigate directly to shop categories, such as Tshirts, Hoodies, and Accessories.
To begin creating our menu navigate to Appearance > Menus. In the box below Menu Structure give your menu a name and hit Create Menu.
You may need to enable Product Categories to show in your menu items. to do this go to the ‘Screen Options‘ dropdown at the top right of the window and check Product Categories. This should now be an option in the Add Menu Items area.
We now need to check all of our product categories and select ‘Add to Menu‘. We should also check Primary Menu in the Display location checkboxes and then finally Save Menu.
If we now visit our site we can see that the menu is live on our site. Clicking one of the categories takes us to the main product category page.
Editing the Welcome Banner in Storefront
The ‘Welcome banner’ you see splashed across the front page, as well the highlighted products, ‘Fan Favorites’, and recommendations are all created within the Homepage, so we’re going to edit that document.
Let’s visit Pages > All Pages, and we’ll be presented with a list of pages that make up our site. Some of these, Cart, Shop, Checkout & My Account are created by WooCommerce as part of our E-Commerce system. We’ll leave those alone for the tim being. We’re going to look at Homepage here to see how our site is presented. You’ll see this is also highlighted at Front Page, to help us understand what role the page plays within the site structure.
To view our page from an admin perspective simply hover your mouse over Homepage, and select Edit. We’re now on a page that looks similar to how our site visitors view it. If you scroll down and take a look at the different sections of the page you’ll see how WordPress constructs our pages. Content is arranged in what we call Blocks. Within these blocks, we can create content using a range of widgets created by WordPress, and also third-party content such as WooCommerce for example. You will see that a lot of the blocks, Best Sellers, for example, are simply highlighting featured content from the WordPress store. This can change dynamically based on sales data generated on your site.
If we scroll back to the top of the page we’ll see our existing banner. I’m changing the text on the banner by simply clicking on the text and typing new content over what was there previously. I’ve made mine blod to help it stand out.
For the image background I’m going to click on the image, and then select the pencil tool from the top of the image. This will then open up the Select or Upload Media popup. I’m then going to upload a free image I’ve downloaded from Pixabay. (I highly recommend Pixabay as a source of free, legal images!).
It’s worth playing with the settings to the right. Using the Focal Point Picker you’re able to move the image to ensure it’s positioned where it works best. With the Overlay option you can use this with a colour, or simply use a white overlay and change the background opacity to essentially lighten an image so your text stands out over the background.
So now we can see our site coming together a little more. Below is our homepage and site a step closer to completion. Next up we’ll be editing the widget content on our checkout pages before a few final tests, then our site will be ready to go live!
One comment
Comments are closed.