LiveArt Control Panel

Description

LiveArt Control Panel (LACP) is the admin dashboard for LiveArt Designer which allows managing fonts, colors, graphics, templates, products, pricing, and orders. This documentation can help you to work with LiveArt Control Panel and setup everything correctly.

Setup Fonts

How to add font?

To start adding font:

  • Choose "Fonts" in the Explorer.

    menu_fonts.png

  • Click on the "Add new font".

    add_new_font.png

  • Enter the Name of the new font.

    font_name.png

  • Enter the Font family (name of typeface that is used by this font). This Font family value should be used in vector file preparation for the correct work.

    font_family.png

  • Upload font styles (Normal, Bold, Italic, Bold&Italic). Normal file is required for font preview only. Bold, Italic and Bold&Italic are optional. We recommend using the WOFF format as the one most cross-platform and cross-browser.

    Check WOFF documentation (opens new window) to get to know more about WOFF. Use Fonts converter (opens new window) if you need to convert your fonts to WOFF format.

    font_styles.png

    After adding the Normal file, this font preview will appear in the designer's fonts list. See the example:

    fonts_preview.jpg

  • Set Bold and Italic allowed (if you choose NO, it disables respective controls. You can choose NO if the font does not have bold or italic typefaces).

    bold_italic.png

    If you allow Bold and Italic, then these controls will appear in the designer. See the example:

    bi_preview.jpg

  • Upload Vector file (JS format). This file is mandatory for designer and is responsible for displaying the text with the selected font on the designer. Check how to prepare vector file for designer here (opens new window).

    vector_file.png

  • Click on the "Save" to save a new font.

    save_font.png

How to edit font?

To start editing font:

  • Choose "Fonts" in the Explorer.

    menu_fonts.png

  • Click on one of the listed fonts you want to edit.

    edit_font.png

  • Choose options you want to edit from the list of options.

    edit__font_options.png

  • Click on the "Save" to save the edited font.

    save_font.png

Setup Colors

How to add color?

To start adding color:

  • Choose "Colors" in the Explorer.

    color_menu.png

  • Click on the "Add new color".

    add_color.png

  • Enter the name of the color.

    color_name.png

  • Choose the color group ( See "How to add a color group").

    color_group.png

  • Select a color value from the color picker or enter Hex/RGBA value.

    color_value.png

  • Click on the "Save" to save a new color.

    save_color.png

How to edit color?

To start editing color:

  • Choose "Colors" in the Explorer.

    color_menu.png

  • Click on one of the listed colors you want to edit.

    edit_color.png

  • Edit options from the list of options.

    edit_color_options.png

  • Click on the "Save" to save the edited color.

    save_edited_color.png

Setup Color Group

How to add a color group?

The Color Group is a set of colors similar in shades. For example, you can create a color group called "Pink" and add there all pink shades - LightPink, HotPink, Pink, DeepPink and others.

To start adding color group:

  • Choose "Color Groups" in the Explorer.

    color_group_menu.png

  • Click on the "Add new Color Group".

    add_group.png

  • Enter the Name of the color group.

  • Click "Save" to save the color group.

    save_group.png

How to edit a color group?

To start editing the color group:

  • Choose "Color Groups" in the Explorer.

    color_group_menu.png

  • Click on one of the listed color groups you want to edit.

    edit_color_group.png

  • Enter the new Name of the color group.

  • Click on the "Save" to save the edited color group.

    save_edited_group.png

How to delete color group?

To start deleting color group:

  • Choose "Color Groups" in the Explorer.

    color_group_menu.png

  • Click on one of the listed color groups you want to delete.

    edit_color_group.png

  • Click on the "Delete" to delete the color group.

    delete_group.png

    As colors may belong to color groups you should decide what to do with them when deleting the color group as this may affect the products. Choose one of the options:

    • Delete all the colors linked to this group - the color group and all colors that belong to this group will be deleted.

    • Unlink and leave the colors without any group - the color group will be deleted but colors will not, they just will not belong to this color group.

    • Move colors to another color group - all colors that belong to the color group you want to delete will be moved to another color group you choose.

    delete_group_action.png

Setup Graphics

How to add graphics?

To start adding new graphics:

  • Choose "Graphics" from the Explorer.

    graphics_menu.png

  • Click on the "Add new Graphic".

    add_graphics.png

  • Enter the Name and Description (short description of the image, visible to the end-user) of the graphic.

    graphics_name.png

  • Choose Category (See "How to add the graphics category").

    graphics_category.png

  • Upload Image and Thumbnail (reduced-size version of the image). We recommend using a raster image 110x110px maximum. If the image proportions are larger the image will be automatically resized to fit the 110x110px.

    graphics_image.png

  • Choose Color Mode and Colors.

    graphics_color.png

    If you select Color Mode as "Multicolor: Configure Color Areas" then you will be able to add color areas. For every color area you will be able to set specific colors.

    graphics_color_mode.png

    1. Enter the Name of the color area.

    2. Enter the Query - a CSS id of the image element for the area you'd like to colorize. To find query:

      • Click on the Image:

        graphics_thumb.png

      • The image will be opened in a separate window. Click on the right mouse button and choose "Inspect".

      • Copy colorizable area id and paste it into the Query. For example, this graphic image has four colorizable areas so that you can apply colors for these areas respectively.

        graphics_id.png

        In admin area it will look:

        graphics_id_ap.png

    3. Select colors from the list:

      • Add Individual Colors - you can individually add colors from all the available colors in the admin panel. You can see all the available colors and configure them in "Colors" in the Explorer. Leave input blank to use all the available colors.

      individual_colors.png

      • Assign Color Group - you can select color group of the pop-up and all colors that are contained in selected color group will be available for Color Area. You can see all the available color groups and configure them in "Color Groups" in the Explorer.

      color_group.png

      • Color Wheel - arbitrary colors can be applied.
  • Click on Save to create a new graphic.

    save_graphics.png

How to edit graphics?

To start editing graphics:

  • Choose "Graphics" from the Explorer.

    graphics_menu.png

  • Choose the graphic you want to edit from the list.

    graphics_list.png

  • Edit options from the list of options.

    edit_graphics.png

  • Click on "Save" to save changes.

    save_edited_graphics.png

Setup Graphics Category

How to add the graphics category?

To start adding the graphics category:

  • Choose "Graphics Categories " from the Explorer.

    graphics_c_menu.png

  • Click on the "Add new Graphic Category".

    add_graphics_c.png

  • Enter the name of the Graphic Category.

    gc_name.png

  • Upload Thumbnail (reduced-size version of the image). We recommend using a raster image 110x110px maximum. If the image proportions are larger the image will be automatically resized to fit the 110x110px.

    gc_thumb.png

  • Select the parent category from the pop-up list.

    gc_parent_category.png

  • Click on "Save" to save the new graphic category.

    save_gc.png

How to edit the graphics category?

To start editing the graphics category:

  • Choose "Graphics Categories " from the Explorer.

    graphics_c_menu.png

  • Choose the graphic category you want to edit from the list of categories.

    gc_list.png

  • Edit options from the list of options.

    gc_edit.png

  • Click on "Save" to save edited options.

    save_edited_gc.png

Setup Product Category

How to add a product category?

To start adding a product category:

  • Choose "Products Categories" in the Explorer.

    pc_menu.png

  • Click on "Add new Product Category".

    add_pc.png

  • Enter the Name of the product category.

    pc_name.png

  • Upload a thumbnail (reduced-size version of the image) for the new product category. We recommend using a raster image 110x110px maximum. If the image proportions are larger the image will be automatically resized to fit the 110x110px.

    pc_thumb.png

  • Select the parent category.

    pc_parent_category.png

  • Click on "Save" to save the product category.

    save_pc.png

How to edit a product category?

To start editing a product category:

  • Choose "Products Categories" in the Explorer.

    pc_menu.png

  • Choose the product category you want to edit from the list of product categories.

    pc_list.png

  • Edit options from the list of options.

    pc_edit.png

  • Click on "Save" to save edited options.

    save_edited_pc.png

Setup Product

How to add a product?

To start adding a product:

  • Choose "Products" in the Explorer.

    p_menu.png

  • Click on "Add new Product".

    add_p.png

  • Enter the Name of the product.

    p_name.png

  • Upload the thumbnail (reduced-size version of the image). We recommend using a raster image 110x110px maximum. If the image proportions are larger the image will be automatically resized to fit the 110x110px.

    p_thumb.png

  • Select category from the list of categories. You can choose multiple categories and the Product will be present in these chosen categories.

    p_categories.png

  • Select a default template. This is the template that will be loaded for this Product by default, it should be created and configured at "Premade templates" (see "How to create premade templates"). When you open a product in the designer premade template design will be available for this product.

    p_default_template.png

  • Enter the description (short description of the product, visible to the end-user).

    p_description.png

  • Enter the quantity of the product for which you want to set a fixed price, and set the price for the quantity you entered. You can add as many prices as you need, just click on "Add new price".

    p_prices.png

  • Select a pricing rule. Pricing rule can be created at "Pricing Setup" (See "How to add a pricing rule"). Pricing rules are useful if you want pricing to depend on numbers of colors applied to the design, graphic sizes or the design sizes.

    p_pricing_rule.png

  • Set "Resizable". If "Resizable" - YES, the product dimensions can be changed by the customer.

    p_resizable_y.png

  • Add locations ( Area of the product that the customer can customize: front, back, sleeve or other locations):

    If Resizable - NO:

    1. Enter the name of the location.

    2. Upload the photo location of the product.

    3. Upload a mask (optional). This a picture that covers the main image to make visible only the required area that can be customized.

    4. Upload an overlay (optional). An overlay image could be cut lines, bleed lines, etc. It's an area that extends beyond the edge of your design that lets print the design without gaps.

    5. Enter editable width units. The real width value of the customizable area.

    6. Enter editable heights units. The real height value of the customizable area.

    7. Choose "Crop Design Beyond Printable Area" if you want to crop design (text or artwork) that is placed outside the printable area.

    8. Click on "Save Printable Area".

      You can do all described above for other locations you want to add to the product.

      p_locations_no.png

    If Resizable - YES. Editable area for resizable products is the whole product:

    1. Enter the Name of the location. You can add as many locations as you need. Just click on "Add new location".

      p_locations_y.png

    2. Choose the shape of the product. You are able to choose two shapes: Rectangle or Oval.

    3. Set the default width and height of the product. They might be changed during the designing process as the product is resizable.

    4. Select Mask type:

      • Semi-Transparent - the whole or part of the design that will be added beyond the product area will be visible as semi-transparent.

      • Cut Mask - the whole or part of the design that will be added beyond the product area will be cutted and not visible.

      • No Mask - design can be visible and added on the product and beyond the product area.

    5. Set Colorizable if you want to set color configurations for the product.

      p_location_no_configs.png

    6. Select Color Source:

      • Add Individual Colors - you can individually add colors from all the available colors in the admin panel. You can see all the available colors and configure them in "Colors" in the Explorer.

      • Assign Color Group - you can select the color group of the pop-up and all colors that are contained in the selected color group will be available for Color Area. You can see all the available color groups and configure them in "Color Groups" in the Explorer.

      • Color Wheel - arbitrary colors can be applied.

    7. Choose Default Color - the color in which the product background will be colorized by default.

    8. Set "Single Product Color" if you want to allow customers to apply the selected color to all locations.

      color_configs.png

    9. Select Size Type:

      • Free - the customer is free to change the product size but there may be some limitations:

        1. You can set "Disabled" and do not set limitations.

        If you enabled size limitation then:

        1. Set Min Size and Max Size values for the short side meaning the width of the product. Zero value means infinity.

        2. Set Min Size and Max Size values for the long side meaning the height of the product. Zero value means infinity.

        3. Set Step - means with what step will the values change.

        size_free.png

      • Fixed List - the customer will be able to select sizes from the list.

        1. Enter the Label of size - this is what the customer will be able to see in the designer.

        2. Enter the width and height of the product.

        3. You can add as many sizes as you want. You just need to click on "Add size" and create a new size.

        size_fixed.png

      • No Resize - the customer will be unable to change the size of the product.

  • Enter Data (The arbitrary object for a developer with additional product fields to pass to the front-end, e.g. cost, materials).

    1. Enter value Name and click on "Create".

      data_name.png

    2. Fill the field with preferred options:

      data_value.png

  • Add additional options ( Additional product options like materials, orientation and etc.):

    1. Enter the Name of an additional option.

    2. Select type:

      • Dropdown - the customer will be able to choose only one option variation.

      • Checkbox - the customer will be able to select multiple option variations.

    3. Add variations' Names.

    4. You can add as many option variations as you want, just click on "Add Variation".

    5. Choose "Bound to Feature" if appropriate. This means that selecting an option will affect product visualization or limitations of some decoration features. For example, you can choose "Enable Back" and bind this feature to the variation name. Then second (Back) location will be visible for this variation. If you do not bind "Enable Back" feature to the variation name there will be visible only Front location. Thus, you can make visible Front and Back location or only Front location according to specific variation.

    6. You can add as many options as you want, just click on "Add Option".

    additional.png

  • Add restrictions for images:

    1. Enter "Min DPU" value - the warning message will be shown if the customer will size raster image more than safe dimensions to meet suggested print quality standards.

    2. Min Quantity - enter the minimum quantity of the ordered product. If the customer will try to order less product quantity than you entered, the order will not be placed.

    restrictions.png

  • Set Colors configuration (If Resizable - NO):

    • Select Color Mode:

      • One Color Picker - for every specific color you set the designer will apply specific image:

        1. Select Color from all the available colors in the admin panel. You can see all the available colors and configure them in "Colors" in the Explorer.

        2. Select the Name of the available Locations.

        3. Upload an image of the location you have chosen.

        4. You can add colors to all the locations you created previously.

        5. You can add as many colors as you need, just click on "Add color".

        one_color_picker.png

      • Auto-Parse Colors (SVG only) - the designer will automatically separate the product by sub-areas which can be colored by colors you select for this mode. It is useful when the customer wants to add gradients.

        1. Enable color wheel if you want to add a chart with colors representing relationships between colors. You will not be able to add colors manually.

        2. If you do not want to use the color wheel and want to add colors manually you can select the desired colors available in admin panel. You can see all the available colors and configure them in "Colors" in the Explorer.

        auto_parse_colors.png

      • Configure Color Areas - you can select a set of colors for separate product areas. You will need to use query to configure color areas. To find the query:

        • Click on Image that represents the location:

          query.png

        • Click on the right mouse button and choose Inspect. Copy colorizable area id and paste it into the Query. For example, this product has three colorizable areas so that you can apply colors for these areas respectively.

          id.png

        1. Enter the Name of the area.

        2. Enter the Query - a CSS id of the image element for the area you'd like to colorize.

        3. Select colors from the list:

          • Add Individual Colors - you can individually add colors from all the available colors in the admin panel. You can see all the available colors and configure them in "Colors" in the Explorer. Leave input blank to use all the available colors.

          • Assign Color Group - you can select the color group of the pop-up and all colors that are contained in the selected color group will be available for Color Area. You can see all the available color groups and configure them in "Color Groups" in the Explorer.

          • Color Wheel - arbitrary colors can be applied.

        4. You can add as many color areas as you want, just click on "Add element".

        5. Choose colors that can be applied to the whole product from all colors available in the admin panel. You can see all the available colors and configure them in "Colors" in the Explorer.

        config_color_areas.png

  • Set Designer Configurations:

    1. Hide editable area border - if the product is resizable you can hide the editable area border.

    2. Show ruler - you can show the ruler, it can help customers to see the product size.

    3. Enable copy to back - enable copy objects to the second location.

    designer_configs.png

If Resizable - NO

  • Enable Names/Numbers - the customer will be able to add numbers and names to the product.

    numbers.png

  • Choose product sizes - you can set all sizes the specific product has. Also, you can enter the product size that is not listed and it will be automatically added to list. Customers will be able to order those sizes you set in the admin panel.

    product_sizes.png

How to edit a product?

To start editing a product:

  • Choose "Products" in the Explorer:

    p_menu.png

  • Choose the product you want to edit from the list of available products:

    p_list.png

  • Edit options from the list of options and click on "Save" to save changes.

    save_edited_p.png

Setup Premade Template

How to add a premade template?

To start adding a premade template:

  • Click on "Premade Templates" in the Explorer.

    pt_menu.png

  • Click on "Add new Premade Template".

    add_pt.png

  • Enter the Title of the premade template.

    pt_title.png

  • Choose the product for which you want to create a template.

    pt_product.png

  • Click on "Design Template" to start creating a template.

    pt_design.png

  • Design the template and click on "Save Template".

    You can apply some constraints for the currently selected object:

    • Required - Disallows customers to remove the object.

    • Fixed Position - Disallows customers to change the object's position or remove it.

    • Constrained - Restricts object to the configured constraints. The customers won't be able to move the object outside the constrained area or remove it.

    pt_example.png

How to edit a premade template?

To start editing a premade template:

  • Click on "Premade Templates" in the Explorer.

    pt_menu.png

  • Choose the premade template you want to edit from the list of templates.

    pt_list.png

  • Click on "Edit template design".

    pt_edit.png

  • Edit options you want and click on "Save Template".

    save_t.png

  • Click on "Save" to save edited template.

    save_edited_t.png

Setup Pricing Rule

How to add a pricing rule?

A pricing rule is a rule that can be applied to different products. You can use this feature when you want to set a specific price for the number of colors used in the design or per square unit.

To start adding a pricing rule:

  • Click on "Pricing Setup" in the Explorer.

    pricing_menu.png

  • Click on "Add new Pricing Rule".

    add_r.png

  • Enter the Name of the new pricing rule.

    r_name.png

  • Select products for which you want to apply the pricing rule. You can choose multiple products.

    r_products.png

  • Select type:

    • By colors - means that total price will depend on a number of different colors that are used in the design (for example, one green and one red text).

      Add configurations:

      1. Colors - enter the number of colors for which the current pricing rule should be applied.

      2. Quantity+ - enter the number of products for which such a rule will be applied. If you enter "1", then this rule will be applied only when there will be more than one product in the order.

      3. Price - enter the price for the number of colors for product quantity.

      4. You can add as many pricing rules by colors as you want, just click on "Add New Color Rule".

      r_colors.png

    • Area-based - means that total price will depend on the square of product or design area:

      Product area - price will be calculated depending on the whole product square, no matter how many artwork or texts you will add.

      Design area - price will be calculated depending on the square of every design that will be added to the product.

      • Enter "Area More Than" value - means that you can set prices for areas that are bigger that entered value.

      • Enter "Price Per Sq. Unit".

      You can add as many pricing rules by colors as you want, just click on "Add New Rule".

      r_square.png

How to edit a pricing rule?

To start editing a pricing rule:

  • Click on "Pricing Setup" in the Explorer.

    pricing_menu.png

  • Choose pricing rule you want to edit from the list.

    r_list.png

  • Edit options from the list of options.

    r_edit.png

  • Click on "Save" to save changes.

    r_save.png

Setup Design Idea

How to add a new design idea?

To start adding new design idea:

  • Click on "Design Ideas" on the Explorer.

    d_menu.png

  • Click on "Add new Design Idea".

    add_d.png

  • Enter Title and click on "Create Design Idea".

    d_title.png

  • Create a design idea and click on "Save Design Idea". Now, this design idea template can be added to any product as a ready design.

    d_example.png

How to edit a design idea?

To start editing a new design idea:

  • Click on "Design Ideas" on the Explorer.

    d_menu.png

  • Choose the design idea you want to edit from the list.

    d_list.png

  • Click on the "Edit Design Idea".

    d_edit.png

  • Edit options you want and click on "Save Design Idea".

  • Click on "Save" to save the edited design idea.

    d_save.png

Output files

How to find order output files?

The result of product customization is attached to the order, once the customer fulfills it. To obtain the output files:

  • Click on "Orders" in Explorer.

    o_menu.png

    There are two ways how you can download order output files.

    First way:

    • You can download respective links using Quick Actions:

    o_download.png

    Second way:

    • Click on the order you need to see.

    • Inside the order, you will see respective links.

    o_download_2.png

    Normally the files are named in the following name:

    1. Download Zip - a zipped package containing original SVG along with all referenced sources like gallery images or uploaded files. You can download and open it in Illustrator;

    2. Download PDF - an SVG preview and generated PDF file of the corresponding side. Please note that PDF requires the correct configuration of additional software.

Admin Setup

How to add a new admin?

To start adding new admin:

  • Click on "Admins" in Advanced.

    a_menu.png

  • Click on "Add new Admin".

    add_a.png

  • Enter Email and Password and click on "Save".

    a_save.png

How to edit admin information?

To start editing admin information:

  • Click on "Admins" in Advanced.

    a_menu.png

  • Choose admin you want to edit from the list.

    a_list.png

  • Edit the information and click on "Save".

    a_save_edited.png

Deletion

How to delete? (The process of deletion is the same for any option from the admin area)

As the process is identical you can see how to delete font, for example, and then do the same with other options you want to delete.

To start deleting font:

  • Choose "Fonts" in the Explorer.

    d_menu.png

  • Click on one of the listed fonts you want to delete.

    d_list.png

  • Click on the "Delete" button to delete the font.

    d_delete.png