fbpx

Creating a new Product

This guide will cover the creation of a new product in the administration dashboard for this website.

Table of Content

Requirements

Before creating a product, you should make sure you have all of the following assets and information:

1.

Product thumbnail and other images (300x300)
The main product thumbnail (shot of the rice package) should be a square image with transparent background. 300x300 is recommended size for best visual results.

2.

Product banner (hero image) (1920x480)
Like on most pages of the website, there is a banner at the top of the page. The hero can be removed, can be an image, or it can be a slider. In the case of an image or a slider, you'll want to try to keep the images to a size of 1920x480 (or any size with the same aspect ratio).

3.

Product description
The product description is seperated into 3 pieces of information:

  1. The name of the product (aka: the title);

  2. A one-liner that best describes the product;

  3. A small paragraph that dwells a bit deeper in details;

  4. The different package sizes available of the product

  5. The cooking time

4.

Product Details
The last bit of information required is those displayed inside the tabs under the product's description:

  1. The product's stickiness;

  2. The different attributes of the product;

  3. The different certifications;

  4. The product's label shot (image of about 300x300)

Adding the Product

1.

Navigate to the Product section
which can be found at the top of the sidebar;

Navigating to the Products

Navigating to the Products

2.

Click on 'Add New'
located in the sidebar under 'Products' or at the top of the page, next to 'Products';

Different ways to add a new Product

Different ways to add a new Product

3.

Enter the title
of the product at the top of the "Add New Product" page;

Naming the Product

Naming the Product

4.

Setup the hero
of the product, make sure you set the 'Hero Size' to 'Small' if you want to display a hero, to keep consistency over the whole site.

The Hero Section

The Hero Section

5.

Add product thumbnail
and all the other images which will be shown in the slider on the product's page.

The product image selection section

The product image selection section

TIP:
You can select multiple images in the image selection dialog.

Selecting multiple images

Selecting multiple images

6.

Assign the filters
which best represent this product. Note that some filters like cooking time, stickiness and package size have special behaviors like icons or range indicators, so make sure to include at least one of each of those.

Assign filters to product

Assign filters to product

7.

Add the product information
in the 3 set of tabs.

In the first tab, you can add the one-liner text which will appear bold above the description and the said description which should be a short paragraph.

First Tab - Product Description

First Tab - Product Description

In the second tab, you can add as many product attributes as desired.

NOTE:
In order to get an italic paragraph, please omit the title. If an attribute has no title it will be rendered green and italic.

Second Tab - Attributes

Second Tab - Attributes

IMPORTANT:
The 'Add Attribute' button will NOT save your attributes. Make sure you use the 'Publish/Update' button located at the top of the right sidebar.

In the third tab is where the label image and the nutritional facts are set.

IMPORTANT:
The same notes and warnings from the TAB 2 apply here.

Third Tab - Nutritional Information

Third Tab - Nutritional Information

8.

Configuring the certifications
by checking the certifications that apply to this product.

The certifications are located in the right sidebar next to the product image selector.

The product certification configuration

The product certification configuration

9.

Save
by clicking on the Publish/Update button located above the "Product Certifications" box.

IMPORTANT:
You really need to do this otherwise you will lose all your changes once you leave the page.

Publishing / Saving the Product

Publishing / Saving the Product