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 and use options for customizable products?


Every product has its options or option combinations. The customizable products are not exceptions. For example, if a customized product comes in different colors, you need to create a color option and assign different color images to the product sides. A color option is a must-have thing for such items as t-shirts, mugs, caps, bags and other products which can have different colors.


To create options for a product:

1. In admin panel go to Products ->Products-> Edit your Product -> tab "Options".

2. Choose "Add option" button and create the required option or option combinations. 

This is a standard functionality of CS-Cart. Please, check the Cs-Cart manual to learn more about option and options combinations.

After your option or options are ready, you should go to the "HTML5 Product Designer" tab to specify images for each option variant.


How to assign options to a customizable product?

1. As you created the option in the "Options" tab, you will see this option on HTML5 Product Designer tools display panel. See the example below:

2. Now you should add product sides for each option variant.

3. Click on Add Product Side button

Note! Before adding a product side you have to upload additional images of your product for each option variant. You can do it on Product editing page -> "Images" tab.

4. Add name, extra charge (if necessary) and images for a product side.

Note! If you have different product side images of the same color (in our example - front and back images), choose front images first and then press "OK" button. Then repeat all steps for back images, etc. 

5. After adding all product sides, don't forget to press "Save" button which is located in the left down corner of the "HTML5 Product Designer" tab screen.

 6. You can edit or delete product sides with all images for different option variants by clicking on the signs on the product side icons. 


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 create a product for the further customization?
  • How to calculate the Ratio correctly?
  • How to add a product side and a canvas?
  • The printable image and order details page features.

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

    online design maker