The storefront block and add-to-cart integration
Every setting on the Design Studio theme block, covering button styling, gallery takeover, Add-to-Cart hijack, personalisation gating, and the cart line-item properties.
The storefront side is a single theme app extension block. Add it to your product template once, and it adapts per product based on the templates you've bound.
Adding the block#
Online Store > Themes > Customize, open a product page template, then add the Design Studio block. Works with any Online Store 2.0 theme, no code.
Block settings#
| Setting | Default | What it does |
|---|---|---|
| Button label | "Design your own" | The launch button text |
| Button background / text colour | Dark / white | Match your theme |
| Hide 'Design your own' button | Off | Hijacks the theme's own Add-to-Cart button instead: it's relabelled and opens the studio |
| Form panel height | 420px | Height of the inline form area |
| Gallery selector override | None | CSS selector for unusual themes where gallery auto-detection needs help |
| Print size (width / height / bleed / safety / DPI) | 3″ × 3″ @ 300 | Fallback specs when a product has no bound template |
| Max canvas height | 60vh | Caps the inline canvas height (30 to 90) |
| Canvas background | None | Workspace colour behind the artboard |
What shoppers experience#
The block inspects the product's bound templates and adapts:
- Inline templates: the live canvas takes over the product gallery slot and the form renders in the block position. Multiple inline templates? The customer gets a picker.
- Designer / form templates: the launch button opens the studio.
- After designing, a "Design attached" confirmation appears with an Edit design link, so customers can revise right up until checkout.
See the three modes in action in Lockdown and customer modes.
Personalisation gating#
Two independent switches control purchase flow:
- Personalisation required (per template): the theme's Add-to-Cart button is disabled until a design is saved. No more blank personalised products in the cart.
- Hide launch button (block setting): the theme's own Add-to-Cart becomes the design entry point, relabelled, and clicking it opens the studio first.
What lands on the cart and order#
When the customer adds to cart, the block injects line item properties:
- Visible:
Design preview, a thumbnail of their design, shown in the cart drawer, checkout, and order confirmation - Hidden (for you and your fulfilment): the design ID plus direct URLs to the production PNG, print PDF, vector SVG, and cut-path file
- Any form field values (e.g. "Name: Nonna's Kitchen") and customer options (e.g. "Ink: Blue") as readable properties
Then the theme's own Add-to-Cart runs normally: your cart drawer, upsells, and analytics all behave as usual.
Because production file URLs ride on the line item itself, your fulfilment team can grab print files straight from the Shopify order. The app's Designs gallery is the nicer view, but never a bottleneck.
Related guides#
- Getting started for block setup in context
- Production files and preflight for what those file URLs contain
Was this helpful? If something isn't working, contact support.