Adding Options (Variations) to your Product

Contents
Adding Options (Variations) to your Product

As you can see the Product Options Box is a blank Textarea that allows you to quickly add and edit options associated with your Product, in order for you to get an idea of everything that is available with Cart Ninja we will be adding in every type of option you can add to a product.

Dropdown

Let's start with the Dropdown, the basic format of product options in Cart Ninja is this:

Option Name | Option Type
  An Option
  Another Option

So in our case since we are starting with a Dropdown we'd create something like this:

Size | Dropdown
  Small
  Medium
  Large
  X-Large

Let's say that it's more expensive for you to sell the Large and the X-Large versions of the T-Shirt, in that case you would need to add additional cost to those options, you can do that like so:

Size | Dropdown
  Small
  Medium
  Large - add $5 [5]
  X-Large - add $10 [10]

So if the customer chose the Large or X-Large option it would add $5 and $10 respectively. One thing to note is that anything outside of the [ and ] is for the human's to read, and the number inside is for the computer to perform it's calculations, so you could make the Option Name be anything you want (e.g. Large +$5 [5] would work just as well).

Now that we've added in one option, let's add some more options.

Radio

Somewhat similar to the Dropdown you can add Radio buttons that allow the customer to make a selection:

Shape | Radio
  Regular
  Fitted +$28 [28]
  Female

So that would mean that if the user selected a fitted T-shirt they would be charged 28 additional dollars.

When you add in options you have to seperate them with a [ and ] like so:

Size | Dropdown
  Small
  Medium
  Large - add $5 [5]
  X-Large - add $10 [10]
[]
Shape | Radio
  Regular
  Fitted +$28 [28]
  Female

Checkbox

The checkbox is slightly different in that it can only accept a "Yes or No" response, so you would format a Checkbox like so:

Make Shirt Waterproof? | Checkbox

That's all you realy need.

If you want to add an additional cost to that, all you'd do is:

Make Shirt Waterproof? | Checkbox
  15
>> add $15

If the user opted to make the shirt waterproof they would be charged an extra $15. Note the >> at the bottom, this is a Tooltip which we will go over very soon

Textbox

The Textbox allows you to get freeform typed user input about how they would like the product. A common use of this is something like an inscription, for the T-Shirt example, let's allow the user to add custom letter to the front of the shirt.

Custom Lettering | Textbox

Textarea

Very similar to the Textbox except bigger the Textarea is a large block of text that is typically used for an "additional notes" section, where the user can add more info about his order.

Additional Notes | Textarea

Tooltips

Tooltips are great little prompts that allow you to add additional information about the order, you can add a Tooltip to the end of any option with a preceding >> like this:

Size | Dropdown
  Small
  Medium
  Large - add $5 [5]
  X-Large - add $10 [10]
>> Choose your size

A tooltip is very helpful in clarifying what exactly the option is asking for.

Custom HTML

Cart Ninja allows you to insert Custom HTML between your product options, for product's with a lot of options this is helpful in seperating them.

Custom | HTML
  <p><b>You can now use any HTML you want</b></p>

Complete Example

Wow that's a lot to take in, see a complete example below

Size | Dropdown
  Small
  Medium
  Large - add $5 [5]
  X-Large - add $10 [10]
>> Choose your size
[]
Shape | Radio
  Regular
  Fitted +$28 [28]
  Female
[]
Custom | HTML
  <p><h3>Other Options</h3></p>
[]
Make Shirt Waterproof? | Checkbox
  15
>> add $15
[]
Custom Lettering | Textbox
>> Add some custom text to the front of the shirt
[]
Additional Notes | Textarea
>> Anything else we should know?

Notice how each option is seperated by a []?

As you get used to it, you'll notice how this can be a streamlined hyper fast way of managing your products which can save you tons of time.

Tips

  1. Tooltips can process HTML as well, a common example of this is adding a link with a popup to the end of a tooltip, (e.g. >> <a href="linktoimage.jpg" target="_blank">Click Here To See Pictures</a>
  2. If you have a lot of products that are similar it's easy to copy and paste options
  3. You can add as many options as you want.

In the next tutorial we will go over how to display this product that you've made.