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 8 – Customize the Category View

Difficulty Level -

Listed Under Lesson Subjects - ,

Applies to -

What We’ll Be Customizing

We are going to continue customizing the Category View of Shopp. Let’s add our product to Add to Cart in Shopp. What we’re going to do is to take this Add to Cart button and take it out of the list view. What we’ll do is grab the form, cut it out and paste it there. Now, it’s outside of the thing called list view and therefore, should be visible even when it’s not in the list view. The only thing that will be invisible in the list view is the product summary.

If we refresh this category in Shopp, upload that, come back over here and refresh this, now our Add to Cart button shows up under these products as well. If we go back to our list view, it still shows up but now it shows up here too so now, we can actually add it to the cart. It’ll drop us over here. It automatically gives the hardcover book unless you want to pick something else.

Add a Link to More Details

So that’s added the button simply by rearranging that a little bit. Now the other thing I want to do is to add a link to more details. What I’m going to do here is to do a link. It’s going to be essentially an href product url except that it’s not going to have the image in it. It’s going to have details. Let’s go ahead and save that.

I’m going to wrap this in div class details. Actually, I’m already a div class detail so it doesn’t matter. I’m going to do that anyway. Div class details link and do that again. Close out that div here because ultimately, we’re going to need to use some CSS to style this link and we’ll add that to the Shopp CSS file.

Customize Category View in Shopp With CSS

So we’ve got our link and we’ve got our product. We’ll go ahead and save this now. I can’t save it. Upload it. There’s our details link. There’s our Add to Cart button. Now I want to take the title up here and I want to move it above. I’m going to do that by taking this h4 out of there. It’s going to be inside the frame but on top of the image instead. Save that, upload it and refresh it.

In Shopp now we have the title above, image, price, details and add to cart. If we switch over to here, we’ve got our title above, price, summary, details, and add to cart.

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