Creating Product Forms With The Product Creator

Contents
Creating Product Forms With The Product Creator

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.

Dropdown

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

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

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.

Textbox

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.

Textarea

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

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: