A framed photo with a caption sells when the shopper can see the photo, the frame and the words together before they pay.
This is a look inside the Picture Frame Personalization calculator on our Shopify demo store. It's built with Appify Custom Product Options.
The shopper picks portrait or landscape, then a frame. They upload a photo and type up to three lines of text, each with its own color, font and size. The product image turns into a live preview of the finished piece.
What it does
Two orientation swatches sit at the top, with three frame swatches under them. Below that come a photo upload and three text lines.
The upload takes one image up to 10 MB. Each text line has a color picker, a font list and a size box that runs from 12 to 96 px.
In plain words, the price is the product's own Shopify price. On this demo the choices change the preview, not the total.
Why a photo frame personalizer is hard to build
- The frame list has to follow the orientation. A landscape photo needs a landscape frame. Visibility rules show only the three portrait frames for Portrait and only the three landscape frames for Landscape.
- The shopper wants to see the photo in the frame. Personalization turns the product image into a live preview. The photo, the frame and the text appear as layers on the picture, and they change as the shopper picks.
- Every line of text needs its own look. A name in a script font and a date in a plain one is a normal request. Each text line has its own color, font and size, and each one drives the matching text on the preview.
- Layers have to stack in the right order. The photo goes under the frame and the words go on top.
- The shopper should be able to adjust the photo. They can drag it, resize it and rotate it until the face sits where they want it.
- The order has to show what the shopper saw. A proof image of the finished preview is attached to the order. Customers can edit the line from the cart, and a reorder keeps their choices.
One price, worked out
Here's a landscape frame B-l with two lines of text, with prices in dollars.
- Starting price: the calculator's base price is set to the selected Shopify variant, which is 24.98.
- Orientation, frame, photo and text: these carry no price on this demo, so they add nothing.
- Total: 24.98.
The calculator shows a total of 24.98. The default portrait frame A-p with no text shows the same 24.98.
Want a premium frame or longer text to cost more? See "Make it yours" below.
The design decisions
Orientation decides which frames show
The six frames are one image swatch option. Two "Show value(s) if" rules filter it: portrait frames for Portrait, landscape frames for Landscape.
A value rule set to Once picks the first frame of the new set when the orientation changes. So a portrait frame never stays selected on a landscape photo, and the shopper can still choose another.
Each choice becomes a layer
In the Personalization step, every option that should show on the product image gets a layer. This calculator has six.
- Background: a static overlay that is always on.
- Photo: fed by the Photo upload option.
- Frame: fed by the Frame option, with one image per frame choice.
- Text: three text layers, one per text box.
Layers stack in list order, so the frame lands over the photo and the words land over the frame.
The text styles are linked, not typed twice
Each text layer has linked options for font, color and size. Color 1, Font 1 and Size 1 drive the first line, and so on for the other two. The text and the color are typed or picked once, and the font and size options feed the same layer.
The shopper styles each line with ordinary form fields. You don't build a separate editor for it. The text, color, font and size options are the same ones that go to the order.
The font list loads all Google fonts here. You can limit it to a short list of your own if you want the products to keep one look.
What the shopper can move
The layer settings decide what a shopper can touch. On this calculator they can drag, resize and rotate the photo. The text lines can be dragged but not resized or rotated. The frame and the background stay put.
Size for text comes from the Size box, so the shopper has one place to change it.
A proof image at add to cart
When the shopper adds the product to the cart, the app saves a proof image: a flattened PNG of the preview, with the photo, frame and text as they appeared. It's attached to the cart line, so you and the customer both see the same picture.
What arrives with the order
The calculated price goes to checkout on one cart line. No orientation, frame or text becomes a Shopify variant.
Cart properties carry the frame, the text, the color, the font and the size to the order. The proof shows up as a line item property named Personalization Preview, and its link opens the image.
Customers can tap Edit options in the cart to change the frame or fix a typo without starting over. Later, Appify Reorder keeps the choices from the order, where Shopify's own Buy again drops them.
Make it yours
- Charge by the letter. A formula can count the characters in a text box and multiply by a rate, so a long caption costs more than a short one.
- Charge for premium frames. Give the frames you want to upsell their own price. The total updates as the shopper picks.
- Keep the fonts on brand. Switch the font list from all Google fonts to a short list you choose.
- Cap the text. Set a maximum length on each text box so a caption can't run past the frame.
- Add more frames. Each new frame needs a swatch picture and a layer image for the preview.
Get this calculator
Ask Chat with AI to build the options and rules in your own words. For example:
"Build a picture frame personalization calculator. Orientation as image swatches: Portrait and Landscape. Frame as image swatches with three portrait and three landscape frames. Show only the frames that match the orientation, and pick the first one when the orientation changes. Add a photo upload for one image. Add three text boxes, and give each one a color picker, a font picker and a size box from 12 to 96."
Then open the Personalization step and add the layers: the photo, the frame and the three text lines. Link each text layer to its font, color and size options.
Want a print-size canvas and print files too? Read how the Picture Frame Designer works. For the wider choice of tools, see the roundup of Shopify apps for customizable products with live preview.
FAQ
Can customers see their photo in the frame before they buy?
Yes. The product image shows the photo inside the chosen frame, with their text on top, and it updates as they pick.
Can customers choose a different font for each line?
Yes. Each of the three text lines has its own font, color and size.
What happens if a customer picks Landscape after choosing a portrait frame?
The frame list switches to the landscape frames and the first one is selected. The shopper can pick another.
Where do I see what the customer designed?
The order has a Personalization Preview property with a link to the proof image, next to the frame and text choices.
Can longer captions cost more?
Yes. A formula can count the characters in a text box and add a charge for each one.
Their photo. Their words. Your frame.
Whatever you sell, however you price it · The last options app you'll shop for