The Sticker Preview demo lets a shopper pick a material and watch their own artwork take on that look before they order. It runs on Appify Custom Product Options.
A 6 by 6 inch holographic die cut with a Cracked Ice finish, 1000 pieces, totals 400.00 with prices in dollars. This article shows how the calculator gets there, and how one choice of material changes what the customer sees.
What does the Sticker Preview calculator do?
The calculator has two steps. Step 1 is a single button that opens the design editor. Step 2 holds the choices: shape, material, finish, size and quantity, then an upload box with a second button for editing the uploaded image.
Every material is a round swatch that looks like the film. Each quantity card shows its own total and a discount badge, so the customer sees the price of 100, 500 or 2000 before choosing.
Why is a sticker preview hard to build, and how is it handled?
- Ten materials is too many for a plain list. A shopper needs to see holographic next to chrome to choose. The materials are picture swatches shown in a paged grid, so the picture does the selling.
- A material has to look like itself on the artwork. Saying "holographic" in text does not show a customer what their logo will look like on it. Here each material sets the editor's background, and a finish layer on top shows the shine.
- Not every finish suits every material. The calculator hides the finishes you do not offer on the material chosen, so a customer cannot order a combination you do not make.
- The discount depends on the size and the quantity together. A big sticker earns a deeper discount at the same count. One ladder for every size cannot say that.
- Some customers arrive with finished artwork. Others want to start from a blank canvas. The calculator gives both a button.
- The configuration survives the order. Every choice goes to the cart and the order, and the customer can change it from the cart with Edit options.
How is one price worked out?
Take a 6 by 6 inch holographic die cut with a Cracked Ice finish, 1000 of them.
| Step | Working | Result |
|---|---|---|
| Price each | The calculator's base price | 0.50 |
| Subtotal | 1000 x 0.50 | 500.00 |
| Quantity discount | The 1000 break for a 6 by 6 size | 20% off |
| Total | The calculator's own total | 400.00, or 0.40 each |
What are the design decisions behind it?
Picture swatches in a paged grid
Shape and material are image swatch options. Material turns on carousel pages, two rows at a time, so ten materials stay tidy instead of becoming a long scroll. Labels show under each swatch, and the swatch shape is a circle to match the film.
Material and size reach the canvas
The first button opens the Product Designer. Canvas bindings link the choices to it:
- Size sets the artboard. Pick 5 by 5 and the canvas is 5 by 5 inches. A typed custom size sets it too.
- Material sets the background. Each swatch maps to its own background picture. The Transparent material uses a transparent background instead, so a clear sticker shows as clear.
- Shape sets the cut line. Square cuts to a rounded rectangle and Circle to a circle. Die cut traces the customer's artwork.
In this calculator the backgrounds are set to stay out of the print files.
The preview effect adds the shine
A second layer, the preview effect, draws the finish over the artwork when the customer taps the Preview tool. Materials such as Pixie Dust, Prismatic and the glitters each map to their own effect, and the Finish buttons add Glossy, Matte or Cracked Ice on top. The first matching source wins, so the material's look comes first.
The effects stay out of the print files.
Finishes that do not fit a material are hidden
Three Hide values rules on the Finish option remove choices by material. Glitter, Gold Glitter, Gold Mirror and Prismatic lose Matte and Cracked Ice. Chrome Mirror loses Cracked Ice. A hidden choice is never offered, so it can never reach the cart.
A discount grid by size and quantity
The quantity discount rules use the 2D mode. Each size band has its own ladder of percentages. Here is what two sizes get, read off the quantity cards:
| Pieces | 4 by 4 inches | 6 by 6 inches |
|---|---|---|
| 50 | 8% off | 10% off |
| 100 | 11% off | 13% off |
| 500 | 16% off | 18% off |
| 1000 | 18% off | 20% off |
| 2000 | 20% off | 22% off |
The quantity option is set to show price and discount inline, as a total. That puts the total and a green badge on every card.
Two buttons for two kinds of customer
Step 1 holds the design button, which opens the editor on a blank artboard. Step 2 ends with an upload box and a second button linked to it. That one opens Image Edit mode, where the customer crops, rotates and adjusts the file they uploaded.
Which button a customer uses depends on whether they bring artwork. The editor also carries short instructions, including a reminder to keep logos and text inside the green safe zone.
What arrives with the order?
The cart line carries the shape, material, finish, size and quantity, plus a Design Files link.
That link opens a page with the downloads: the print-ready PNG, the cut-line SVG and a production manifest. The same line appears in the Orders tab with its options.
A customer who wants 2000 instead of 1000 taps Edit options in the cart. Their choices reopen filled in, and the price follows.
The guide to editing in the cart has the setup.
How can you make it yours?
- Use your own materials. Swap the swatch pictures and the background for each one, and map each to the preview effect that looks closest.
- Charge more for premium films. Add a price adjustment to the chrome and gold choices, or move to a table with a column per material.
- Keep one ladder for every size. Switch the discounts to the simpler 1D mode, as in the custom sticker calculator with a built-in design editor.
- Take the steps further. The multi-step calculator guide shows other ways to split a long list of choices.
How do you get this calculator?
The quickest way is the template. In the app, open Calculators, switch to the Templates tab and search for sticker. Find Sticker Preview, open its preview with the eye icon to try it, then click Install to my store. The calculator template installs as a new draft with no products assigned, so nothing changes in your store until you assign a product and publish.
After it installs, change anything to fit your own stickers. You can edit the options by hand, or describe the change to Chat with AI and check what it builds. To start from scratch with AI instead, here is a starting prompt:
Build a sticker calculator with two steps. Step 1 is a Product Designer button. Step 2 has picture swatches for shape (square, circle, die cut) and for material (vinyl, holographic, chrome mirror, gold glitter and more), finish buttons (glossy, matte, cracked ice), size buttons from 2 x 2 to 7 x 7 inches plus a custom size, a quantity list of 50, 100, 300, 500, 1000 and 2000 with the total on each card, and a file upload with an image edit button. Hide Cracked Ice on chrome mirror. Give bigger sizes deeper percent-off discounts at each quantity.
The design editor is set up in the Calculator Editor after that. For the design side in full, see how to sell custom stickers with a design studio. The discount basics are in tiered and volume pricing for custom products.
FAQ
How does a customer see the material on their design?
The material sets the editor's background, and the Preview tool draws the finish over the artwork. Neither one prints.
Can I stop customers choosing a finish that does not suit a material?
Yes. Hide values rules remove those finishes from the list when a given material is chosen.
Can a bigger sticker get a bigger discount?
Yes. The 2D quantity discount mode gives each size band its own ladder.
Can customers upload artwork and edit it?
Yes. A Product Designer button linked to the upload opens Image Edit mode for that file.
Can I sell clear stickers?
Yes. Set the clear material's background to transparent, and the editor shows a checkerboard behind the artwork.
Let them see the shine before they buy.
Whatever you sell, however you price it · The last options app you'll shop for