Building A Website: Part 3
Customizing The Shop Page
The next step in our user purchasing journey is when a user clicks on the shop link. This will take the user to our shop, which is required through WooCommerce. So click the shop link and let’s see what the page looks like.
That does not look good. There are some changes we could make through WooCommerce but not enough to make it look alright. They may work if we have more than one product but we don’t and even if we did we can make it look a lot better using Themify.
The tool we will be using with Themify is it’s ‘builder pro’. It is a relatively new tool that allows designers to not just customize the look of pages but templates as well. Almost like a GUI for a child theme. It can seem a little daunting to use at first but at this point you should be familiar withe the theme and the builder enough to be okay. It is a great tool to get familiar with and I personally use it all the time as it allows you create a truly customized and professional website. Anyway let’s get started.
To first start using the pro builder go to the ‘Pro Themes’ section in the Themify Ultra tab.
We need to create a theme before we can create any templates, so add a new theme. Give it a title of ‘MWD Design Academy’, make the image our logo, and leave the import theme blank.
Now that the theme is created we can create templates for our pages. So now go to the templates section and click to add new.
Change the type from header to archive product, and leave the conditions to the entire site. After that click next.
This section is useful because it give you some pre-built options that you can use and build upon. However, we are only selling one product so none of these options will work for us. It would look pretty lame to come to a page and only have one product tile. So we are going to leave it blank and publish. This will take us to a page where we can create our template.
It looks exactly like our normal front end builder. The only difference is it is for a template not a specific page and the builder has a few additional options to add to the page.
Since we are building a product page for a single product I will need to be a little creative with my shop design since as I mentioned the classic shop look just won’t work. Instead I am thinking that we make it look like a landing page that focuses on the value of the product. I would hope that users would look at the information on the homepage first but there is the chance that a user clicks the shop link before reading the material on the homepage. Because of this we may have some repeat content but we will stress the focus of purchasing much more, so users who read the material already have a clear path to buy and users who haven’t can still get the info they need.
Let’s start by making the first row full width and two columns with no gutter space. Also give the row a top and bottom padding of 5%, and give both columns a top and bottom padding of 5%, then center the font. I have a vague idea of what I want to do and this should be a good starting point.
Next let’s drop our logo in the first column and give it a width of 600 pixels.
From here let’s drop a text block in under the logo and make a H2 heading of ‘Lifetime School Membership’.
I don’t really like how the title is lining up with the logo. So let’s change the font back to left aligned for this column and instead give it a left padding of 10%.
I like that more. Next, let’s give the column a black right border of 2 pixels.
After that let’s now drag a text box into the second column, you can copy the marketing text from the live website, and paste it in as H5 text. Go ahead and give the column a left and right padding of 5% as well.
Next let’s add a black button under the text with a white link that says “Purchase Membership”. Giving it the link of your product page.
I’m still not thrilled with the layout, so let’s give the text a left alignment and the button a right. Then let’s give the button a right padding of 25% and change the row padding to 7% on the top and 10% on the bottom and save our changes.
I am actually pretty happy with that, and I think it will look good with our black header, especially after we customize it. However, I can already tell that this design isn’t going even remotely work for mobile. There is too much text for two columns and the middle line would then be on the edge. Sometimes it is almost more work to try to customize the same section for every view, so we are going to create a whole different section for mobile.
Go ahead set the row visibility to hidden for mobile and create a new single column row row under it. After that drag in a new logo (500 px), enter the text under it (this Time H3), center the font, and give the row a top and bottom spacing of 10%.
Once that is done, duplicate the button from above and drag it down. This time we want the button to be above the text so it is still one of the first things we see. Then finally we can duplicate the text above and drag it down under the button, changing it to a paragraph.
Let’s finish this up by fixing the styling. Take the 25% right padding off the button and give the text a 10% padding. Also center them both. Once done save our progress and let’s see how it looks in the mobile previewer.
Aright that looks good. Let’s exit out of the builder and move on to the next step. Customizing our header. We could go to customize our product page, which is the next step in the buying journey, but before we move on from this page I want know exactly what it will look like. That way we don’t have to come back and style it all over again if we change the heading later and it makes the page look bad.