Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 6 – Part 3 – Customize the Product View

Difficulty Level -

Listed Under Lesson Subjects - ,

Applies to -

Input Fields In Thesis

If we click on the details view, it jumps us over to here which is something that we are going to edit next. And if we select an audio CD and we add it to the cart then we come on over to here this is going to need some special treatment. And then if we proceed to checkout. Here we are and this is also going to need some special treatment.

The reason why I showed you all of these before I move on to the reconfiguring of the product styling is that those of you who have been working with Thesis for a while are familiar with what Thesis does to input fields. Unfortunately, it’s probably the one piece of poor code in Thesis that Thesis only imagines you’re going to use input fields for one thing and that’s your comments and so it styles every input field the same way.

Customizing the Product Display in Shopp

What we’re going to do is to fix that because there is a fairly easy blanket fix for all of this. But you’re going to see that fix here in the main product display in Shopp which is what we’re going to do next. I think there are a variety of problems with the way this template is shaking out at the moment.

First off, this is the name of the product but it doesn’t stand out really strongly. When we go look at the catalog template in Shopp, you’ll see why. This is that summary and the summary stands out as strong as the title does. The Add to Cart has the standard problem with all Thesis stuff and we’re going to work on fixing that.

Thesis Universal Fixes

The first thing we’re going to do is to fix the Thesis flaw. I may as well just demonstrate where the Thesis flaw comes from and it’s from this section of the code here. If you look at this input class add to cart type = submit, if you come over and look at the definition, here are the standard Thesis text, format text input which is what this is missing any other further definition.

Width is 45% and this is the thing that really messes up PayPal buttons and shopping cart buttons. Input types is this very blanket statement that any input, regardless of its type, if it’s inside of format text, it gets a width of 45%. If it didn’t have that, you can see it would drop off to its automatic size. What we’re going to do is to solve that by being a little more specific.

We can do that by coming over here to our stuff and I have this little category of things called Thesis Universal Fixes. What we’re going to do with Thesis Universal Fixes of the moment is to do 2 things. The first, we’re going to make sure that the width is specified as auto so we’ll let format text be weird if it needs to be. If it’s inside of the Shopp div, if it’s an input inside of Shopp then we are going to give it a width of auto.

Specifying the Width and Adding Padding to Select Boxes

The other thing is that select boxes by definition in Thesis. They don’t have any padding which means they look funny. So we’re going to give select boxes 4 pixels of padding. We’ll come back over Shopp CSS and again, we’re going to make our Thesis Universal Fixes, save and upload. We’re already going to see a little bit of resolution here because our button’s down the right size. Our select box has a little bit of space around it and so we’re already partway there.

In order to fix this stuff, we actually have to dive into the product template itself. Going back to our product template, we scroll back up here and look up at the top. It starts off with a product gallery which is obviously the image gallery that shows up there. Then it has the product name, it has given product name a tag of h3.

If we look at the page, it doesn’t actually have anything bigger than h3. What I want to do is view the page source for a second and work our way down the page. Let’s see, where are we? Okay, down in the content.

Now that we’re down inside of content, we would expect to see some kind of h1 tag which is essentially the page title but there isn’t one. We get through all of our miscellaneous stuff and come all the way down to an h3 tag. What they decided to do with the price was give it an h3 as well. As much as I like Shopp, that’s actually pretty crummy for SEO.

What we’re really going to do is for price, we’re going to say p. There’s no reason to give price a heading. That’s not good semantic markup. In fact, same thing is true with these. It’s not good semantic markup to make these headings because they aren’t headings.

Headings are supposed to indicate that it’s a heading for content that’s going beyond. What they did was they used h3 tag here just to make the text bigger which is not a good strategy.

However, what we are going to do is make the product name h1 and then this is archaic. We’re not going to use big but we are going to style this class so we can make it look the way we want it to look. So we’ve got h1 and we’ve got a p tag. Looks like somebody’s got some questions. I’ll get back to that in a bit, Lanny.

So we’ve got an h1, we’ve got p tags, we’re going to go ahead and save this, upload it and then take a look at it. No, I didn’t apply the right thing. Upload the product. Okay, there we go. Now we’ve got an h1 tag there. We’ll go ahead and style this h1 tag somewhat yet. Now I’ve got an h1 tag there and we’re going to jump on the CSS.

Definition of Line Height

What we’re going to do here is we’re going to give it some bottom margin. We are going to give ourselves a better definition of line height and then we’re going to move on to buttons and these kinds of things.

We start off with our title. We come over to custom Shopp CSS and we come down here to product pages. Our product pages are going to have Shopp and then h1 and we’ll say font size and just give it 24 pixels for a moment. Then line height and let’s make that about 36 pixels and bottom margin, let’s give it 24 pixels. So Shopp h1 and then we say class = headline, let’s go ahead and give that some special stuff too.

Actually, I want to give this a different color too. I know it’s not brown but I’m going to say brown here for just a moment. Here we’re going to say p.headline and we’ll say font size: 18 px font color, let’s give it a dark gray. That’s not font color, I know that. Its color and that little thing telling me I was making a mistake. It’s not 5 8 it’s 6. Finally, we’re going to set font style to italic, I think.

So we’ve got our Shopp h1, we’ve got our headline and we can hit save to that. Actually, the other thing I want to do now is add that Add to Cart button to this too. We scroll down here and look at that button. It’s an Add to Cart button which is essentially add to cart input type = submit. That’s its class. We come back over to Shopp now and we’re going to add that in up here, back up in this definition. So add to cart input type = submit and then this is a hover condition.

Now we’ve applied this button style to that as well. Let’s go ahead and upload it, see what it looks like. Maybe that’s a little bit too much, don’t need quite that much space there, 24 pixels is too much and maybe a little bit darker gray. Let’s see, 464646, too much space there. Line height’s too big, a little bit darker gray.

We’ll start with that, 464646. Let’s make it 30 points and let’s make this 18 pixels. Let’s save it and try it. I didn’t notice this but I don’t think the button worked either, did it? It didn’t. I missed something with the button but that looks better there, a little darker gray, a little bit more space there. I must have missed something here. Let’s see, add to cart input type = submit, add to cart.

Let’s go back and take a look at that code for a second. Add to cart input type = submit. That should be working so let’s take a look at it here. Let’s see why it isn’t.

I’m looking at div id Shopp and then class product. It’s class add to cart input, I was behaving as if it wasn’t. It’s actually this way. It’s input add to cart like that, input.add to cart and that’s not right either. Not the best cut and paste job I ever did. Okay, add to cart is the class of this input so it needs to be attached to it. That should work, let’s go ahead and upload it. Okay, there we go.

So it’s getting in the right direction. Okay now we’re going to go ahead and I have those little unrehearsed moments actually work because plenty of time, rehearsed moments don’t work for me.

Styling the Product View in Shopp

So the next thing we want to do is move on with the styling of this. I think what I want to do on the product is the same thing I did with the list view in Shopp which is not let this thing drop down below the book if there’s a lot of stuff here. In order for that to work, we should come over and take a look at it in its rendered view.

What I’ve got going on here is I have UL previews gallery. I have gallery and inside of gallery, I have that and I have, price and then I have form. What I should do is specify a margin for price. Let’s just look at that.

Edit CSS. Let’s find one where it does actually drop off back over, there was one here just a moment ago. Was it this one here? That’s what we were just looking at. Let’s go back to universally applicable. And see if we can find one that will do this. It’s going to be freedom flight.

Actually, this all by its lonesome is not really objectionable but what would really be objectionable is if the price was over here or the price in the options was over here but the button was over there. What I really want to happen is all of this stuff just ends up beside that.

I think the way I’m going to affect that though is I’m going to come down here. That’s the headline and now what I’m going to do is to create a div. Div class = product details. No. Not details but really sort of product price.

We’re going to create an html thing around that and that’s going to go all the way down to this /div. We may as well just indent this one. So product price; wrap it up in a div and save it. Let’s upload that and let’s go ahead and style it. Now that should be wrapped in our div. Yes, it is. It’s wrapped in div product price and we’re going to give product price a margin of say, 150 pixels.

If we look over this for a second and see product price. Okay, 1, 2, 3. Margin left, call it 200 px. Maybe we should take this little piece out of the form and let the form be up there. Let this piece be below the form and then knock it off at that. That’s what we’re going to do.

Getting Rid of the Form Element

I guess we’re just going to copy this again and take it outside the form. I can’t stay outside and not all of it can be outside the form because in fact, we can go ahead and just get rid of that class. We’ll go ahead and remove everything to there. Now we get the inscription inside the form and outside of the form, we are going to get rid of the form element.

We’re going to test this question twice. We’re going to test it once outside the form and once outside of the form. Inside the form, it’s going to produce a form element. Outside the form, it’s going to give the description. Just list the name of the person you would like Lanny to sign in the box above. Okay, there we go. Save that. It’ll be evident what we just did here. Just decided to shuffle around a little bit.

If we come over and look at this one, refresh this. If we said .div .product price and give me a left margin, margin left: 200 px. I still have to move that closing div for that product price but nevertheless, I get this stuff over here. What will happen is this will spill back over in this direction.

Go ahead copy that and put that in our CSS file. Shopp CSS and we’re down here in our product view. Where did our product view go? Okay, then come back to our product and make sure I’ve got my closing div for that here, outside the form. Okay, there we go. Product price is right there, now it should behave the way we wish it to. Upload this and refresh it. It looks fine there as it would in this situation. It’s because I didn’t upload my CSS file. It’s the beauty of Web Developer. It can always tell when you made mistakes.

I’m not really sure what the right answer here is when you have a lot of stuff there, whether or not it makes sense to move this over. I guess I just know that for sure, if the price itself was sitting there but all the rest of it jumped over, it would look wrong. Nevertheless, we’ll revisit that a little bit here.

Create the Product Price Version of Add to Cart Button

One thing I do want to do is for the quantity to be over here. The only reason why the quantity isn’t over there is because this add to cart button floated to the left. I want the Add to Cart button to be larger too. So what we’re going to do is to create the product price version of this Add to Cart button. It’s going to be longer and it’s not going to float to the left.

We’ll come back over here to Shopp CSS. Let’s go ahead and steal a little comment. This is the product view and we are going to take this and come down here, paste it. Now, we don’t want to change any of this. We are going to get rid of float left it’s going to be float none. Margin left is 10, width is 180 pixels. We’re going to get rid of that. It is input type = submit, add to cart and this is the product price version of it. So div product price input type = submit .add to cart.

We made it wider, we made it not float at all and we’ve given a little margin to the left. Let’s save that and let’s see what it looks like. Okay, there we go. Although, it doesn’t really look like it got any larger, does it? The width is going to auto for that so I need to make this a little bit more specific.

The way I would do that would be to say #shopp and add to cart. That makes that description more specific. If you don’t know what I mean by that, I encourage you to watch my Lesson 6 on Inheritance and Specificity in CSS under Customize Thesis Like a Pro.

Then we just need this box to be bigger. Let’s inspect this element and we are going to say #shopp here. Then Shopp div product price input type = text and let’s give its width of 380. No float, margin left of 10. Let’s see what happens when we do that. I think that will do exactly what we want, essentially make the input wider and give us 10 pixels next to inscription.

That’s a little bit too wide. I guess I want it to be about 320 pixels wide or so. Okay, 320. Actually, I should just double check that to see if it works. That’s the beauty of Web Developer 320, let’s see what happens. Okay, that’s perfect.

While we’re at it, we may as well just play with this for just a second. This is our div class product price inscription explanation. So inscription explanation and let’s say 1, 2, 3 and let’s see, color. It’s a horrible thing to do though. We won’t do color red. Let’s do it this color here. Grab that color and we’ll say font size: 16 px and then we’ll say font style italic. There we go.

We’re just going to copy both of those 2 pieces, go on over here to our site and this is the one we’re replacing. Okay, refresh. Now we have fairly nicely styled, nice big Add to Cart button. Select a drop down option. Those things all work pretty nicely. We styled this stuff.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment