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 7 – Part 3 – Customize the Product Display Widget

Difficulty Level -

Listed Under Lesson Subjects - ,

Applies to -

We’re going to look at one more styling thing and that is the sidebar view in Shopp. I don’t remember what week it was but we put this product widget in the sidebar. Last week, when I used my Widget Styles plugin to style the widgets, we discovered that Shopp uses an h3 tag and so it got the h3 style and that sort of thing.

Now we are going to customize the product display widget. We’re going to change the template for this sidebar in Shopp so that it no longer uses an h3 tag. Then what we’re going to do is to change the widget style so the background color here is not brown but is white instead.

Side Product Template

In Shopp that template is called the side product template, sideproduct.php. This is extremely easy to do because all we’re really doing is we are getting rid of this h3 tag here. You’ve already heard me say it once but I may as well say it again. You don’t want to use these things for styling and we already have an h3 tag in our widgets and that is the widget title itself. What I’ve done is just simply make that a link instead.

What we’ll do now is save the side product template. Then we’ll upload it and we’ll refresh this. Okay, there we go. That looks a little bit better.

Change Background Color Using Widget Styles Plugin

Next we’re going to continue customizing the product widget in Shopp by using my Widget Styles plugin to apply a white background to this. Actually, I already played with my Widget Styles plugin to get there. If we come over to Appearance and Widgets, most of you have seen this Widget Styles plugin in action a number of times so this is not going to be new information to you.

Here’s our Shopp product widget and what I’m doing is selecting the style. We’re going to select style 3 for this and hit save. Come back over to the checkout and look at what that style does to this widget. What it does is it gives each element a white background, rounds the corners.

That’s what I want to do. We’re going to put the heading on top like we’ve gotten the rest. We’ll have the image in the middle, the price at the bottom and we’ll make all this stuff centered. That’s what we’ll do next.

If we come back over here and right now, we have our product thumbnail at the top. What we’re going to do is put our name in the top instead. Clean that up a little bit so our name’s at the top. Our thumbnail’s next and the price is going to go below that. We want to get rid of this big thing and we’ll just specify a style for that instead.

Now our price is at the top and our book is here. Oh, isn’t that interesting though? I’ve got a little bit of work to do with that yet. Let’s see what we can accomplish with my plugin for that.

Customize Heading Font Style

We’re going to come over to the Thesis Widget Styles plugin and work on style number 3. Now, what I want to do here for style 3 is customize the heading font, customize the heading background and use a background image. That’s how we get this, right? That’s how we’d get this appearance. This is the heading font style customized.

Customize Background Image

This is the background image. Gave it a little bit of padding and then customized the widget body padding and margin background using the background color round the corners. I’m going to give it a little drop shadow to this for grins. Kim isn’t here looking over my shoulder telling me not to use drop shadow so I can go ahead and do it.

Customize the Text

The other thing we might do here is customize the text. Customize the typical widget font, let’s see what happens if we do that. Okay, the body text style, let’s give 16 points for font size. It’s not going to work for us is because it’s already white there. Let’s see, edit shopping cart. I’m just going to clear out the shopping cart.

I used a charcoal gray for the name and for the price. We can do the same thing except that I want that to be a link but I want to make sure that it keeps its position. I’m not quite sure why it would split there. a href, let’s take a look at that for a second.

We’ve got an “a” which is our product name, another “a” which is our thumbnail image and we have our product price. We’re going to give this a class. So class equals it product name so we can specify something specific there instead. We save that, upload it and refresh it.

Specify Product Name

Then let’s just go to Shopp. Shopping cart, checkout, side products. Now what we’ll do is say .side product, it’s going to be product name and we’ll say width: 100%. I think what we’re going to do is to clear both. Okay, let’s say a product name. That didn’t do it. I spelled width wrong.

We don’t actually want width to be 100% here and it’s not image, it’s IMG. The width is already specified in line so side product IMG. Okay, let’s get this first part a height. Something is simply not registering here because tags are not block level elements. They don’t behave like block level elements which means they don’t get heights and widths and things like that.

Block Level Elements

Now it’s a block level element and it says margin top. To this, add text line center. Okay, we have our products nicely aligned. Let’s give ourselves a bigger font for that. I’m going to give ourselves a different line height too, 24 px. I don’t even need a height although I might need a little padding or margin below that. Let’s say margin bottom: 10 px, it looks better.

Now we have individual products sitting there inside of this thing. That drop shadow doesn’t look all that great. I think I need a darker drop shadow for that. Let’s grab all of our side products stuff, come back over here to our Shopp CSS, find that side product section and change it. Upload it and come over to the site. Let’s fix that.

Choosing a Drop Shadow

We’re not going to change this font style so I’m going to take that out. We will give ourselves a better color for that shadow so let’s grab that color. We use that color as our drop shadow, come back over here to our drop shadow and hit save. We’ll see how it looks. We must have uploaded the Shopp CSS. Okay, there we go. We have finished customizing the product display widget in Shopp.

The takeaway from this is that you have a lot of control over all of these different templates. We spent parts of the last 3 weeks talking about the different templates and the way to rearrange them and to restyle them and to make them do what you want them to do. That’s something that you can’t do in WP eStore which is the other plugin that I teach. It’s one of the things that makes Shopp such a compelling plugin. Although it’s quite a bit more complicated you can do pretty much anything you want with it.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment