Now that we’ve added products, we can see some of this already displayed on the site. So come back over to the site. We need to look at our pages here for just a second. And we would go to the Shopp. Right now, the product catalog is showing up on this Shopp page.
Let’s add the Shopp page to our menu. We’ll use the Thesis Nav Menu for the moment and then we’ll choose Home, Blog and Shopp and let’s get rid of the feed link and the home link. We’ll hit save. Now we should have the Shopp page.
Review Products on the Shopp Page
Now, this automatically shows us our products. We set a pagination number in Shopp so that this page is going to display at most 10 products. So if we had more than 10 products, there would be pagination that we could select here.
We can also change the view of the products in Shopp and if we change it to the list view, that’s when the summary information shows up. And you can see that it made each one of these images the same size even though, in fact, the images that we uploaded are different sizes. That’s kind of a nice thing.
If we go to one of the products here then you’ve got the text that we entered in here plus you’ve got the format and now, you can select an option for the audio CD or audio download. And you can select Add to Cart and we’ve got our checkout screen and, at this point, you can proceed to checkout.
And then checkout in Shopp brings us to account login information and if we’ve already got an account established then we can log in. If we don’t already have an account established then we create an account adding our billing address credit card or PayPal in Shopp and so on and so forth.
We can see all of these parts of the process because we have created products.
Use Shopp Shortcodes to Add Products to a Page
Now, this is showing us our catalog. We don’t have enough products yet to really sort comfortably by category but we could theoretically. Let’s go to our homepage and say that here we wanted to show perhaps our best selling products. Now what we can do is use Shopp shortcodes to add those.
I was able to use Shopp shortcodes earlier today. Well, we’re just going to type the shortcode in for the moment. It’s pretty simple actually. When you say category, this is going to list all of our categories and give us little bits and pieces of summary information. So if you hit update right now and then come over and look at our page… no, it isn’t. Let’s see, I guess what it really wants me to do is specify a category.
So I could say category slug = new and hit update. This is called a smart category. If I refresh this page now it’s showing our newest products in a way that really wants to be styled. But nevertheless, it shows our newest products. It would show the number of views and that kind of thing here.
But we can, instead, say category id = 1 and that would show category 1. We do have the one product. With Winning in Mind from $0, we have a format that costs nothing. Oh, we didn’t…we actually didn’t get rid of video DVD.
Correct a Product Format
So, if we come back over and look at our Products for a second, that was With Winning in Mind, wasn’t it? And it did over there say $0 for price I just didn’t notice it before. We look at our format. We’ll delete video DVD and then save.
And now when we refresh this page, we’re not going to have the 0 but rather $9.95 to $35. You pick your format, your quantity, and add to cart. So you can see the cart kept track of both of my products and then you can remove products from the cart. But we’ll talk about how to customize that display in the future week.
Revise Shopp Shortcodes
Let’s look at a category that has multiple products in it. And that looks like Archery. This is category id = 2. If you look down the bottom down there, you can see a category id = 2 at the very bottom of this when I hover over archery.
Let’s edit this page and change the shortcode to have a 2 in place of the 1. Let’s update and then view the page. Now we have multiple products in here including With Winning in Mind which we said is cross categories, right? Actually that’s why With Winning in Mind showed up in the first place was because we chose category id = 1 which was something that only had With Winning in Mind in it.
Review of the Automatic System in Shopp
So that’s the automatic system in Shopp for creating categories, creating products and adding products to categories and then essentially creating the sort of automatically generated pages. We didn’t actually create a page that says What Every Archer Should Know About the Mental Game. This page is automatically generated by the plugin based on the product id.
Let’s look at Shopp/category/archery. So this generates a page that displays all of the products that are inside of archery. And again, this is a page that is created on the fly. This is not a page that we created ourselves. And well, we’ll take advantage of this system for displaying these products here a little bit later, including this very nice, little breadcrumb trail. There are widgets that can help us find those things as well which we’ll be doing in a later lesson.