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 use cliparts in HTML5 Product Designer?


What files can I use as cliparts?

You can upload svg, png, jpeg or gif images in clipart categories that have a good enough quality to print.

How to create a clipart category?

You can divide cliparts into several categories. To create a clipart category, please sign in to the admin panel and go to Website -> HTML5 Product Designer -> click "Clipart categories".

If you have already opened the HTML5 Product designer section, click the "Clipart categories" in the right side menu. On this page, you can add clipart, edit/delete clipart categories and choose a clipart category status (Active or Disabled).

Click "+" button to create a new clipart category.

Fill out the necessary fields:

Name - Enter the name of the clipart category you are creating.

Location - Choose "Root level" if you are creating the main category. If you are creating a sub-category, select the main category for it.

User groups - You can define what user groups can use this clipart category.

Status - Active - clipart category will be visible to users; Disabled - invisible clipart category.

Position - The order of displaying (position of the clipart category relatively to the position of the other clipart categories).

Press "Save" button if you edit the clipart category and "Create" button if you create new clipart category.


How to add a clipart?

You can add a clipart in the Clipart categories section. As you point with the mouse cursor to the required clipart category, the setting sign will be shown between the clipart and status columns.

Click on this sign, and the context menu will appear. Choose the "Add" button. You will go to clipart section automatically and you will see the following form.

Here you can fill in all fields and create new clipart. 

Name - Type in the name of the clipart you want to create.

Price type -  Choose a price type. Choose "per unit" if you want to set a price for the whole clipart. Choose "per square centimeter" if you want to set a price for a square centimeter of the clipart.

Price ($) -  Depending on what you have chosen in Price type section, you should type in the cost of the clipart or the cost per square centimeter of the clipart. If you don't want to set a price for the clipart, your Price field value should be 0.00.

Location - Here you can choose a category for your clipart.

User groups - Here you can specify what user groups can use this clipart.

Status - Active - clipart will be visible to users; Disabled - clipart will be invisible.

Position - The order of display.

File - Upload your clipart file here.Use files with .svg .png .jpeg and .gif formats. 

Press Create button to create the clipart.


The same form for clipart adding you can get if you are in the Admin panel-> Website-> HTML5 Product Designer -> Cliparts -> "+" button.


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