A framed photo order is only ready to make when the size, the orientation, the frame and the photo all agree.
This is a look inside the Picture Frame Designer on our Shopify demo store. It's built with Appify Custom Product Options.
The shopper picks a size, portrait or landscape, and a frame. Then they upload a photo and open a designer that's already sized and framed to match. The product image turns into a live preview of the framed photo along the way.
What it does
Three standard sizes and a Custom button sit at the top. Below them come the orientation and the frame as picture swatches, a photo upload, and a Customize Photo button.
Pick Custom and Height and Width fields appear, in inches. The upload takes one image up to 10 MB.
In plain words, the price is the product's own Shopify price. On this demo the choices change the preview and the print canvas, not the total.
Why a picture frame calculator 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.
- Shoppers want to see it framed before they pay. Personalization turns the product image into a live preview. The photo sits inside the chosen frame and changes as they pick.
- The photo has to be prepared at the frame's size. Many options apps stop at a personalizer, a photo laid over a product picture, with no canvas at the print size and no print file on their listings. Sizing the photo for print stays your job. Here the Product Designer opens a canvas at the exact size picked.
- The frame belongs on screen, not in the print. The shopper should see the moulding. The printer needs the photo only. The frame here is a preview layer that never reaches the print file.
- Soft photos have to be caught early. The designer warns about low resolution when a photo lacks the pixels for its print size, while the shopper can still swap it.
- The order has to survive changes. Customers edit the line from the cart, and a reorder comes back with every choice filled in.
One price, worked out
Here's an 8 by 12 inch landscape photo in frame B-l, with prices in dollars.
- Starting price: the calculator's base price is set to the selected Shopify variant, which is 24.98.
- Size, orientation and frame: these carry no price on this demo, so they add nothing.
- Total: 24.98.
The calculator shows a total of 24.98. The default 4 by 6 portrait in frame A-p shows the same 24.98.
Want bigger prints or fancier frames to cost more? See "Make it yours" below.
The design decisions
Each size button sets the canvas
The Size option drives the designer's artboard through a canvas binding with a per-choice size chart: 4 by 6, 5 by 5 or 8 by 12 inches. Custom reads its width and height from the Height and Width fields instead.
The Height and Width fields have a Show if rule, so they appear only when the shopper picks Custom.
Orientation turns the canvas
A second binding maps Portrait and Landscape to the artboard's orientation. Pick 8 by 12 and Landscape, and the designer opens 12 inches wide and 8 tall.
Frames that match the orientation
The six frames are one 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.
The frame is a scene, not artwork
In the designer, each frame choice maps to its own scene image. A scene is a nine-slice image that stretches around the artboard and leaves the center open, so one frame image fits every size, Custom included.
The shopper designs inside the frame they picked. The print file holds only the photo. Scenes never appear on the proof or the print-ready file, so your printer gets the photo at the size ordered, without the frame.
Two previews, two jobs
A personalizer and a Product Designer are different tools, and this calculator uses both. Personalization works on the product image itself: a background, the customer's photo, and the chosen frame on top. The photo layer can be moved, resized and rotated.
The Product Designer is the full-screen canvas at print size. It has Image Upload, Text and Layers on the left, and the size, orientation, frame and live total on the right. For more on the difference, see how to let customers design their own products.
A review step before the design is saved
The design review workflow is on. Save becomes Review Design, and the shopper must tick "I have reviewed and approve my design" before Save Design is enabled. An Add note button collects production notes.
If they change the size after saving, the design is marked for another look. That stops a proof at the old size from being printed. The full approval flow is in how to review custom orders with proofs and design files, which uses this same demo.
What arrives with the order
The calculated price goes to checkout on one cart line. No size or frame becomes a Shopify variant.
Cart properties carry the size, orientation and frame to the order. A Design Files link holds the proof, a print-ready PNG at 300 DPI and a production manifest. Any note shows as Production Notes on the same line.
The app's Orders page shows each line with a proof thumbnail and links to open the files.
Customers can tap Edit options in the cart to switch frames without starting over. Later, Appify Reorder brings the order back with every choice filled in, where Shopify's own Buy again drops them.
Make it yours
- Charge by size. Give each size button its own price. For Custom, an option formula can read Height and Width and price the area, or put the area in a pricing variable and reuse it.
- Charge for the frame. Give the premium frames a price, or a formula that reads the size, so a gold frame costs more on an 8 by 12 than on a 4 by 6.
- Add more frames. Each new frame needs a swatch picture, a scene image for the designer, and a layer image for the product preview.
Get this calculator
Ask Chat with AI to build the options and rules in your own words. For example:
"Build a picture frame calculator. Size buttons 4x6, 5x5 and 8x12 inches, plus Custom. Show Height and Width in inches only when Custom is picked. 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."
Then add a Product Designer option labeled Customize Photo. Set the frame images in the Personalization and Designer steps, and bind Size and Orientation to the canvas.
Comparing tools for this kind of product? Read 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, and the designer shows it again at print size.
Does the frame end up in the print file?
No. The frame is a preview scene. The print-ready file has the photo at the size ordered, without the frame.
Can customers order a size you don't list?
Yes. Custom opens Height and Width fields, and the designer canvas follows the numbers they type.
What happens if a customer changes the size after designing?
The saved design is marked for another look. They're asked to re-open the designer and check it at the new size.
Can bigger frames cost more?
Yes. Price each size button, or use a formula that reads the size, and the total updates as the shopper picks.
The frame they pick. The print file you need.
Whatever you sell, however you price it · The last options app you'll shop for