This guide explains how Composerie connects a shopper’s design to the right cart line. It is for store owners who want to understand what happens behind the scenes when a personalized product is added to the cart, and where to find that information later. You do not need to write any code to make this work.
What it does in plain terms
When a shopper finishes personalizing a product and clicks add to cart, Composerie attaches the design reference and a preview image to that cart line. The order then carries everything your print provider needs.
Composerie does this by listening to your store’s own add-to-cart request. The app embed patches the browser functions your theme uses to talk to the cart (window.fetch, XMLHttpRequest, and form submit), so it works with AJAX themes and with classic form posts. You do not edit theme code, and you do not paste anything into your product template.
The details Composerie attaches are called line item properties. Each one starts with _composerie_, for example _composerie_design_id, _composerie_template_id, _composerie_preview_url, and _composerie_mode. Shopify treats any property name that begins with an underscore as hidden, so the shopper never sees these on the storefront. You still see them on the order in your admin.
If attaching the properties fails for any reason, the original add-to-cart request still goes through. The shopper can never be blocked from adding to the cart by this step.
To see this from the shopper’s side, read how a shopper personalizes a product.
Where you see it
The attached design shows up in two places, and untouched products stay exactly as they were.
In the cart and the cart drawer, Composerie replaces the line’s product image with the customer’s design preview. A separate cart-swap script reads /cart.js, finds each personalized line, and points its image at the preview thumbnail stored on Composerie’s image host (cdn.composerie.com/cart-thumbnails/). It matches lines by their line key first. On Dawn-family themes, which do not expose a line key in the page, it falls back to the line’s position in the cart. The swap re-runs when the cart drawer opens or re-renders, so the preview stays correct after edits.
On the order in your Shopify admin, the _composerie_ properties appear on the personalized line item. Open Orders, then open an order that contains a personalized product, and look at the line. You will see the design reference and the preview there.
Products that are not personalized are left untouched. Composerie only injects properties when a variant has a design mapped to it, and the image swap only runs on lines that carry a Composerie preview. Everything else in the cart behaves as your theme normally does.
Do I need to add any code to my theme for this?
No. The app embed patches the cart requests automatically once Composerie is turned on. There is nothing to paste into your product or cart template.
Will the hidden properties show up to my customer?
No. Property names that start with an underscore are hidden by Shopify on the storefront. You still see them on the order in admin.
What happens if the design fails to attach?
The original add-to-cart request still goes through, so the shopper is never blocked. The line just will not carry the Composerie properties.
What if my theme does not show the preview in the cart drawer?
The image swap matches lines by their line key, with a position fallback for Dawn-family themes. If previews still do not appear, contact support so we can check your theme.
How it travels to checkout
The properties added here are what carry through to checkout and onto the final order. Variant matching and what reaches the order are covered in variant sync and checkout.
Next: read variant sync and checkout to see how the right variant and design reach the final order.