Building A Website: Part 4
Customizing The Product Page
Now that our header is built and we can get a better picture of what our final site will look like, we can get back to customizing the pages in our users buying journey. The step we are on now is customizing the product page, which is the page where the the user goes to to actually add the product to their cart. Let’s see what it look like currently.
So it’s not terrible but it could use some improvement. I don’t like the red button, the product picture doesn’t look as good as it could, there are elements on the page that don’t need to be there, and the spacing could be better. Once again we are going to be using the pro builder, so let’s get to it.
Go the the templates page and click the add new button. T’his time we will be making a single product.
So it’s not terrible but it could use some improvement. I don’t like the red button, the product picture doesn’t look as good as it could, there are elements on the page that don’t need to be there, and the spacing could be better. Once again we are going to be using the pro builder, so let’s get to it.
Go the the templates page and click the add new button. T’his time we will be making a single product. I don’t hate the Magazine template so let’s publish that one.
To start with, let’s make the row full width with a left and right padding of 10%, and delete the breadcrumbs element and the product rating element.
From there let’s replace the product image element with a regular image of our logo with a width of 500px and center the image. Additionally, delete the categories element.
I don’t really like it. Let’s change it up. First, delete the image. Then drag a new row inside the column and drag all of the content in the right column into that row, and bring up the product description to the right column. After that, give the left column a padding of 10% everywhere, make the background black, and change all of the fonts to white and the button background to white with a black text. lastly give the right column a 5% padding everywhere and let’s see how it looks.
Ok that is is shaping up nicely. However, I want to make sure that the left column’s content is always visible even when scrolling, which is why we put it inside a row. So, open up the row animation and make it ‘sticky’ with 15%. Go ahead and delete the up sell products and related products elements at the bottom of the page while your at it. Save the changes and let’s test it out.
We are getting close to being done. Go ahead and give the price a 2% top padding and 1% bottom, then also give the review button a background of black and a link color of white.
Additionally, when I tested it I saw that the review and description tabs do something weird when we scroll.
What this tells me is that the tabs are sitting above the navigation bar. To fix this we are going to use a styling feature called the ‘Z-Index’. This essentially controls the layers of your webpage. If we set our navigation bar to a Z-Index of 2 and our description/review tabs to 1, then ultimately the navigation bar will sit a layer above the tabs. That is exactly what w are going to do.
To do this first save your changes and hop over to our header template, open the styling of our top row, and set the z-index to 2.
Now do the same for the mobile row as well, then hop back over and change the z-index of our tabs to 1.
That looks good. I am very happy with that. Now let’s make our mobile version.
What we currently have isn’t going to work for mobile, but we are going to keep it pretty simple. What we are going to do is create a new row and make it only visible for mobile while excluding it from everything we just created. From there we are going to drag a new title, price, sort description, purchase product elements into our new row in that order. Give the row a top and bottom padding of 5% and make sure the text is black and the button on the purchase section has a black background with white text. From there create a new single column mobile only row and give it a top and bottom padding of 5% and then give it a black top border of 1px. Finally, duplicate our long description from above and drag it down to our final column. Save our changes.
Make sure it looks good on an actual phone and we are all set. It’s time to move on to customizing the cart page.