You can open the product creator straight from the Cart Ninja Dashboard
Start with the Basic details for the product, the name and starting price
You can optionally upload a product thumbnail which will be used in the cart section of the order process
When you first update the product a bunch of stuff will happen, the Add To Cart URL (covered more in the simple products section), the Product HTML Code, and a new area to add Product Options Pops up.
You can preview the product quickly if you want, we will now be going over adding some Product Options / Variations to this product
Overview of Options in Product Creator
Cart Ninja Allows you to add an unlimited amount of product options to your form, in any order. Which in turn allows them to customize your products however they need.
Let's start with the dropdown, as we are creating a T-Shirt product, it makes sense to allow the customer to choose the size of the T-Shirt, so fill out the form like this:
Option Name: Size Option Type: Dropdown Option Values: Small | 0 Medium | 0 Large | 0 X-Large | 0
If you click on "Preview Product" you should see something like this:
Now you have a very basic product ready to go. Let's customize it a bit more. You might have noticed the ' | 0 ' after each option value. The 0 represents the additional cost that this item will cost for the user, anything before the | is what the user sees about the option. So say for example the Large cost $5 and the X-Large was $10 more you could edit the Size option to be like this:
Option Name: Size Option Type: Dropdown Option Values: Small | 0 Medium | 0 Large - add $5 | 5 X-Large - add $10 | 10
The "add $5 and add $10" can be formatted however you want (or even left out) they are for the users convenience.
If you preview that you should see the new options and their values
Radio Buttons are very similar to Dropdowns, let's add in some Radio Buttons:
Option Name: Shape Option Type: Radio Option Values: Regular | 0 Fitted +$25 | 25 Female | 0
Add that in and then preview it to see what it looks like.
Checkbox differs from Radio and Dropdown in that it is a Yes / No Type of Response, so a common use for it is to say something like "Add x additon to order" for example: add the following to our Red T-Shirt example product.
Option Name: Make Shirt Waterproof? Option Type: Checkbox Additional Cost: 19.99 Tip: Add Waterproof coating for $19.99?
You'll notice I added a tip to this one, will go over tips more in a bit.
The most common use of the textbox is to add some type of customization to the product, for example with the T-Shirt, we could allow the user to type custom lettering that they might want to add to the shirt.
Option Name: Custom Lettering Option Type: Textbox
When you preview that you'll see a new textbox where they can type some values in.
The Textarea is almost exactly the same as the Textbox, only it gives you more room to type out a longer message. You could use it as an additional notes area if you want to give the customer the option to tell you more about the order.
Option Name: Additional Notes Option Type: Textarea
If you take a look at that you'll see an area for them to write notes about the order
Tips are a great way to specify more details about the specific option, for example on the textarea example we could add a tip that says something like: "Anything else we should know?"
Putting it all together you should be able to get something like below: