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

Main options of CS-Cart "HTML5 Product Designer" add-on


After you read the instruction with comments on this page, you understand how to adjust the default settings of CS-Cart "HTML5 Product Designer" tool correctly.

To edit the main settings of "HTML5 Product Designer" add-on for CS-Cart make the steps below:

  1. Sign in the admin panel.
  2. Go to Add-on -> Manage Add-ons.
  3. Find the CS-Cart "HTML5 Product Designer" add-on in the list of installed add-ons. 
  4. Open the settings to edit it.


General settings explanation.

  • Product side width (px) and Product side height (px) - fixed values for the product side area. These figures will be assigned after a new product is created.

  • Unit length - you can choose the unit of measurements you used to in your country (inches or milimeters).
  • Ratio ("Unit of length" per pixel) - the number of pixels in the unit length you use. You need to specify how many milimeters or inches are in one pixel. Do not forget that every image on the screen in measured in pixels but your real products are measured in milimeters and inches. That is why you need to set the default number of units in one pixel to correlate the screen image with the real dimensions of the product, where the design will be printed. We advise you to read How to calculate the Ration first, to avoid mistakes.
  • Allow upload images for customers - if you do not tick this setting, your customers can't upload their own images on HTML5 Product Designer add-on. So, if you want to give your clients the opportunity to add different logos, photos, and other pictures, check the box. 
  • Layout orientation - the option that defines the location of the Product Designer tool panel on the product page on the storefront. Variants are:
  • Vertical - if you choose this variant, the Product Designer tool panel will be displayed on the right side from the customized product image. Price, "Add to Cart" button and etc. will be located above the Product Designer tool panel.
  • Horizontal - the Product Designer tool panel will be located under the customized product image. This variant of layout orientation is suitable for products with product side width of images more than 450 px.
  • Vertical 2 - the Product Designer tool panel will be located on the right side from the customized product image, but the price, buttons "Add to Cart", "Add to wish list" and etc. will be placed below the Product Designer tool panel.
  • Text price type - here you can define what will be the determinant text item to calculate the price. You can calculate the price:
  • per character - the text price depends on the character quantity.
  • per line - the text price depends on the line quantity.
  • per square - the text price depends on the square millimeters or inches of the text.
  • Text price - here you can enter the price for the text item selected above.
  • A maximum number of saved designs per customer (0-unlimited) - you should define how many design projects can be saved by one customer on the storefront.
  • Disable design descriptions in the invoice - if this box is checked, there will be no any shown design images and design descriptions in the invoice.


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
  • 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 create a product for the further customization?
  • 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