Getting started
Get YesPersonalized installed and your first personalised product live in under ten minutes.
Installation
Templates & editor
Templates define what personalisation fields appear on your product page. Build them visually — what you see is what your customer sees.
Creating a template
Multi-page templates
Front and back? Cover and spine? Build one template with multiple pages and let the customer flip between them.
Text & curved text
Text layers are the most common personalisation field. Customers type directly into a live preview on your product image.
Text layer properties
Curved text
Enable curved text to render the customer's input along an arc — great for circular products like plates, coasters, and coins.
In the text layer properties, toggle Curved text on. Use the Curve radius slider:
- Positive radius — text arches upward (convex, like a smile)
- Negative radius — text arches downward (concave, like a frown)
- Larger absolute values — gentler curve; smaller values tighten the arc
Image layers
Let customers upload their own photo — a portrait, pet photo, logo. The image is embedded in the artwork at print resolution.
Add an Image upload layer from the layer panel. Resize and position it on the canvas to define where the customer's photo will be placed on the product.
Customers can upload JPG, PNG, or WebP up to 10 MB. The widget shows a crop/position tool so they can frame the image exactly.
Static image layers
Static images are your design assets — logos, decorative borders, overlays. They appear on every order but aren't editable by the customer. Upload once; baked into the artwork automatically.
Free Roam Zone
A fully open canvas within your template. Customers can add, position, and style their own elements — text, shapes, stickers, emojis, photos — anywhere inside the zone.
What customers can add
Conditional layers
Show or hide layers dynamically based on what the customer has typed elsewhere. Build templates that adapt — no extra templates needed.
A classic case: show a "Line 2" field only when "Line 1" is filled. Or show a wedding overlay only when event type equals "Wedding".
Layer groups
Group related layers together to keep complex templates organised. Collapsible in the panel, labelled for your team.
Fonts
Upload your own fonts and give customers font choice within your brand guidelines.
woff2, woff, ttf, otf. Give it a display name, weight, and style.Fonts can be reordered — drag in the Fonts page to control their order in the customer-facing font picker.
Media library
Sticker and emoji packs — assets customers can pick from inside the Free Roam Zone. Upload once, available everywhere.
Background removal
Remove the background from static image layers directly in the editor — no external tools.
Pro available on the Pro plan.
Products
Assign templates to your Shopify products to enable personalisation on the product page.
Storefront widget & themes
The personalisation widget is injected into your product pages via a Shopify Theme App Extension — no theme code edits required for standard themes.
Enabling the widget
Cart preview
A personalisation preview badge is shown in the cart drawer and the /cart page. Enable the same way — look for YesPersonalized Cart Preview in App Embeds.
Widget customisation
In Settings → Widget you can customise the widget's appearance: button label, colours, panel position, and whether to show the live preview thumbnail.
Theme compatibility
The widget is delivered as a Shopify Theme App Extension. It works out of the box with any Online Store 2.0 theme — Dawn, Sense, Studio, Refresh, Crave, Craft, and the vast majority of Shopify Theme Store themes. No theme files are edited, so theme updates and version pins are unaffected.
{{ product }} server-side and includes a standard form <form action="/cart/add"> with a variant ID input.How the injection works
When App Embeds is enabled, Shopify renders our liquid block (blocks/personaliser.liquid) into theme.liquid. The block:
- Detects whether the current page is a product page (via
{% if template contains 'product' %}) - Reads
product.id,variant.id,shop.permanent_domain - Renders an empty mount node (
#yp-root) and inlines our widget script - Mounts above or below the Add to Cart button depending on theme structure
The widget intercepts the form submit on the product page, attaches the personalisation session ID to cart line attributes (_yp_session_{variantGid}), and lets the form submit normally.
Mount point detection
The widget locates a sensible insertion point by trying selectors in order:
[data-yp-mount]— explicit hook (recommended for custom themes)form[action*="/cart/add"]— the product form.product__info-wrapper,.product-form,.product-single__meta— common theme classes
If none match, the widget renders inline at the bottom of main. To pin it to a specific spot in your custom theme, add <div data-yp-mount></div> where you want the widget to appear.
Custom development hooks
For developers extending or integrating with the widget:
GET /api/storefront/{shopDomain}/config?productGid={gid}&variantGid={gid} — returns the assigned template, fields, fonts, and widget settings as JSON. CORS-enabled, no auth required.POST /api/storefront/{shopDomain}/session with field inputs returns a sessionId. Attach it to the cart line as _yp_session_{variantGid}.POST /api/storefront/{shopDomain}/upload-url returns a presigned R2 PUT URL. Browser uploads direct to R2; the returned key goes into the session payload._yp_session_{variantGid} (URL-safe variant GID). Cart Transform Function reads this to apply the personalisation fee.<div data-yp-mount data-product-gid="..." data-variant-gid="..."></div> — explicit override of auto-detection.--yp-accent, --yp-bg, --yp-radius, --yp-font, --yp-input-border. Override them in your theme's CSS.window.addEventListener('yp:ready', ...) after the widget mounts, or yp:variantChange when the customer switches variants.Custom theme integration reference
If you're hand-rolling a theme or modifying a custom one, here's the exact contract the widget expects. Send this to your theme developer when handing over a build.
Line-item properties we attach
All underscore-prefixed so Shopify hides them from the customer-facing cart UI by default. Don't strip them.
_yp_session_yp_preview_yp_style_{layerId}_yp_fee"1" on the personalisation-fee line item when a charge applies.Add-to-cart hijack
The widget intercepts submits on any form[action*="/cart/add"] and on the standard [name="add"] / .product-form__submit selectors, so the customer can't bypass personalisation. If your custom add-to-cart button uses a non-standard selector or a JS-only handler (no form submit), open a support ticket — we may need to add a hook.
Personalisation fees — two line items
If the template has a fee, the widget pushes two line items in a single /cart/add.js call — the actual variant plus a hidden fee variant. The cart needs to render both as normal line items. Don't dedupe or hide line items by variant ID.
Cart refresh
After adding, the widget uses Shopify's Section Rendering API requesting cart-drawer and cart-icon-bubble sections, and dispatches the events cart:refresh, cart:updated, and cart:change. If your theme uses a custom cart drawer with a different section ID or event name, share those and we'll add support.
Cart line previews
The widget injects a small preview thumbnail into each personalised cart line. We look for these selectors in order:
[data-cart-item-key]cart-remove-button[id$="-{lineIndex}"]- Generic
.cart-item__details/.cart-item__infocontainers
If your custom cart uses different markup, the previews will silently no-op (the cart still works fine). A quick selector tweak gets them showing.
Buy Now / Express checkout
The widget's own Buy Now button bypasses the cart — it generates a Shopify Draft Order checkout URL server-side and redirects the customer there. So as long as the standard add-to-cart form is intercepted, theme-rendered Shop Pay / Apple Pay / Google Pay express buttons aren't a concern: they only fire when the standard form is submitted, which we control.
Common theme integration issues
data-yp-mount inside the form and contact support with the theme name.<div data-yp-mount></div> to the exact insertion point in your product template.#yp-root with reset styles, but pathological theme CSS can still leak in. Override the CSS variables (above) or open a ticket with a screenshot.variant:change event. Manually call window.YesPersonalized?.reload(newVariantGid) after your variant switcher fires.Orders & artwork
When a customer places an order, we capture their inputs and generate high-resolution production artwork automatically.
Artwork statuses
Downloading artwork
Open any order from Orders. Once the status shows Ready, click Download artwork for a high-resolution production file. Multi-page templates generate one file per page.
Plans & billing
YesPersonalized uses Shopify's native billing — charges appear on your existing Shopify invoice.
| Plan | Price | Orders / mo | Products | Support |
|---|---|---|---|---|
| Bronze | £19.99/mo | 50 | 100 | |
| SilverMost popular | £29.99/mo | 100 | 250 | Priority |
| Gold | £49.99/mo | 250 | 500 | Priority |
| Platinum | £99.99/mo | 500 | 1,000 | Priority |
All plans include every editor feature — multi-page templates, Free Roam Zone, conditional layers, curved text, custom fonts, AI background removal, automatic print-ready artwork generation, and the storefront widget. Plans differ only by the per-month order limit and the maximum number of products you can attach personalisation to.
Frequently asked
Does the personalisation widget work with any Shopify theme?
Yes — the widget is injected via a Shopify Theme App Extension, which works with all Online Store 2.0 themes. If you are on a legacy (pre-2.0) theme, contact support and we'll help.
Can I use multiple templates on the same product?
One template per product. Each template can have multiple pages, layers, and fields — so a single template can cover complex multi-area personalisation.
Do conditional layers affect the artwork?
Yes. A layer hidden at checkout time (its conditions not met) is excluded from the production artwork entirely — not just hidden visually.
What image formats can customers upload?
JPG, PNG, and WebP. Maximum 10 MB per image. Higher resolution produces better print quality — the widget shows a warning if needed.
Where are customer photos and personalisation data stored?
Securely in our managed, encrypted database and object storage, scoped strictly to your shop. Customer uploads are retained for the lifetime of the order.
What happens if artwork generation fails?
Open the order from the Orders page and click Retry. If it fails repeatedly, contact support with the order ID and we'll investigate within one business day.
Can I restrict personalisation to certain variants?
Yes. When assigning a template to a product, you can optionally select specific variants. Only those variants will show the widget.
What happens when I uninstall the app?
The widget is removed from your storefront immediately. Existing artwork files remain accessible for 30 days. Reinstalling restores your templates and settings.
How do I get help?
Open a support ticket from the Support page in the app sidebar. Attach screenshots and reply by email. We aim to respond within one business day.