Embed the framing designer on your website

Let visitors see their print professionally framed — they pick a frame and mat from the studio's curated favourites and send the quote straight to the framer. Everything on this page is copy-paste; the snippets below are already filled in with this studio's app address.

What your visitor gets: a clean 4-step designer showing their chosen artwork in real frame mouldings and mats, ending in a checkout-style Send to the studio card (name + email or phone) that delivers the design straight to the framing studio's order requests — with a shareable link the visitor can keep or pass on. You don't handle any of it.

Photography portfolio / gallery pages

One script tag adds a Frame this print button to every image in your galleries — new photos you upload later get the button automatically. Choose how it opens:

Option A — open in a new tab (simplest)

The visitor clicks the button and the framing designer opens full-page in a new tab with their print already loaded.

Where to paste: Squarespace → Settings → Developer tools → Code injection → Footer. (Or a Code block on one specific page.)

Option B — open in a popup on your page

Same button, but the designer opens in an overlay so the visitor never leaves your site. Closes with the × , clicking outside it, or Escape.

Option C — a plain link (works on any plan, no code)

If your Squarespace plan doesn't allow scripts, add a normal link on or under any image pointing at:

Replace IMAGE-URL with the image's address (right-click the image → Copy image address) and TITLE with its name. You can also add &w=420&h=594 if you know the print size in millimetres.

Important: if the image address contains ? or & (most CDN links do), it must be URL-encoded before pasting into the link — otherwise everything after the first & is lost. Search "URL encode" for a free converter, paste the image address, and use the encoded result as IMAGE-URL. The script options (A and B) handle this automatically.

Plans: Options A and B need a Squarespace plan that allows JavaScript (Business, Commerce, or the current Core / Plus / Advanced plans). Option C works on every plan.

Print size: portfolio images don't carry a physical size, so the designer makes a sensible first guess and the visitor can adjust it. To fix the size yourself, use Option C with &w=/&h= in millimetres.

Squarespace shop — product pages

Embeds the designer directly on the product page, with the product photo piped in, the frame sized to the print size the customer selects, and the print's own price included in the quote.

Option A — whole store, one snippet (recommended)

One script tag covers every product page — no per-product setup. Each product page gets a "See it framed" button right under the size picker; tapping it opens the framing designer in a popup with the product photo, the selected size, and the print's price already loaded. Nothing heavy loads until the button is tapped.

Squarespace → Settings → Developer tools → Code injection → paste into Footer.
That's it. Non-product pages are untouched; every product page gets the button.

Size variants named like A2, A2 (16 x 24 in), 420 x 594 mm or 16" x 20" are recognised automatically. Other names (e.g. Large): add data-size-map='{"Large":[594,841]}' to the script tag.
data-heading="Frame this print" changes the button label.
Changing the size dropdown re-sizes the framed preview and updates the print price — even while the popup is open.
Prefer the designer embedded in the page instead of a popup? Add data-mode="inline" — it mounts below the product section (use data-insert-after=".your-css-selector" to place it).
Want something lighter than the full designer? Add data-embed-mode="viz" — a compact widget of the studio's favourite frame looks with a live price, "Send to studio", and a "Customise" path into the full designer. The presets shown are the ones marked "In embeds" in the studio's admin.

Option B — one specific product (Code block)

Edit the product page → add a Code block where the designer should sit.
Paste the snippet below.
Replace data-image with your product image address and data-title with the product name.
If your size variants have names like A2 or 420 x 594 mm, sizing is automatic. Otherwise list them in data-size-map (name → [width mm, height mm]).

Plans: Code injection and Code blocks with scripts need Business / Commerce (or current Core / Plus / Advanced). All Squarespace commerce plans qualify.

Shopify — product pages

Option A — theme-editor section (recommended, no code)

Download framesmith-designer.liquid (or copy it from your admin panel's Embed section — it bakes in your studio URL).
Online Store → Themes → ⋯ → Edit code → Sections → Add a new section named framesmith-designer → paste → Save.
Online Store → Customize → open a Product template → Add section → Framesmith Designer.
Set "Your studio URL" in the section settings. Done — the button pipes the product photo, the selected variant's print size, and the price; the designer matches your store's light/dark automatically.

Works on Online Store 2.0 themes (Dawn and later). For vintage themes, use Option B below.

Option B — Custom Liquid block (script tag)

Same embed as the Squarespace shop version, wired with Liquid so every product pipes its own image and title automatically.

Online Store → Themes → Customize → open a product template.
Add a Custom Liquid block where the designer should sit.
Paste the snippet below (the Liquid tags fill in each product automatically).

Variant names like A2, 420 x 594 mm, 42 x 59.4 cm or 16" x 20" are recognised automatically. For other names, add a data-size-map like the one shown, or define window.framesmithVariantMm for full control:

When the customer picks a different variant, the framed preview re-sizes to that print — this works with Dawn and other Online Store 2.0 themes out of the box.

Dark sites, fonts and accent colours

The embed matches your page automatically: the helper scripts read your page background and open the designer in dark or light to suit. Force it with data-theme="dark" (or "light") on the script tag. Hosts with their own JS can go further after the framesmith:ready message:

iframe.contentWindow.postMessage({
  type: 'framesmith:config',
  theme: 'dark',                 // or 'light'
  fontFamily: 'Inter, sans-serif',  // your site's UI font
  fontHeadings: 'inherit',       // drop the serif headings too (optional)
  accent: '#0B6E4F'              // button/accent tint — ignored if contrast is too low
}, '*');

Artwork, mats and mouldings are never re-coloured — merchandise stays true in any theme.

Troubleshooting

Symptom	Cause & fix
The designer opens but shows the upload step instead of the artwork	The image address couldn't be fetched (its host doesn't allow cross-site image loading). Squarespace and Shopify CDN images work; for images hosted elsewhere, ask the studio — the embed can accept the image as inline data instead (`dataUrl` in the message protocol).
Buttons don't appear on gallery images	Your images may not be on the standard Squarespace CDN. Add `data-selector="YOUR-CSS-SELECTOR"` to the script tag to tell it which images to decorate.
The framed preview looks blurry	The helper automatically requests a high-resolution copy from the Squarespace CDN. If you pasted a plain link (Option C), make sure the image URL ends with `?format=2500w`.
Frame size doesn't match the selected variant	The variant name isn't recognised. Add it to `data-size-map`, e.g. `{"Large":[594,841]}` (millimetres, width first).
Nothing works on my Squarespace plan	Personal/Basic plans strip scripts. Use the plain-link option (portfolio tab, Option C) — it needs no code.
The whole-store snippet doesn't show the designer on a product page	The script must be in Code injection → Footer (site-wide), not a page header. If you also pasted a per-product Code block on that page, the block wins and the auto-mount steps aside.
The print price doesn't appear in the quote	The selected variant has no price in Squarespace, or the variant label doesn't match a size the embed recognised. Price follows the size variant — check the product's variant pricing.
The embed is cut off / doesn't scroll right	The embed reports its own height to the page. If you wrote your own iframe, listen for the `framesmith:resize` message and set the iframe height — or just use the snippets on this page, which do it for you.

Anything else — contact the framing studio that sent you this page.