Layouts #
The Design Studio Layout controls how the Product Designer App interface is organized and displayed to customers. Understanding the different areas of the Design Studio helps store administrators configure products more effectively and provides customers with a smoother design experience.
The Design Studio is divided into several functional sections, each responsible for a specific part of the customization workflow.
This guide explains the purpose of each area and how customers interact with them during the design process.
Design Studio Layout Overview #
The Design Studio interface consists of six primary sections:
1. Top Bar
2. Tools Bar
3. Options Bar
4. Design Area
5. Product Options & Buy
6. Bottom BarEach section has a specific purpose and works together to provide a complete design experience.
Top Bar #
The Top Bar contains the main design management actions.
This section allows customers to manage their designs without leaving the Design Studio.
Typical actions include:
- Back to Product Page
- Load Saved Designs
- Save Current Design
- Download Design Files
Back #
Returns the customer to the WooCommerce product page.
Useful when customers want to review product information before continuing their design.
Designs #
Displays previously saved designs for the current product.
Customers can:
- Open saved designs
- Continue editing previous work
- Reuse existing designs
Save #
Saves the current design to the customer’s design list.
Saved designs can be reopened and modified later.
Download #
Allows customers to download the current design.
Depending on system settings, supported formats may include:
- PNG
- SVG
This feature is commonly used for design approval or proofing workflows.
Tools Bar #
The Tools Bar is the main resource library of the Design Studio.
Customers use this section to add new design elements to their product.
Available tools may include:
- Templates
- Text
- Artwork
- Photos
- Teams & Numbers
- QR Codes
- Barcodes
- Layers
The available tools depend on your Product Base configuration and enabled Design Studio features.
Templates #
Load pre-designed layouts that customers can personalize.
Templates often contain:
- Editable text
- Photos
- Artwork
- QR Codes
- Barcodes
Text #
Add and edit text elements.
Customers can customize:
- Fonts
- Colors
- Sizes
- Styles
- Arc Text
Artwork #
Browse the Artwork Library and add graphics to the design.
Artwork may include:
- Logos
- Icons
- Shapes
- Decorative graphics
Photos #
Upload personal images or choose photos from the Photo Library.
Customers can:
- Upload files
- Crop photos
- Resize images
- Replace image placeholders
Teams & Numbers #
Create personalized team products.
Customers can:
- Add player names
- Add jersey numbers
- Select sizes
- Configure team information
QR Codes & Barcodes #
Generate machine-readable codes directly inside the Design Studio.
Customers can customize:
- Content
- Colors
- Size
- Display options
Layers #
Manage the order of design elements.
Customers can:
- Reorder layers
- Lock elements
- Delete elements
- Select hidden objects
Options Bar #
The Options Bar displays settings related to the currently selected tool or design element.
This panel changes dynamically based on what the customer is editing.
Text Options #
When editing text, the Options Bar may display:
- Font selection
- Font size
- Text color
- Text styles
- Alignment
- Letter spacing
Photo Options #
When selecting a photo, customers may see:
- Crop controls
- Resize settings
- Rotation
- Opacity
- Flip options
Artwork Options #
For artwork, the panel may include:
- Color controls
- Size controls
- Alignment tools
- Layer controls
QR Code & Barcode Options #
Customers can edit:
- Content
- Barcode type
- Colors
- Display settings
The Options Bar serves as the primary editing panel for all design elements.
Design Area #
The Design Area is the main workspace where customers create their design.
All design elements are placed and edited within this area.
Printable Area #
The Design Area represents the actual printable region of the product.
Customers can add:
- Text
- Photos
- Artwork
- QR Codes
- Barcodes
- Team Names & Numbers
Only elements placed within the configured Design Area will be included in the final print file.
Product Views #
A product may contain one or multiple views.
Examples include:
- Front
- Back
- Left
- Right
- Sleeve
- Inside
- Outside
Each view can have its own Design Area, product image, and print configuration.
Live Product Preview #
The Design Area updates in real time.
Customers can:
- Drag elements
- Resize objects
- Rotate layers
- Move content
- Preview final placement
This helps customers understand exactly how the finished product will appear.
Product Options & Buy #
The Product Options & Buy section allows customers to configure product details before purchase.
Product Options #
Customers can select available options such as:
- Product Colors
- Sizes
- Materials
- Product Attributes
These options are configured within the Product Base and WooCommerce product settings.
Quantity #
Customers can specify the desired quantity before ordering.
For team products, quantities may be generated automatically based on team member information.
Price Summary #
The Design Studio displays the current product price.
Pricing may change based on:
- Product options
- Quantity
- Printing rules
- Design size
- Number of colors
- Design elements
Price updates automatically whenever the design changes.
Continue #
After reviewing the design and product configuration, customers can continue to the final order review step before adding the product to the cart.
Bottom Bar #
The Bottom Bar contains productivity and navigation tools that improve the design experience.
View Selector #
Switch between different product views such as:
- Front
- Back
- Sleeve
- Inside
This allows customers to customize multiple printable areas.
Ruler #
Enable or disable rulers for more precise design positioning.
Useful for professional design workflows.
Undo & Redo #
Quickly revert or restore design changes.
Customers can experiment without worrying about losing their work.
Product Preview #
Displays a realistic preview of the customized product.
This helps customers verify their design before ordering.
Zoom Controls #
Zoom in and out of the Design Area for detailed editing.
Useful when working with:
- Small text
- Logos
- QR Codes
- Complex layouts
Fullscreen Mode #
Expands the Design Studio to the full browser window.
Provides a larger workspace and improved editing experience.
Typical Customer Workflow #
A typical customer journey through the Design Studio follows this sequence:
Top Bar
↓
Tools Bar
↓
Options Bar
↓
Design Area
↓
Product Options & Buy
↓
Bottom Bar Review
↓
Add to CartThis workflow allows customers to create, customize, preview, and purchase personalized products efficiently.
Best Practices #
For the best user experience:
- Enable only the tools required for the product.
- Organize templates, photos, and artwork into categories.
- Keep the Design Area aligned with the actual printable region.
- Test all product views before publishing.
- Verify pricing updates correctly.
- Test the complete design and checkout workflow.
- Optimize the layout for both desktop and mobile devices.
The six Design Studio layout sections work together to create a streamlined customization experience, helping customers design products quickly while ensuring accurate production-ready output.
