Loading...
Close
Warning
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

Admin Panel. Features of CS-Cart HTML5 Product Designer tool.


 

"HTML5 Product designer" tab

After enabling the Product designer tool for a product (editing product page -> "HTML5 Product Designer" tab), you will see the below screen. Please, pay attention to pointing arrows:

On this page, you can check the Product Designer view in the customer area by clicking "Preview" button. It will help you to specify all the Product Designer tool settings correctly. To show all the settings, please, click on "Settings" button.This button is also helpful if you want to hide the settings.

Pay attention that Product area (the images of your customizable product) is on the left and HTML5 Product Designer tools display panel is on the right.

HTML5 Product Designer settings.

Click "Settings" button to show all settings and make changes. All settings are divided into 3 groups: general, prices, tools settings, that is why you will see three tabs.

HTML5 Product designer tools display panel

All settings are described below. We will start with tab General:

Product mode:

- T-shirt mode is used for many items (apparel, mugs, phone cases, cards, etc). In this mode, it is possible to set a product side (back, front, etc). A customer can use text, cliparts and user's images during the design creation. All text and clipart parameters are available to be edited (font, color, size etc.).

 - Sticker mode is used for vinyl graphics, lettering and printing. Only one side is available in this mode - front side of the sticker. Customer is allowed to use text, cliparts and images in the custom design. All text and clipart parameters are available to be edited.

Ratio (mm per pixel) - a number of pixels in the unit of length for a current product. The ratio is used to specify the compatibility between the real size of the product and the product size on the screen. Read here How to calculate the ratio.

Limit number of photos per product side (0-unlimited) - you can limit the number of photos a user is able to use on a product side. Use 0 if you don't wish to restrict the number of photos to be used.

Limit number of cliparts per product side (0-unlimited) - you can limit the number of cliparts a user will be able to use on a product side. Use 0 if you don't want to restrict the number of photos to be used.

Limit number of colors used for text and clipart (0-unlimited) - this setting is specially added for those who use tampography (pad printing or tampo printing) technology. This technology allows you to use usually one or two colors for printing from a range of different colors. For example, you limited the number of colors to 2. In the storefront, customer will see all colors available from a color palette but he will be able to use any two colors from this palette. An administrator will need to describe this technology in a description to eliminate questions from customers. Those who use tampo printing also should disable the Photo tab.

Product side width (px) - dimension of the "product area" where the image of your product is shown.

Product side height (px) - dimension of the "product area" where the image of your product is shown.

Allow upload images for customers - hide/show the "Upload photo" tab in the customer area.

Enable checking images resolution - tick this checkbox and customers won't be able to enlarge uploaded images if their resolution is less than the number of dpi specified in the next setting. We've set this restriction because it might be difficult to get a quality print if the initial photo with the low resolution was scaled up. Don't tick this checkbox and your customers will be able to upload and resize photos of any resolution.

Image resolution value for checking (dpi) - if you have checked "Enable checking image resolution", type in the number of dpi here. For example, type in 300 and customers won't be able to enlarge uploaded images if their resolution is less than 300 dpi.

Enable text panel - hide/show the "Add text" tab in the customer area.

Enable art panel - hide/show the "Add art" tab in the customer area.

Allow save designs for customer - tick this checkbox to allow customers to save their designs.

Enable clear design button - as you check this box, a little red cross will appear in the left top corner of the product area. This cross allows the customer to delete all design in two steps.

Layout orientation - here you can choose tools panel location as it will be shown in the customer area.

  • Vertical - tools panel is displayed on the right side from the product image. Price, "add to cart" button, etc. are displayed above the tools panel. 
  • Horizontal - tools panel is displayed under the product image. This layout orientation is good for products with product side width more than 450 px.
  • Vertical 2 - tools panel is displayed on the right side from the product image. Price, "add to cart" button, etc. are displayed below the tools panel.

Clipart thumbnail width (px) - here specify the width of a clipart thumbnail shown on Product designer tools panel.

Clipart thumbnail height (px) - here specify the height of a clipart thumbnail shown on Product designer tools panel.

Clipart list height (px) - here specify the height (length) of a list where clipart thumbnails are shown on Product designer tools panel.

Hide sizes tooltip for design elements - if you check this box, your customers won't see size changes during the 

Show prices for design elements - tick this checkbox to show additional prices for design elements.

Show help notice after photo uploading - tick this checkbox if you want to show your customer a prompt message after the image uploading.

The order of the tabs - you may decide what tab will be in the first place, or the last.

  • Add text
  • Add art
  • Upload photo.

Tab Prices

Text price - here you can set a price for the entered text. Price can be set

  • per a character (one letter) of text,
  • per line of text - you can set a price for 1 line, 2 lines, etc.
  • per a square centimeter of text (it may be a good option for the text of a very big size).

Use 0 if you don't want to set a price for text elements.

Image price - you can set a price for uploaded images. Price can be set

  • per a square centimeter of an image,
  • per size - click "Edit" to specify exact image width, height and the price for chosen parameters,
  • per item - you can set a fixed price for adding 1 photo, 2 photos, etc. The total price of the product will be increased depending on how many photos a customer added to his design. 

 Use 0 if you don't want to set a price for uploaded images.

Extra charge for the number of used colors - you can put a value on the number of used colors in a custom design. For example, you can ask for extra money if your customer uses more than 4 colors or 6 colors. To set the price click on the + button near the Extra charge value phrase. Then enter the demanded values in the fields. To delete the line with price click on the blue cross at the end of the line.

Extra charge for the number of used product's sides - you can put a value on the number of customized product sides. For example, you can ask for extra money if your customer adds custom designs not to one product side but to all of them. This case you can ask for extra money for each designed product side. To set the price click on the + button near the Extra charge value phrase. Then enter the demanded values in the fields. To delete the line with price click on the blue cross at the end of the line.

Printing discounts - click "+" button to set up printing discounts. These printing discounts don't apply to the whole product, they apply only to design elements the price for which was specified by admin. For example, a customer orders 4 t-shirts with an image that adds an additional price, the discount will be given for 4 images, not for the whole product, A table with your printing discounts will be shown in the storefront.

Note! Default CS-Cart functionality allows you to set up discounts for a whole product.

Allow change sticker sizes for a customer - if this checkbox is checked, the customer will be able to change the size of a sticker. This setting works only for the "Sticker" mode.

Minimum sticker width (mm) - works for the "Sticker" mode only. In the customer area, customers can set their own sticker dimensions. In this field, you can restrict the minimal width of a sticker which can be set by a customer in the customer area. 

Minimum sticker height (mm) - works for the "Sticker" mode only. In the customer area customers can set their own sticker dimensions. In this field, you can restrict the minimal height of a sticker which can be set by a customer in the customer area.

Maximum sticker width (mm) - works for the "Sticker" mode only. You can restrict the maximal width of a sticker which can be set by a customer in the customer area.

Maximum sticker height (mm) - works for the "Sticker" mode only. You can restrict the maximal height of a sticker which can be set by a customer in the customer area.

Tab Tools settings

Enable alignment tool -  tick this checkbox to make alignment tools available.Alignment tools

Enable flip tool - tick this checkbox to make flip tools available.Flip tools 

Enable order tool - tick this checkbox to make order tools available.Order tools

Enable rotation tool - tick this checkbox to make rotation tool available. When a customer adds a text, a clipart or a photo, by clicking on the object in the product area, the customer gets a frame with signs in the corners. A rounded arrow is a rotation tool. If you do not check the rotation tool box in the settings, your customers will not have a chance to rotate any object on the product area in the storefront.

Enable size tool - tick this checkbox to make size tool available. The sizing tool is two arrows in the corners of the frame on the image above.

Enable justify text tool - tick this checkbox to make justify text tool available.Justify text

Enable text style tool - tick this checkbox to make text style tool available. Text style tool

Show photo copyright condition - tick this checkbox to show photo copyright condition when a customer goes to "Upload photo" tab.

Enable photo effects tool - tick this checkbox to make photo effects tool available. Your customers can apply either black and white effect or sepia to their photos. Also, they can select no effects mode.

Enable clipart color panel - tick this checkbox to show clipart color panel. Don't tick this checkbox and customers won't be able to change the color of cliparts. It is a convenient setting if you upload colorful .png, .gif or .jpg images as cliparts. If you use such images as cliparts, disable clipart color panel because you don't need it.

Enable font color panel - tick this checkbox to show font color panel. Don't tick this checkbox and customers won't be able to change the color of the text added to the design.

 

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 
  • 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

    Up