Overview #
The Design Studio is a powerful tool that allows customers to edit designs, add custom elements, and create unique product ideas before adding items to the cart or submitting a quote.
Customer designs can be saved on the server, then downloaded for printing or reused later.
To get started, it is important to understand the Design Studio layout, which is divided into six main sections.
The Layout Settings allow you to manage and control all functional sections of the Design Studio layout.
From this settings panel, you can enable, disable, or customize layout components to match your store’s workflow and user experience.
Design Studio Layout Overview #
The Design Studio interface consists of the following six blocks:
- Top Bar (1)
- Tools Bar (2)
- Options Bar (3)
- Design Area (4)
- Product Options & Buy (5)
- Bottom Bar (6)
Each section plays a specific role in the design workflow.
Top Bar #
The Top Bar provides basic design management actions.
Available Actions
- Back – Return to the WooCommerce product page (1).
- Designs – Load previously saved designs for the current product (2).
- Save – Save the current design to your design list. Saved designs can be reloaded later (3).
- Download – Download the design file to your computer. Supported formats include PNG, SVG, and PDF, depending on backend settings (4).
Tools Bar & Options Bar #
*) Tools Bar
The Tools Bar contains all tools used to add and create design elements. Available tools include:
- Templates – Ready-made design templates that can be added with one click and easily customized (1).
- Text – Add custom text to the design and edit font, color, size, position, and style (2).
- Artworks – Add graphic elements from the artwork library and customize their appearance (3).
- Photos – Upload images or select from the photo library and adjust size, position, and colors (4).
- Teams – Add team member names and numbers, and set sizes or product attributes per member (5).
- QR Code – Add QR codes and customize content, color, and display options (6).
- Barcode – Add barcodes and customize content, type, color, size, and options (7).
- Layers – Manage, select, and reorder design layers for precise editing (8).
*) Options Bar
The Options Bar displays detailed settings and resources for the currently selected tool or layer.
For example, when editing text, it shows font selection, size, color, and style controls.
Design Area #
The Design Area is the main workspace where all printable elements appear, including text, images, artworks, QR codes, and barcodes.
Key Notes
- Design elements are placed within a fixed printable area on the product.
- A product may contain multiple design areas, depending on its configuration.
Bottom Bar #
The Bottom Bar provides tools to make the design process easier and more efficient.
Available Controls
- Change product views for design (1)
- Enable or disable the ruler (2)
- Undo / Redo design actions (3)
- Preview the design on the product (4)
- Zoom in / Zoom out for detailed editing (5)
- Enable or disable fullscreen mode (6)
Product Options & Buy #
The Product Options section allows customers to configure product details before purchasing.
Select Product Options
- Change product color or other available attributes (1)
- Select quantity (2)
- Review the product price (3)
- Click Continue to proceed (4)
Finish Design #
On the next step, customers can:
- Review selected product options (1)
- Add additional product variants (2)
- Add a note to the order (3)
- Click Add to cart to purchase (4)
or - Click Request a quote to submit a quotation request (5)
After completion, customers are redirected to the checkout cart.
Summary #
The Design Studio layout is designed to provide a smooth and intuitive workflow, allowing customers to create, customize, preview, and finalize their designs efficiently before checkout or quotation.
