Loading...

Admin area. Product designer settings and tools

 

"Product designer" tab

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

Product designer settings and tools

On this page you can use a button to preview your product in the customer area, manage Product designer settings ("settings" button on the top left corner), save changes, work with Product designer tools (Product designer tools display panel on the right) and work with your product (product area on the left).

 

Product designer settings

Click "settings" button to see the settings and specify necessary of them.

Settings

All settings are described bellow:

Product mode - this selectbox has 4 options: T-Shirt, Sticker, Engraving, Fixed objects. Each of these modes has its own features.

  • T-Shirt - suits for many products (apparel, mugs, phone cases, cards, etc). In this mode it is possible to set a product side (back, front, etc). Customer is allowed to use text, cliparts and user's images in design. All text and clipart parameters are available to be edited (font, color, size etc.).
  • Sticker - suits for vinyl graphics, lettering and printing. In this mode it is possible to use only one side - front side of the sticker. Customer is allowed to use text, cliparts and images in design. All text and clipart parameters are available to be edited.
  • Note! You can set up a shape in the "Sticker" mode by setting a canvas. Click "Add basic canvas" to create a square or rectangular shape. For round and oval shapes you need to specify a corner radius for the basic canvas (Add canvas -> Edit canvas). Choose a predefined canvas shape or create your own .swf canvas shape and upload it from your PC. Read more about How to add a canvas.

  • Engraving - suits for engraving business. It is possible to choose an image where engraving will be made (don't forget to upload additional images in editing product page -> Images tab). Customer is allowed to use only text in design. Text parameters (font and size) are available to be edited. Text added on a product in "Engraving" mode appears on a product with engraved text effect.

    Note! engraving doesn't suppose any color variants.

  • Fixed objects - suits for personalizing products with fixed text or image position (greeting cards, business cards, calendars, etc.). In this mode it is possible to specify several product sides (additional product images). Customer can change only the text or image position of the predefined design.

Ratio - amount of pixels in the unit of length for a current product. 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

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.

    Vertical 1

  • Horizontal - tools panel is displayed under the product image. This layout orientation is good for products with product side width more than 450 px.
  • Horizontal

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

    Vertical 2

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

Limit number of cliparts per canvas (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 wish restrict the number of cliparts 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 from this palette. 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.

Theme - in this select box you can choose a suitable template scheme for the Product designer decor. For example, choose light or dark templates which will be more suitable for the main design of your store.

Product side width / height (px) - dimensions of the "product area" where the image of your product is displayed.

Style of the typing text -  two variants here:

  • Word wrap - means that text will be moved to a new string if the width of the text area is less than the width of a text string.
  • Fit to width - means that text size will be increased / decreased depending on the width of the text area.

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

Enable checking image 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 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.

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.

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

Sticker price (per square centimeter) - you can set a price per a sticker square centimeter. This setting works only for the "Sticker" mode. Use 0 if you don't want to set a price per a square centimeter of a sticker.

Allow change sticker sizes for customer - if this checkbox is checked, 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.

Printing discounts - click "Edit" 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.

Set up printing discounts in the admin back-end

Set up printing discounts

Printing discounts table in the storefront

Printing discounts in the storefront

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

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

Allow generate QR codes for customers - Tick this checkbox and customers will be able to write the text for QR code and generate the code picture ("Add clipart" tab).

A QR code is a matrix barcode (or two-dimensional code), readable by QR scanners, mobile phones with a camera, and smartphones QR code.

QR code price - you can set a price for QR codes generated by customers. Total product price will be increased depending on your price settings. Price can be set:

  • per a square centimeter of a QR code,
  • per size - click "Edit" to specify exact QR code width, height and the price for chosen parameters,
  • per item - you can set a fixed price for adding 1 QR code, 2 QR codes, etc. 

Enable progressive download the thumbnails of photos and cliparts - if this checkbox is ticked, clipart and photo thumbnails will be loaded on Product designer tools panel one pack after another according to the scrolling . If this checkbox is not ticked, clipart and photo thumbnails will be loaded all at once.

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 arc tool - tick this checkbox to make arc tool available Arc tool.

Allow edit text in place (arc tool must be disabled) - tick this checkbox and text will be added straight to the product image (it works only if arc tool is disabled). If this checkbox is not ticked, you and your customers can write/edit text in the Product designer tools display panel.

Enable rotation tool - tick this checkbox to make rotation tool available Rotation tool.

Enable size tool - tick this checkbox to make size tool available Size tool.

Allow change font in "Fixed objects" mode - works for "Fixed objects" mode only. Tick this checkbox and you/customers will be able to change text font in "Fixed objects" mode.

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.

Enable corner radius tool - tick this checkbox to make corner radius tool available Corner radius tool - this tool works for uploaded images only.

Enable spacing tools - tick this checkbox to make spacing tools available Spacing tools.

Enable layers panel - tick this checkbox to make layers panel available Layers panel. This panel is located in the top right corner of Product designer tools display panel.

Enable search by cliparts - tick this checkbox to allow customers to search by cliparts.

Show clipart names - tick this checkbox to show clipart names.

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

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

Display color palettes without scrolling - tick this checkbox to display color palettes without scrolling.

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.

Enable fixed top position for text - tick this checkbox and the text frame will be expanded downwards when typing the text in (fixed top position of the frame). Don't tick this checkbox and the text frame will be expanded upwards and downwards when typing the text in (fixed center position of the frame).

 

Product designer tools display panel

You can see Product designer tools panel on the right in "Product designer" tab. See below how it looks like:

Product designer tools display panel

On Product designer tools panel you can see necessary buttons, tabs and tools for manipulation.

Most tools are self explanatory because they are shown as images. We will pay attention to the following elements:

"Add product side" button - appears if you have chosen "T-shirt" or "Fixed objects" mode. For "Engraving" mode you will see "Choose image" button with the same functionality. Click "Add product side" button to add a product side image/images which will be available for personalization. Note! You should upload additional images first.

"Add canvas" button - it is necessary to add canvas to specify the designing area of a product.

"Add text", "Add art", "Upload photo" tabs - click the necessary tab to add/edit text, add/edit cliparts or upload photos/images from a computer.

Font - from the drop down list you can choose one of your created font categories. Fonts from a chosen category will be available for you/customers to choose from. See the example below:

Choose a font category

Font color - here you can choose one of your created color palettes. Colors from a chosen palette will be available for the changing of a font color. See the example below:

Choose a color palette

Clipart color - click "Add art" tab and you will see "Clipart color" element. Choose the necessary color palette from the drop down list and you/customers will be able to change a clipart color using colors from a chosen palette.

Background color - this element appears in "Add text" tab if  "Sticker" mode is chosen. Choose the necessary color palette and you/customers will be able to change a sticker background color using colors from a chosen palette.

 

Up