Interface Overview #
The Design Studio is the core workspace where customers personalize products using Product Designer App.
It provides an intuitive interface for adding text, images, clipart, and other design elements while displaying a real-time preview of the final product.
This guide introduces the main areas of the Design Studio, explains how they work together, and helps you understand the customer design workflow before exploring individual tools in more detail.
How the Design Studio Works #
The Design Studio combines product configuration, customer interactions, and live preview into a single interface.
The general workflow is:
Open Product
↓
Launch Design Studio
↓
Customize Product
↓
Live Preview
↓
Price Updates
↓
Add to Cart
↓
CheckoutEverything the customer creates inside the Design Studio is saved together with the WooCommerce order.
Main Interface Layout #
Although the layout may vary depending on your configuration or theme, the Design Studio generally consists of the following areas:
┌───────────────────────────────────────────────────────────────┐
│ Toolbar │
├────┬──────────┬────────────────────────────────┬──────────────┤
│Menu│Properties│ │ Cart Options │
│ Bar│ Panel │ │ │
│ │ │ Product Preview │ │
│ │ │ │ │
│ │ │ │ │
│ │ │────────────────────────────────│ │
│ │ │ Tools │ │
└────┴──────────┴────────────────────────────────┴──────────────┘Each area has a specific purpose that helps customers customize products efficiently.
Product Preview #
The Product Preview is the largest area of the Design Studio.
It displays:
- Product images
- Design Areas
- Customer artwork
- Product colors
- Live updates
- Masks and overlays
As customers make changes, the preview updates instantly.
The Product Preview represents the final appearance of the customized product but may include visual effects such as shadows, highlights, and masks that are not included in exported print files.
Toolbar #
The Toolbar contains the primary actions.
Depending on your configuration, it may include options such as:
- Back
- Add cart
- Save Design
- Download
- Reset
These controls help customers manage the editing session without affecting the actual design content.
Tools #
The Tools contains the primary editing actions.
Depending on your configuration, it may include options such as:
- Redo
- Undo
- Zoom
- Preview
- Change Views Button
These controls help customers manage the editing session without affecting the actual design content.
Menu Bar #
The Menu Bar provides access to the available design tools.
Common tools include:
- Text
- Upload Image
- Clipart
- QR Codes
- BAR Codes
- Products
- Templates
- Layers
The available tools depend on your Product Designer App configuration.
Administrators can enable or disable specific tools based on the product requirements.
Properties Panel #
When a design element is selected, the Properties Panel displays editing options for that object.
For example, text objects may include:
- Font
- Font Size
- Color
- Alignment
- Line Height
- Letter Spacing
- Curved Text
Image objects may include:
- Replace Image
- Crop
- Opacity
- Filters
- Flip
- Rotation
Only properties relevant to the selected object are displayed.
Product Views #
Products may contain one or multiple Views.
Examples include:
Front
Back
Left Sleeve
Right SleeveCustomers can switch between Views while maintaining the artwork already created on each side.
Each View represents a different printable surface configured in the Product Base.
Cart Options #
Depending on the product configuration, customers may be able to select options such as:
- Product Color
- Size
- Material
- Printing Method
- Quantity
Changing product options may update:
- Product preview
- Available Views
- Pricing
- Product variations
These options are synchronized with the WooCommerce product configuration.
Design Canvas #
The Design Canvas represents the editable area inside the selected View.
Customers can:
- Add text
- Upload images
- Insert clipart
- Move objects
- Resize objects
- Rotate objects
- Arrange layers
The Design Canvas is limited by the configured Design Area.
Objects placed outside the printable boundary may be restricted or clipped depending on the configuration.
Layers #
Every design element exists on its own layer.
Examples include:
Logo
Text
Image
BackgroundLayers determine which objects appear in front of or behind others.
Customers may be able to:
- Reorder layers
- Hide layers
- Lock layers
- Delete layers
Available layer controls depend on your Design Studio configuration.
Live Price Display #
When pricing rules are configured, the Design Studio displays the current product price.
The price may update automatically when customers:
- Customize additional Views
- Select another Printing Type
- Change product options
- Increase quantity
- Add printable components
The displayed price combines the WooCommerce base price with Product Designer App customization pricing.
Responsive Design #
The Design Studio is fully responsive and adapts to different devices.
Supported devices include:
- Desktop
- Laptop
- Tablet
- Mobile
On smaller screens, some panels may collapse or move into menus to maximize the available editing space.
Customer Workflow #
A typical customer experience follows these steps:
Choose Product
↓
Open Design Studio
↓
Select Product Options
↓
Customize Design
↓
Preview Product
↓
Review Price
↓
Add to Cart
↓
CheckoutThis workflow allows customers to visualize their design before completing the purchase.
Interface Customization #
Store administrators can customize the Design Studio to match their business needs.
Depending on your Product Designer App configuration, you can:
- Enable or disable tools
- Organize tool categories
- Configure available fonts
- Manage clipart collections
- Control upload permissions
- Configure product Views
- Set Design Areas
- Configure pricing behavior
This flexibility allows the Design Studio to support a wide range of products and printing workflows.
Best Practices #
To provide the best customer experience:
- Keep the interface simple.
- Enable only the tools customers need.
- Use clear product View names.
- Organize clipart into categories.
- Limit unnecessary options.
- Test the interface on desktop and mobile devices.
- Verify responsive layouts.
- Test the complete design workflow before publishing products.
Common Interface Issues #
Product Preview Does Not Load #
Check that:
- The Product Base is assigned.
- Product images are available.
- Views are configured correctly.
- Browser cache has been cleared.
Customers Cannot Add Designs #
Verify that:
- A Design Area exists.
- Editing tools are enabled.
- The correct View is selected.
- JavaScript errors are not preventing the editor from loading.
Tools Are Missing #
Review your Design Studio configuration.
Some tools may be disabled intentionally or hidden for specific products.
Product Views Do Not Change #
Check that:
- Multiple Views exist.
- View images have been configured.
- Product navigation is enabled.
Price Does Not Update #
Verify that:
- Pricing rules have been configured.
- Printing Types are assigned.
- Product options are synchronized correctly.
Interface Checklist #
Before publishing your store, confirm that:
- The Product Preview loads correctly.
- All editing tools work.
- Product Views switch properly.
- Design Areas are aligned.
- Product options update correctly.
- Live pricing works.
- The interface is responsive.
- Cart integration functions normally.
- Customer designs are saved successfully.
Next Steps #
Now that you’re familiar with the Design Studio interface, continue with the following guides:
- Text — Add and format text.
- Images — Upload and edit images.
- Clipart — Browse and insert artwork.
- Layers — Organize design elements.
- Views — Customize multiple sides of a product.
- Saving Designs — Save and restore customer designs.
- Orders & Printing — Generate production-ready print files.
