Setup guide

Live client proofing in ten minutes.

Everything you need to go from purchase to a polished gallery your clients will love using. This is the same guide linked from your purchase confirmation - bookmark it for your next shoot.

1. Install the two components

The moment checkout completes, your purchase confirmation shows both Component URLs. Copy the Photo Proofing Gallery Component URL first.

In your Framer project, paste it straight onto the canvas (Cmd or Ctrl + V). Repeat with the Proofing Summary Field Component URL.

Both now live in your Assets panel. When an improved version ships, Framer shows Update next to them - one click and you are current.

2. Add your proofs

Select the gallery and open Photos. Add one item per proof: the image plus a short, unique Image ID such as hs-01.

Image IDs keep picks, notes and drafts attached to the right frame, even if you reorder photos later.

Tip: export web proofs at around 2000 px on the long edge for crisp, fast loading galleries.

3. Pair the original filenames

Paste a list into Metadata to match each Image ID with the file you will edit. A CSV with a header works perfectly: id, filename, caption, category, alt.

Prefer something quicker? One line per photo also works: hs-01 = DSC_0142.jpg

Filenames are never guessed from image URLs or positions. Anything typed directly on a photo item wins over the Metadata list.

4. Set the selection rule

Choose Exact count, Maximum count or Open selection, then set the number.

The counter, progress bar and send step follow the rule automatically, and impossible settings are flagged in the canvas setup check before you publish.

Changed the photos for a returning client? Bump Content Version so saved drafts reconcile cleanly.

5. Connect your Framer form

Add a native Framer Form below the gallery with the fields you want, such as name and email, and pick its destination.

Drop the Proofing Summary Field inside the form and give it the same Gallery ID as the gallery. It adds the full selection as a field called Photo selection.

Give the form section a scroll target and set the gallery Send link to it, for example #send. Require Picks holds the form until the selection rule is met.

6. Make it yours

Appearance controls colours, fonts, radius, tile ratio and the selection style. Labels lets you rewrite every word your client sees, in any language.

Turn exports, notes, filters, captions and drafts on or off per gallery.

7. Publish and share

Publish your site and send the page link to your client. Picks and notes save on their device as they go, so they can come back any time before sending.

When the form arrives, copy the filenames into Lightroom’s filename filter or your editing queue and get straight to work.

Your licence

Lifetime use on one licensed website or project.

Your one-time purchase covers one website or Framer project for as long as it lives, including future improvements delivered through the same Component URLs. Your Stripe receipt confirms your lifetime licence and its receipt number is your licence key. Building more client sites? Simply pick up another licence for each one.

Create a free website with Framer, the website builder loved by startups, designers and agencies.