Cookies are used on this site to provide the best user experience. If you continue, we assume that you agree to receive cookies from this site. OK

How to create a product for the further customization?


To make a product for its further personalization by customers through your website, please, follow the instruction below:


1. Prepare the HTML5 Product designer tool for future work

"HTML5 Product designer" add-on doesn't have the collection of fonts, colors and cliparts by default. Thus, first of all, it is necessary to add these elements that will be used further for the design creation.

Sign in the admin panel. Go to Website -> HTML5 Product Designer.

Read more about how to:


2. Create a category for a new customizable product.

In order to create a customizable product, first, you should create a category for this product.

To create a new category in CS-Cart go to Products -> Categories. Click on "+" button to add a new category.

Fill in all fields on the appeared page.

Choose the category name, its location and an image for it, if necessary. You can also add a description for the category, choose a page title, META description, and keywords, etc.

Once the new category is created you can create a product for personalization by customers.


3. Create a product.

In the admin panel go to Products -> Products. Click on "+" button to create a new product in CS-Cart. You will see the page:

Complete the following fields:

Name - The name of your customizable product (e.g. T-shirt).

Categories - Choose a category for your product.

Price - Set up your product price.

Full description - Add a description to your product.

Status - Choose a status: Active - everybody can see your product; Hidden - you can preview the product in the customer area but customers will not see the product page; Disabled - neither you nor your customers can see the product in the customer area.

Images - Upload the main image for your product.

Also, if necessary, fill out Options settings, Pricing/inventory, SEO/Meta data, Avalability.

Important! Scroll down the page for "Extra" section and set a value for "Product details view" field - >"Product designer template".

See below:

Click Create button to create the product. After creating a product you will be able to edit it.


4. Upload additional images.

You have to upload extra product images where your customers will create or add their own design.

To upload the additional images to a product go to your product editing page (Products-> Products. Click "Edit" link next to your product).


Choose Images tab and upload the product images where the customers are supposed to create their own design. For example, if you want to sell t-shirts with a custom design, you should upload 3 images of this t-shirt: t-shirt front view, t-shirt back view, t-shirt sleeve view. If you sell t-shirts of different colors, you can upload images for each color.

Please, do not forget to Save the changes.


5. Enable HTML5 Product Designer add-on for your customizable product.

On the product editing page choose the "HTML5 Product Designer" tab and click "Enable for this product" checkbox.

The HTML5 Product Designer tool is active and you will see the HTML5 Product Designer interface on the product detail page on the storefront.

Your following steps are to specify the HTML5 Product Designer settings and to add a product side and canvas.


P.S. If you did not find the necessary information, please, check other sections:

  • The installation/upgrade of CS-Cart "HTML5 Product Designer" add-on
  • Main options of CS-Cart "HTML5 Product Designer" add-on 
  • Admin panel. Features of CS-Cart HTML5 Product Designer tool.
  • How to activate HTML5 Product Designer tool for a specific product?
  • How to set up fonts in CS-Cart HTML5 Product Designer?
  • How to set colors to canvas and elements?
  • How to use cliparts in HTML5 Product Designer?
  • How to calculate the Ratio correctly?
  • How to add a product side and a canvas?
  • How to create and use options for customizable products?
  • The printable image and order details page features.

    This instruction refers to our CS-Cart module Product Designer maker.

    online design maker