This guide will cover the creation of a new product in the administration dashboard for this website.
Table of ContentBefore creating a product, you should make sure you have all of the following assets and information:
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.
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).
Product description
The product description is seperated into 3 pieces of
information:
The name of the product (aka: the title);
A one-liner that best describes the product;
A small paragraph that dwells a bit deeper in details;
The different package sizes available of the product
The cooking time
Product Details
The last bit of information required is those displayed inside
the tabs under the product's description:
The product's stickiness;
The different attributes of the product;
The different certifications;
The product's label shot (image of about 300x300)
Navigate to the Product section
which can be found at the top of the sidebar;
Navigating to the Products
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
Enter the title
of the product at the top of the "Add New Product" page;
Naming the Product
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
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
TIP:
You can select multiple images in the image selection dialog.
Selecting multiple images
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
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
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
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
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
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