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 5 – Part 9 – Customize Shopp CSS

Difficulty Level -

Listed Under Lesson Subjects - ,

Applies to -

Styling Products in Shopp CSS

The next thing to do then is simply to style these elements we’ve added to the products in Shopp now that we have them essentially laid out. Using HTML the way we want, what we have to do is change the Shopp CSS to make the products display the way we want. I’m going to remove that and remove that and remove that.

Go back to continue shopping and we’re going to start off by looking at it in this view in Shopp. I know I’ve already done this but I’m not going to make this a link. This is going to just be an h4. There we go, this is going to be just a straight h4.

If we take a look at Kim’s design. We want all those things centered and then we want details and add to cart to be side by side. We want a little bit more space in between images and the price and we want to put a box around it. Let’s just edit CSS and we’re not doing custom CSS. We’re working in Shopp CSS and we’re going to start off with our category.

Assigning Margins and Frames

Products list view, that’s where we are. We’re in our products list and it really starts up here in the product category in Shopp. If we just right click on that for a second and inspect the element, let’s start off with LI class product. Actually, we’re going to start off with LI class frame because it’s a frame that we’re going to use to place the border and give it margin around the sides.

If we go directly below this and say #shop and then .products and then .frame. Then we’re going to say margin: 10 px and say padding: 10 px. We’re going to say border solid 2 px and then color. Right now, we’re going to say brown.

Now we’ve got that and we may as well give it a box shadow. Box shadow: 5 px, 5 px, 5 px and then what do we do? Efefef, 888888, there we go. Then I think we need to make these all the same height so let’s make it say, 220 px. Let’s make sure we have enough room for that stuff.  I think maybe we want more margin, maybe we want to do 15 pixels of margin and let’s do a border radius also. Border radius: 5 px… okay, 15 px. There we go, okay.

Now we’ve got that shuffled around a bit. We’ve got our frame in place and we’re going to have to come up with some special stuff for the list view of this. I don’t want to lose this but if I copy this and if we go to our list view, I wonder why that happens because the frame… that’s interesting, isn’t it? I haven’t had the chance to test this yet. Because in the list view, we need to take the margin down for the frame, I think, but we’ll just take a look at that as we get further into this.

Scope of Customization

Anyway, we’ve got our frame and the next thing to do will be to finish styling the rest of these pieces. Let’s go over to Shopp CSS and take a look at that specific setting. Let’s see right here, Shopp products frame, hit save, upload it and this is now Shopp CSS that we’re uploading. If we refresh that, there we go.

Now, we’ve got our little products all in nice little boxes and all I have to really do is come up with the rest of the styling in order to get the Add to Cart button to drop down here and give me some more space. I think I am going to have to make more than 220 pixels tall, just adding some more CSS to make this whole thing come together. We’ll take a look at that next week, actually. The takeaway from tonight is the system of doing the customization and the scope of customization is available to you with Shopp

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