Create a product

This is a guide to create products in general and will cover global UI/UX for each product.
In order to begin creating a product click the "Add Product" button at the top right of the product page.
Add product button
Once you have clicked the "Add Product" button you will be redirected to the Product Creation page
The top half of the product creation page

Select a Product Type

The first step you take when creating a product is by selecting the type of product you would like to create:
  1. 1.
    ​One Time Product​
  2. 2.
  3. 3.

Create a Product Name

You will then create the name for your product by typing in the title input field.
Give your product a name

Write your Product Description

Directly below the product title you can add a description to your product
There are a few bugs with product description.
Write a description for your products

Add Product Images

Directly below the product description you will be given the opportunity to add images to your product.
The state with no product images added
Click on the image to add images. Once you click to add images the WordPress media modal will appear and you will be able to select your images
You can select multiple images at once by holding shift or ctrl on your keyboard and clicking multiple images
Once you have selected your images you can click "Select" at the bottom right of the WordPress media modal to add those images to your product.
Product images added
You will notice on the very first image there is a blue star at the top right corner. This means that image will be the featured image on all product collection galleries and on the product page.
If you want to update the featured image. You can at anytime select the image you want to be the new featured image and click and drag it directly in front of the previously featured image
Drag and drop the image in front of the previously featured image
In the example above you will see the image I clicked and dragged is highlighted a slightly transparent black and as I drag a blue line appears in front of the image that it will be in front of once I release the left click on the mouse.

Manage SKU & Inventory

Directly beneath the images you will be able to set a SKU and quantity for the product
SKU & Quantity
Setting these values are easy.
  1. 1.
    With the SKU you or your warehouse/fulfillment center manager may want to follow some type of product for each product. There typically is no rules for this, as long as your team understands the distinction between all SKUs then you can name them anything you want.
SKUs are unique to each product and product variation. For example if you sell the same product but in 2 different sizes then that would be 2 different SKUs
Values added to SKU and quantity
In the example above I named the SKU FE-001 and set a value of 2,343 for the quantity. That is my available inventory for that product.

Physical Products

North Commerce will have the ability to sell both digital and physical products. By default our Physical Product toggle is disabled. In order to sell physical products and for us to calculate shipping prices as your customer's purchase your products you will need to toggle on shipping and set a weight for your product.
Physical Products Toggled On
If you are selling a digital product then you can ignore this step and continue on. More documentation will be released on digital products as we release more features.
Now in the above example you may notice that the weight is in Kg. If you would like to change this weight you can do so by going to Settings -> General​


The pricing section has 3 different inputs available to us.
  1. 1.
    Price - The total price of the product <--- This is the price your customers will pay
  2. 2.
    Compare at price - This is the a compare price you can set if you are doing some type of sale. Below is an example of how it would work. The compare price is set to $65.99 and the regular price is $31.99
    The compare price is the price with the slash through it
  3. 3.
    Cost per item - This is an internal number for just store owners. No customer's will see this. When you are running reports or want to calculate your profits per product we can easily help you by knowing the cost per item. We use this to calculate your margins.
    Pricing completely filled out

Product Variations

Product variations are a combination of options your customers can choose from for a particular product. For example, you may sell a product that comes in different sizes, colors or material. Each of these options for sizes, colors and materials make up your product variations.
Below is an exmaple of a drink that comes in either a 12 Pack or a 24 Pack
Directly below the pricing section you will see "Variants." If you have variations for your products you can toggle this on and begin adding your options.
  1. 1.
    First you want to toggle on variants
  2. 2.
    Click "Add another option" - Once you've click the "Add another option" button you will see this option creation menu appear.
Option creation menu
Before we move any further in the documentation for variants we need to explain what exactly each of these fields do.
  1. 1.
    Option name - This is the name of the option that will be displayed on the product page In the "Grabefruit Thyme" image above, you see there is a 12 pack and a 24 pack but just slightly above that you will see the label "Pack Size" <--- This is the Option name and how it is used within North Commerce. So you are able to label your options however you would like.
  2. 2.
    Option Type - This is the type of option template that will render on the product page.
    The option types are: Text, Size, Color Image. In the image below you can see the styles of each of the option types.
  3. 3.
    Option value - These option values are the different types of options for each variation. So in the picture above you have size options X-Small, Small Medium those are the values for that particular size option. When you are entering in a value you can type the value then when you are finished typing the value you can hit TAB or ENTER to save that selection as an option value.

Color Option Values

There is a unique feature available to color option types. When you create a color option type you are able to set the color of the swatch that will render on the product page.
By clicking on the color directly next to the option value you will be able to pick a color. You can add your own HEX codes, RGB, or HSL codes
Selecing colors for swatches for color option types
Once you have created your options for your variants you will seee them listed below the option creation menu and you can update the price, add SKUs and set inventory for each product variation.
Created Product Variations
If it is the case where you have 1000s of variations you can quickly update prices & weight on a option bases. Click back into the option that you want to update and select the title of the option and a dropdown will appear that will allow you to increase the price and weight of that particular option and then it will update all variations automatically that have that option.
Once you have completed updating the price or weight you can click save and then "Save and update option" to have it update across all variations.
Settings for options

Customs Information

In some cases there might be a requirement for you to ship internationally and in order to do so we need to collect some information from you about the product being shipped internationally for customs.
You can toggle on customs information and enter in the information for your product. North Commerce will then use this for all internationally orders to make sure we are printing all the right forms along with your shipping label.
Customs information Section

Tags & Categories

Tags & Categories of products are used to filter, sort, group or create collections of products. Tags will also be used with CRM integrations and customers that purchase a certain type of product will be tagged with the tags you have chosen for that product.