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 3 – Configure Multiple Levels of Product Variations and Addons

Difficulty Level -

Listed Under Lesson Subjects - ,

Applies to -

Now we’re going to talk about product variations. And in particular, we’re going to talk about multiple levels of product variations and how addon products relate to that in Shopp.

We’ve talked about variations a couple of times in this lesson series already but really, the more I’ve worked on this, the more I realized that getting the variations right the first time is really important so it bears paying serious attention to. It’s important to understand the difference between a product variation and a product addon in Shopp and I’m going to use the analogy of a shoe store as a way to help think about this subject.

An Explanation of Product Variation and Addons in Shopp

Our shoe store sells running shoes, walking shoes and dress shoes. It sells men’s and women’s shoes. It sells those shoes in a variety of sizes and colors and it also sells some other items like shoe polish and shoe laces. In our little analogy here we’re going to have 3 products. We’ll have a running shoe, a walking shoe, and a dress shoe and those products will have 3 variations.

Product Variations

The first variation will be gender, that is, whether it’s men’s or women’s. And then size and we’ll say it has 3 different sizes – small, medium, large. And then color and we’ll say it has 3 different colors – red, black, and brown. And so we have 3 sets of variations and those variations actually are the description of the product itself, that is, the product doesn’t stand alone from its variations. You can’t have a shoe that’s neither a men’s or a women’s and you can’t have a shoe that doesn’t have a color or a size. The product is defined by its variation.

When you go to buy a product like this, you are buying a specific combination of those variations. You’re not going to go to the store to buy a pair of dress shoes. You’d go to the store to buy a pair of women’s black dress shoes in size 9 because in order for the shoes to work you need that specific combination of variations whereas addons are products that are entirely apart from the original product. They don’t define the product themselves. They are additional products.

Addon Products

And so an example of an addon product could be shoelaces or shoe polish. Those could be addons to products and those addons themselves may have their own variations. So the shoe polish could be red, brown and black and the shoelaces could have various colors or. So these addons can have their own set of options within them.

Using Product Variations in Shopp

That may not sound particularly interesting until you think about these variations being additive. That is, in our case, for shoes that have 3 sizes, 3 colors and 2 genders, each product then has 18 variations. So when we are configuring a product, we are configuring a product with all of those variations in it.

Certain combinations of variations can be disabled and we’re going to go through an exercise of doing that here in a few minutes. So you can say, “Well, we don’t have any red men’s dress shoes.” And so you could disable all of the dress shoes for men that are red and small, medium, and large.

However, next week, we’ll have to add some custom code in order for those variations, even though they’re disabled, not to be visible. You’ll see what I’m talking about in a minute. By default, variations of a product where there is no inventory and variations of product that are disabled still show up in the selection process unless we add some custom code which we’ll do next week.

If you’re going to buy a pair of dress shoes, you’re going to end up buying one of 18 choices. You have 18 potential permutations of those variations and you’ll end up selecting one of them. And in fact, this might be a reason for you to split products.

It might be a better idea to have a woman’s dress shoe as a product and a men’s dress shoe as the product. And now, you don’t have 3 products, you have 6 products. And then each of those 6 products only has a size and color variation and that might be a little bit easier to manage if there’s a rational way to make that division.

The exercise we’re going to go through here doesn’t break that up so you can see what happens when you have that number of variations, how to disable some of them and what it looks like when you try to purchase them.

Using Addons in Shopp

And then when you’re thinking about the addons, you have to recognize that they’re optional. That is you don’t have to choose the addons in order to buy the product. You have to choose the variations in order to add a product to the cart. All the variations have to be chosen.

This week, somebody said, “Something’s wrong in my shopping cart because I can see the variation choice here. But when I make a choice, it won’t add to the cart.” And the reason was that they didn’t choose from each of their variations. They only chose from one. So in terms of variations, you have to pick from each variation. But in terms of addons, you can skip them entirely or you can pick any number of the addons. Each addon can have a single set of variations, however, you can’t tie those variations to product variations.

For example, you couldn’t have a set of shoelaces as addons that only showed up with men’s shoes if men and women were variations of the shoes. That is the addons stand alone and are not dependent upon individual variations. So that’s a limitation of the product. But this is way more powerful than say, WP eStore is. WP eStore doesn’t have anything remotely close to this ability in product variations compared to Shopp.

Create a Category in Shopp for our Product

Having said all of that, now we’re going to create this situation in the dummy site that I created. We’re going to come over here to Shopp and create a category. We’re going to create a new category and it’s going to be called shoes. We’re not going to do a product details template but we are going to do variations.

In our variations menu, we are going to have sex, men’s, women’s. Okay so there’s one set of variations. We’re going to add another set of variations and that is color and we said brown, black and red. And then we’re going to add our third set of options here and that is size. And we’re going to say small, medium and large.

There are all of our choices. As you scroll down here, you can see there’s men’s brown small, men’s brown medium, men’s brown large, men’s black small, men’s black medium, men’s black large and so on and so forth, right? And then down to women’s. And so this product does have 18 options that have to be configured here.

For the time being, we’re going to say men’s brown small shoe is $9, the medium shoe is $10 and the large shoe is $11. We’re going to keep men’s red medium here. We’re going to say, $9, $10, $11. And then women’s brown small, we’re going to say $20, brown medium $30, brown large $40 because we know women’s shoes are way more expensive than men’s. We’re not going to adjust anything else here. This is our category template and we’ll save the category.

Add Products with Multiple Variations and Addons in Shopp

Now we’re going to come over to products and create a new product in Shopp and it’s going to be a dress shoe. We’re going to take the category of shoes so it’s automatically got its variations. We can skip through all this here.

So we’ve got our men’s brown small, women’s brown small, men’s black… isn’t that interesting? So we’ve got men’s brown, black, red, small, medium and large, okay. So anyway, men’s brown small, women brown small, men’s black small, women’s black small, men’s red small. We’re going to say there are none of those. So we’re going to disable that one and we’re going to disable the men’s red medium one and the men’s red large. Otherwise, all of these different variations are going to be there and we’ll hit save our product.

Let’s create one more shoe and this will be a running shoe. It’s still going to be under the category of shoes, still going to have variations and now we’ll come down here and we’ll say men’s brown but we’re not going to have brown running shoes for women so this will be disabled. And let’s find the women’s brown medium and the women’s brown large and those will be disabled.

View and Test the Products on the Site

Now we have these different variations and we’ve disabled some of them. If we visit our site and we look at our dress shoe you can see that we need to select the gender. Now we select a color option. You can see the red shows up here but it won’t for long. And actually, it doesn’t because as far as they’re concerned, there is no red, small, medium or large here. So if we go to black, now we can pick a small, medium or large. So men’s black large and let’s add that to our cart.

Now let’s say that’s not really what I meant to choose. What I really meant to choose was men’s brown small. You get the big drop down that has all of the potential options. Notice, however, that in these potential options, there is no men’s red choice. There is the women’s red but there is no men’s red because that doesn’t exist as a choice.

If we come back over here to dress shoes now and we select our men’s and we selected brown… actually, isn’t that interesting? I expected red not to show up here. Unfortunately, what happens is that red shows up here even though nothing is available. When we change the code next week we’ll make it so that red isn’t an option and for none of these will be an option.

Let’s just go back to that. I’ll show what happens if we try to pick men’s red medium and we try to add it to the cart. The product cannot be added to the cart because it could not be found. This is right because there really was no men’s red medium, okay? So it will throw an error there. But the best thing would be for that not to show up at all.

Now, it would also be best if when we choose men’s brown and in the case that all the mediums were sold out, that medium didn’t show up here as well. Again, we’ll add that code next week to make this go away so that we’ll just see men’s brown small and large but no men’s red.

Create an Addon Product

That’s how this product variation works in Shopp. If we wanted to have an addon to this running shoe product, we have to come back up here to addon and select that. Now scroll back down to the bottom. If we wanted to choose shoe polish we’d now have brown, black, and red.

Notice how the shoe polish can’t have another set of options under it like 12 ounce or 7 ounce. Each addon can only have one set of options. Then if we added another group here of shoelaces, now we’re stuck with do you want color, length or what do you want to do? We’re going to say color again, brown and black.

And now that we’re down here, now we have this choice of picking a price, right? So under shoe polish, we might make all of it $5 and all of our shoe laces $3. And if we are tracking our inventory and if we run out of brown shoelaces, they won’t show up in the addons menu. We come back up here and refresh this product.

It’s because I was in the dress shoe which didn’t have those add-ons but we do have the addons for shoe polish and shoelaces and you can pick those addons while you are making a choice. So choose men’s brown small and we’re going to grab brown shoe polish and brown laces and add them to the cart. And there’s our product from which we can go back and grab another choice if we wish. And then there are our two addons. And that’s how product variations and addons work together in 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