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 4 – Part 5 – Add Widgets to the Store

Difficulty Level -

Listed Under Lesson Subjects - ,

Applies to -

Shopp comes with a lot of different widgets that make presentation quite a bit easier. Let’s begin by looking on this page here first. If we come over to Appearance and Widgets, WordPress 3.3 adds all these miscellaneous widgets automatically. We’re going to get rid of those and have an empty sidebar here for a moment.

Types of Widgets Shopp Creates

You can see here that Shopp creates these widgets – Shopp Account, Shopp Cart, Shopp Categories, Shopp Category Section, Shopp Faceted Menu, Shopp Product,  Shopp Search and Shopp Tag Cloud.

Shopp Search Widget and WordPress Search

We’re going to talk about search options for the online store as we work our way through them. First we’re going to work with Shopp search… Search our Catalog will be the title. The Shopp search widget only searches the products. So if we come over here and refresh this, we’ve got this search here. Let’s search for “hello world” since this is definitely in our blog post but it’s not in our products. Let’s search for it and see what happens.

It thinks that all of these products belong in this search, probably because the word ‘world’. If we take out world and search again, no results are found. However, if we use a regular WordPress search and if instead we search here for tennis, it would find no results because the WordPress search is not searching the product database but the Shopp search is searching the product database.

Oh no, no products are found for tennis because you don’t have any products about tennis. Let’s try golf. Golf, here we go. Okay, if we search for golf in the WordPress search, it’s going to have no results. But if we search for golf here in Shopp search, we get all related products. So Shopp Search searches the product catalog and a standard WordPress search does not search the product catalog.

Google Custom Search on Your Website

There’s a third search option…well, there are probably more than 3 but the next easiest option to use would be a Google custom search. This search will in fact, search the product catalog as well as all the blog posts and everything else. Because what it does is it views the site the same way Google views the site.

Google sees the whole site with each thing as a page whereas both WordPress and Shopp Searches search the database; they don’t actually search a rendered HTML page. Google doesn’t actually search the database, it searches the completed pages. So these are some of the search functions available for your online store.

Shopp Cart Widget

Next we have our Shopp cart. In this case, the Shopp Cart really is just a running total of what you’ve already placed in your cart. “So what’s in my cart?” I’ll put that as the title here. Hit save. If we refresh this page, it’s going to tell us we have nothing.

Oh, pardon me. I’ve been playing around and I put something in the cart. So it’s in my cart. It says one item for a total of $245 and it gives me a choice of either proceeding to checkout or editing the shopping cart. And by edit the shopping cart, what it means is that you can add or change the quantity or remove the products.

If we remove the product here, now the cart is empty. So anyway, having this little widget in the sidebar is the easy way for a customer to have quick access back to the cart, if they are going to browse around and gradually add products to their cart.

Navigation Widgets in Shopp

The rest of these are actually for navigation. And the highest level navigation is really the Shopp Categories widget. Let’s add it and call this Activity Categories. If we do that, this is going to give us a list of all of our product categories. It’s not going to show us a list of other categories, just our product categories.

Shopp Categories Widget

With this Shopp Categories widget we can choose to show product categories many ways, as a drop down, as product counts and by hierarchy if you’ve got categories and subcategories. We can also have the smart categories like most popular and most recent and featured. We’ll have the smart categories show after the custom categories, we’ll choose show product counts and then hit save. Come back over to the store.

Having the categories in the sidebar is a really a good way for people to be able to browse the catalog and in fact, maybe that’s what you’d say as a title “Browse our Catalog by Activity” instead. I like that better actually. And then a customer can use this and they say, “Oh look, they’ve got 10 products under Coaches, Teachers and Parents.” So they click on that and it brings up the catalog page and then it gives them all of the potential products inside of that category.

If you want the New Products, actually in this case everything is new so, it doesn’t really help. But this new product has to do with recently added products. Best sellers would be based on the actual sales figures. On Sale would be products that you had indicated that there was a sale price for and featured products in Shopp has products that you have as featured.

To refresh your memory about featured products, let’s go to back to our products here for a second. And let’s feature these combos. So if we edit the rifle first combo, to feature it, all we do is click this button saying “featured product” and hit save. And actually we can just make them featured by clicking the star under the featured column like this.

So now we’ve got our combos in there as our featured products. If we come back over here and refresh this, now we’re going to have 4 products under featured products. Okay?

And the same thing is true with on sale products. Let’s edit Stage First combo and give it a sale price of $40 and hit save. Now if we went to on sale that would show up. You can see this cool save 20%. If we click on the product and look at it, we see the old price crossed out, the new price here and then the “You save 20%.” And then you’ve got this text about the savings emphasizing the fact that it’s on sale.

Shopp Category Section Widget

The next widget we’d logically want to look at is the Shopp category section. It doesn’t really make any sense on this site because we don’t have subcategories. We’ll look at on Fran’s site and in that case, with subcategories, when you’re on a product in a given category, you’ll see subcategories drop down beside that.

Shopp Faceted Menu Widget

We’re not going to talk about the Shopp faceted menu much. It’s a whole other subject. Essentially, the way faceted menus work is that if you have a bunch of products that can be sorted by one of their details like by weight or by price. For example if you’re looking at iPads, you could sort by iPad 1 or iPad 2 or you could sort by whether it’s got 3G or not.

If you have a product detail that can be used to drill down through a group of products then you could use a faceted menu for that. But neither of the sites that we’re talking about here have that need so we’re not going to delve into it.

Shopp Product Widget

Next is our Shopp product widget and we could name this pretty much anything but let’s call it Featured Products and choose From a category. I think maybe the category slug here is Featured. Let’s see if that works. Let’s show 3 and we’re going to do it by newest. That might not actually work because it’s a smart category, not a real category. Oh, it did. Perfect.

And so the featured products show us the image, the name and the price for 3 products. So you could have a nice featured products widget here but it doesn’t have to be featured products? It could be golf products or universal activities.

Let’s do Universal Activities. Then let’s come over here to Shopp and Categories and look at our categories here for a second. We’ve got one called Universally Applicable and it’s ID is 4. You can see that ID number down here in this lower corner down here.

So we come back to our widget and with “From a category” chosen we just type the number 4 there under Category Slug ID and hit save. Let’s go back and refresh the page. And now we’ve got the 3 most recent products under universal activities. So it’s a very flexible widget and will allow you to do quite a few different things with it.

Shopp Cloud Widget

Now we come to the Cloud widget. Let’s title it Subjects. We probably didn’t add any tags to these products. So let’s just refresh that. Yeah, we didn’t add any tags to the products but we could have. And if you had the kind of organization on the site that would be useful for it, you could come over here to a product and you can add product tags.

Once you added those tags, it would act exactly like a tag cloud on a blog. The more products that had a given tag, the larger the tag would be. And if there was a tag with only 1 product, it would be a small tag and so on and so forth. You could add tags on the products and then use those as a way of crossing categories to show a bunch of related products. It would be related by something other than their product category. Anyway, we could easily do that with this if we had tags.

And that wraps up our look at Shopp Widgets. There’s quite a bit that you can do with this and quite a number of ways to customize these so that they display your products in various ways. And we’re going to look at some more of that customization next week when we talk about how to customize these templates because you can make this look any way you want. This is just sort of the simple vanilla look without any extra styling.

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