In this lesson, you will learn how to:
- Build Size and Color Options
- Put them into an Option Set
- Apply that vOption Set to your Product
Product Options are an important part of selling your products online. At Bigcommerce, we break this into two parts: Options and Option Sets. But first, what are Product Options?
Product Options are things like Size, Color, or Pattern. Even Yes/No questions, Text Entries, or preferred dates can be Product Options. Some products may require multiple Options. We build all of our “Options” first, and then we add them into an “Option Set”. Once we’ve put all of our Product’s Options into an Option Set, we can apply that Option Set to our Product. Let’s see how it’s done inside the Control Panel.
We should always start this process with a product, or product line in mind. Then, we can start building the options we need for these products. Let’s go to the “Products” icon in the navigation. Then we’ll find the Product Options link. We land on a list of preexisting Options. Let’s click “create an option” to get started. Bigcommerce created these tiles to help store owners quickly build the most widely used options: Size and Color. If you need a different type of option you can click Create Your Own. I’m going to sell a T-shirt. My T-shirt comes in different sizes and colors.
Let’s start with a Size option. This “Option Name” is used internally inside the Control Panel. I like to be very descriptive with this Option Name as I may have to find it in a long list of Options later on. Below, we see our option values. Bigcommerce has provided 3 default sizes to get you started, but if we offer this product, or product line in Extra Large we need to add the extra large value to this option. To add another option choice click on the green plus sign to the right of the last value. Now we’ll type in the option value we want to offer our customers. This size system can work for all types of size values, like ounces or shoe sizes. Just write in the options you want to offer on this product. When this option is complete click “Next” on the bottom right.
We are not required to put this option into an Option Set just yet, but if you had already created the Option Set for this type of product, this would be a good place to add your new option, right into the Option Set. Remember Option sets get added to your product not the Option directly. You can also create your Option Set right now by clicking this link, here. I’m going to go ahead and create an options set right now, so my option for size is automatically put into this option set. When I’m naming my option set I want to anticipate any other options I’m going to put into this set, so that way I can name it appropriately. I know I’m going to add a color option to my product because I sell my t-shirt in 3 different colors. Let’s click Save, and we’ll go create our color option.
Now we’ll create a Color option. Click the Create an Option button again, but this time we will select the “Color” tile. I’ll give my option a descriptive name for internal use, and then a Display name that my customers will see. Now I can begin naming and selecting my colors. My first color will be “Navy Blue”. Since I won’t be offering a red option I can overwrite this first value. Click the red color swatch to the right. This brings up the color picker tool. First I’ll select my color range with the slider tool, here. Then I move over to the left box to select my shade of Navy Blue. Hold down your left mouse button as you move around the box. Once I’ve found the right color navy blue I release my mouse button and click off the picker window. You’ll notice a new “Hex Value” is present. If you know the hex values of your products you don’t have to use the color
picker at all. Let’s name this color, “Navy Blue” and select the other two colors we offer for this product. Now we’ll offer 3 different colors for this product. And then click next.
Now since we’ve already created the option set for our T-shirt we can easily add our new color option right into the corresponding option set. Let’s click save and go apply our option set to our product.
We’re directed back to our Product Options page, and we see our two new options that we just created: Size and Color. The last step is to apply this Option Set to our product.
Let’s go back out to our Products list. Click the Products icon in the navigation. Then select the View Products link. Find the product you’re building your options for and click its title. We’ll click on the Option tab at the top. Now, pull down this drop down menu and find your Option Set. Hit save and you’ve successfully added Options to your product! Let’s go check it out on our storefront. Here’s our size option and below we can see our Color swatches. If you ever need to add Options to this product, simply create new Options and add them to this Option Set.