Some wallpaper only repeats across a roll. A pattern like this one repeats in both directions, across and down, so it can fill a wall of whatever width and height the shopper types. This calculator prices that wall and shows the shopper the pattern tiled over it.
It's the Wallpaper Repeat X-Y calculator on our Shopify demo store, built with Appify Custom Product Options. It has three options: a colour, a width and height, and a preview button. This article covers how the colour sets the rate and how the pattern gets onto the wall.
What it does
The shopper picks Green, Brown or White, types a width and height in inches, and clicks Preview & Show Price. The price summary shows the area in square feet and the total.
Why this calculator is hard to build, and how Appify Custom Product Options handles it
- The price follows the colour. Each colour is a Shopify variant, and the price per square foot is the selected variant's price. The swatches are those variants, so picking a colour also picks the variant and its photo.
- A small swatch can't show a wall. A circle says nothing about how a pattern looks across 10 feet. The button opens the Product Designer as a preview of the wall at the size the shopper typed.
- The pattern has to repeat in the right direction. This design tiles across and down. The repeat is a setting on the product image, so a calculator for a border print can use a different one.
- The wall size is typed, not picked. Wallpaper walls aren't standard. A Dimensions option takes a width and a height in inches, and one pricing variable turns them into square feet.
- The choices survive the order. The cart line carries colour and size, and the shopper can change them from the cart.
One price, worked out
Here's Green for a wall 120 inches wide and 96 inches high, with prices in dollars. The area and total come from the price summary on the demo store.
- Area: 120 by 96 inches is 80.00 square feet.
- Rate: the Green variant is 29.00 per square foot.
- Total: 80.00 square feet at 29.00 comes to 2,320.00.
The price formula is one line: the area in square feet times the selected variant's price. The area is a pricing variable that divides width times height by 144. The wallpaper calculator breakdown goes through the same area-times-rate idea in feet and inches.
The design decisions
The rate lives on the variant
The calculator starts from the selected variant's price and multiplies it by the area. To change a colour's rate, change the variant price in Shopify. Add a fourth colour in Shopify and it shows up as a fourth swatch.
A colour here is a full Shopify variant. The price, the product photo and the stock all follow the shopper's pick.
One image drives the swatch and the wall
The swatches show each variant's featured image. The same image becomes the pattern in the preview, so the wall always matches the colour. The setup is the pattern repeat setup described in our earlier guide: a product image binding set to repeat both ways.
The preview takes its size from the boxes
The artboard is bound to the Dimensions option, so the wall in the preview is the width and height the shopper typed.
The shopper chooses where it starts
The pattern can be moved, so the shopper picks which part of the pattern lands where. Every editing tool is off, so the preview stays a preview and not a design canvas.
Direction is a per-design choice
Across, down, both ways, a locked roll grid or no repeat are all settings on the same binding. Set each design to match how you print it.
What arrives with the order
Width, height and colour travel with the cart line and the order. The shopper can change them with Edit options in the cart. The proof image for the order is available from the app's Orders page.
Make it yours
- Mix repeat directions. Give each design its own repeat, so one calculator sells both-way, across and roll patterns.
- Add a trim margin. Add a pricing variable that rounds the area up or adds a margin, so the quote covers trimming.
- Add more units. Offer centimetres as well as inches, as the multi-unit wallpaper calculator does.
Get this calculator
The app's template catalog includes a wallpaper sizing calculator to start from. Or ask Chat with AI to build one from a description, such as "price wallpaper by wall width and height in inches, using each colour's variant price per square foot". Set the repeat in the Designer step with the wallpaper bindings guide.
FAQ
Can wallpaper repeat both across and down?
Yes. Set the product image to repeat both ways and the pattern tiles in a grid across the wall. The calculator and the price stay the same.
How does the colour change the price?
Each colour is a Shopify variant. The calculator multiplies the area by the selected variant's price.
Can customers preview the wall at the size they typed?
Yes. The Product Designer draws the wall from the width and height they entered.
Can the shopper change the size after adding to cart?
Yes. Edit options in the cart reopens the calculator with their choices filled in.
Every wall priced by its area.
Whatever you sell, however you price it · The last options app you'll shop for