Design Studio: Creating Your First Custom Product

The Design Studio is the heart of Composerie. It is where you build the templates that power your personalized products — defining exactly what customers can customize, how their changes appear in real time, and what gets sent to your print provider. This tutorial walks you through building a complete custom product from scratch.

Opening the Design Studio

From your Composerie dashboard, navigate to Products > Create New. Select a base product from your synced Shopify catalog, choose your print provider, and click Open Design Studio. The editor loads with a blank canvas sized to your product’s print area.

The interface has three main sections:

• Left panel — Block library and layer list
• Center — The interactive canvas
• Right panel — Properties and constraints for the selected block

Understanding Block Types

Blocks are the building elements of every design template. Each block type serves a different purpose, and you can combine them freely to create complex layouts.

Text Blocks

Text blocks display static or customer-editable text on the product. When you add a text block, you configure:

• Default text — What appears before the customer makes changes
• Font family and size — Choose from the built-in font library or upload custom fonts
• Color — Set a fixed color or let customers choose
• Alignment and spacing — Control how text flows within the block
• Character limits — Prevent customers from entering text that overflows the design area

Text blocks are the most common personalization element. They work well for names, dates, monograms, quotes, and short messages.

Image Blocks

Image blocks let you place static graphics or allow customers to upload their own photos. Configuration options include:

• Default image — A placeholder or fixed graphic
• Upload settings — Minimum resolution, accepted file types, maximum file size
• Crop behavior — Whether the image fills the frame, fits within it, or allows manual cropping
• Filters — Optional effects customers can apply to uploaded images

For best results, set a minimum resolution that matches your print provider’s DPI requirements. This prevents customers from uploading images that would print poorly.

Shape Blocks

Shape blocks add geometric elements to your design — rectangles, circles, lines, and custom paths. They are useful for:

• Decorative borders and frames around text or images
• Background panels that add contrast behind personalized content
• Divider lines between design sections

Shapes can have fixed properties or be linked to personalization fields, letting customers adjust colors or sizes.

Setting Up Personalization Fields

Personalization fields are the inputs your customers interact with on the Shopify product page. Each field connects to one or more blocks on the canvas, creating the link between what the customer types or selects and what appears on the product preview.

Text Input Fields

The most straightforward field type. A text input connects to a text block and updates it in real time as the customer types. You can configure:

• Label — What the customer sees (e.g., “Enter your name”)
• Placeholder text — Example content shown before input
• Validation rules — Required/optional, minimum and maximum length, allowed characters
• Transform — Automatically uppercase, lowercase, or title-case the input

Image Upload Fields

Image upload fields let customers add their own photos or artwork. When configuring an upload field, you set the acceptance criteria and the upload connects to an image block on the canvas.

Customers see a drag-and-drop zone on the product page. After uploading, they can reposition and scale the image within the block’s boundaries. The preview updates instantly so they can see exactly how their photo will look on the final product.

Color Picker Fields

Color pickers let customers choose colors for text, shapes, or backgrounds. You control which colors are available:

• Preset palette — A curated set of colors that match your brand or print capabilities
• Open picker — Full color wheel access
• Linked blocks — Which canvas elements change when the customer picks a color

Limiting the palette to colors your print provider supports avoids unexpected results in production.

Font Selector Fields

Font selectors give customers a choice of typefaces for their personalized text. You curate the available fonts, and the canvas preview updates instantly when a customer switches fonts.

Group fonts by style (serif, sans-serif, script, display) to help customers find what they want quickly. Keep the list focused — offering 8 to 12 well-chosen fonts works better than overwhelming customers with hundreds of options.

Working with Canvas Tools

The canvas toolbar provides precision controls for arranging your design.

Alignment and Distribution

Select multiple blocks and use the alignment tools to snap them into position — left-align, center, right-align, or distribute evenly across the canvas. This ensures consistent spacing that looks professional at any print size.

Layers and Ordering

Every block sits on a layer. Use the layer panel on the left to reorder elements, controlling which blocks appear in front of or behind others. This is critical when image blocks overlap text — you need the text layer on top to remain readable.

Snapping and Guides

Enable smart guides to see alignment hints as you drag blocks around the canvas. Snap-to-grid helps maintain consistent spacing. Both features can be toggled off when you need freeform positioning.

Zoom and Preview

Use the zoom controls to work on fine details, then switch to Preview Mode to see the design as your customers will. Preview mode hides the editor UI and shows only the product with its personalization fields, exactly as it appears on your Shopify store.

Saving and Publishing

Save as Draft

Click Save at any point to preserve your work as a draft. Drafts are visible only in your dashboard and do not appear on your Shopify store. Use drafts to iterate on designs, get feedback from your team, or prepare seasonal products in advance.

Publish to Shopify

When your design is ready, click Publish. Composerie syncs the customizer configuration to your Shopify product page. Customers can immediately start personalizing and ordering.

After publishing, you can still edit the design. Changes save as a new draft until you publish again, so your live customizer remains stable while you work on updates.

Duplicate and Iterate

Use the Duplicate action to copy an existing template and modify it for a different product or variant. This saves time when your product line shares similar personalization options — build one strong template, then adapt it across your catalog.

Tips for Effective Designs

1. Start with the print area — Match your canvas dimensions to your provider’s specifications before adding any blocks
2. Set clear constraints — Character limits and image minimums prevent customers from creating designs that do not print well
3. Test on mobile — Most Shopify traffic comes from phones; verify your customizer works well on smaller screens
4. Use preview mode — Always check the customer experience before publishing
5. Keep fields focused — Three to five personalization fields is the sweet spot; too many options can overwhelm customers and reduce conversions

Start Building

The Design Studio gives you full control over the personalization experience. Whether you are creating simple monogrammed products or complex multi-field custom designs, the tools are built to handle it.

Ready to create your first custom product? Start your trial and open the Design Studio today.