Skip to content

How to setup a product with editable area?

← Shopify Administration
1. To start adding new product:
  • Click Apps menu item.
  • Choose "LiveArt Embedded application" .
  • Click on "Product list" in  Products menu or dashboard list.
  

  • Click on the "Add product".
2. Enter the Name of new product.

3. Choose "Shopify Product ID" of the product which customizable LiveArt product will be associated with.

4. Choose "Shopify Product Variant ID" from available for selected Shopify product. (For proper customization of Shopify product LiveArt products should be added to all its variants.)

5. Choose "Category".

6. Choose "DPI".

7. Enter the description of the product (visible to the end user.) 

6. Set "Multicolor", "Hide Editable Area Border", "Resizable", "Show Ruler" .
  • If "Multicolor" is checked, the product color can be changed by user.
  • To hide editable area border check "Hide Editable Area Border", if not , the printable area border will be rendered. 
  • If "Resizable" is checked, the product dimensions can be changed by the user. Applicable to sign-based products. 
  • To show ruler for product check "Show ruler".
7. Upload thumbnail image, which will appear in the in-designer catalog.

8. Enter data (additional product fields to pass to front-end, e.g. material, cost, etc.)

9. Choose product sizes from list of available sizes.

10. Choose product colors from list of available colors.  

11. Choose "Editable Area Sizes" from list of available editable area sizes.

12. Click "Create" to save product.

13. Click "Update Shopify Products".

After saving it is possible to define product locations, colorizable elements and color locations.

1. To define locations:
  • Choose "Locations" tab.  
  • Enter location name (e.g. "Front", "Back", etc.)
  • Enter Editable Area coordinates (top lef x, top left y, bottom right x, bottom right y)  
  • Enter Editable Area Units (list of 2 numbers that represents width and height of editable area in real-life units, e.g. millimeters or inches, applicable to resizable products).
  • Enter Clip Rect coordinates (any object such as text, graphics places outsize clip rect will be clipped, usually coordinates are the same as for Editable Area).
  • Upload Image (background image) and Mask (the mask image, that will be applied to the product background image).
  • Upload Overlay (image with additional graphical markup, e.g. safe, trim, print areas, additional comments, this image is not included into svg design output).
  • Click "Add" to save location.
2. To define colorizable elements (applicable to multicolor products with properly prepared svg product image):
  • Choose "Colorizable elements" tab.
  
  • Enter Name (represents a name of colorizable element as it would appear in designer, e.g. "Left Sleeve").
  • Enter Class (should represent a CSS class of an element in SVG template and has format of ".class.fill", e.g. ".body.fill").
  • Choose colors from the available colors list.
  • Click "Add" to save colorizable element.
3. To define color locations (applicable to multicolor products with individual product image for each availble color)
  • Choose "Color Locations" tab.
  
  • Enter Name.
  • Upload image.
  • Choose color for color location (allowed formats: jpg, png, gif, svg).
  • Click "Add" to save color location.

Feedback and Knowledge Base

(thinking…)