Artworks are base graphic resources (SVG or image files) that help customers design faster and more easily in the Design Studio. This document explains how to enable artworks, how customers add artworks, and all available artwork options in the editor.

Note: Artworks are optional. If you do not enable or add artworks to the library, customers can still design using text, uploads, and other tools.

Prerequisites: Enable Artwork in Design Studio #

Before artworks can be used in the Design Studio, make sure:

1. Show Artwork is enabled in the product or editor configuration.
2. Artwork files (SVG, PNG, JPG) are already added to the Artwork Library in the admin panel.

Once enabled, the Artworks menu will appear in the Design Studio.

Add Artwork in Design Studio #

Open the Artwork Library #

In the Design Studio:

• Click Artworks in the left toolbar (1)
• Select a folder to open its artwork list (2)

Add Artwork to the Canvas #

• Click on the artwork you want to use
• The artwork will be added to the active design area

You can add multiple artworks to the same design and freely move, resize, or edit them.

Artwork Layer & Options #

When an artwork is added, it becomes a layer in the design. To show artwork options:

• Click the artwork layer on the canvas to activate it
• The Artwork Options panel will appear

Artwork Options Explained

Below are all available options for artwork layers in the Design Studio.

Change Artwork Opacity (3)

• Adjust transparency using the Opacity slider
• Useful for watermark effects or subtle overlays

Supported: SVG, PNG, JPG

Change Artwork Color (SVG only) (4)

• Available only for SVG artworks
• Allows changing colors directly in the editor
• SVG files must use attribute-based styles (fill, stroke)

Bitmap images (PNG, JPG) do not support color editing.

Duplicate Artwork (5)

• Duplicate the selected artwork
• Keeps size, color, and position
• Useful for repeating patterns or mirrored designs

Lock Artwork (6)

• Lock the artwork to prevent moving, resizing, or editing
• Ideal for background graphics or fixed branding elements

Artwork Alignment (7)

• Align artwork relative to the design area:
  • Left
  • Center
  • Right
  • Top
  • Middle
  • Bottom

Helps ensure precise and professional layouts.

Delete Artwork (8)

• Remove the selected artwork from the design
• This action only affects the current design, not the artwork library

Where Artworks Are Used #

• Artworks appear in the Artworks panel inside Design Studio
• Customers can:
  • Add artworks to products
  • Customize size, color (SVG), and position
  • Combine artworks with text, images, and templates

Artworks help customers design faster, especially when offering icons, logos, shapes, or decorative elements.

Best Practices #

• Lock important artworks to avoid accidental changes
• Use SVG artworks for best customization (color editing)
• Optimize image size to keep the editor fast
• Organize artworks into folders for easy browsing