Inside a Shopify Wallpaper Calculator With a Horizontal Pattern Repeat

Illustration of a card with three colour swatches and two size boxes, an arrow to a wall covered in a soft pattern repeating from side to side, and a person figure for scale

Some wallpaper runs down the wall. Some runs across it. This calculator is the across kind: the shopper picks a colour, types the wall's width and height, and opens a preview where the pattern repeats from side to side.

It's the Wallpaper Repeat Horizontal X calculator on our Shopify demo store, built with Appify Custom Product Options. It prices the wall the same way as its vertical repeat sibling. This article is about the part that differs: the direction the pattern tiles.

What it does

The shopper chooses Green, Yellow or Black, enters a width and height in inches, and clicks Preview & Show Price. The price summary shows the area in square feet and the total.

Wallpaper calculator with Green, Yellow and Black pattern swatches, empty width and height boxes in inches and a Preview and Show Price button
Three options: colour, wall size, preview.

Why this calculator is hard to build, and how Appify Custom Product Options handles it

  • The repeat direction belongs to the design. A border-style pattern wants to run across. A tall stripe wants to run down. Here the direction is a setting on the product image binding, so the same calculator can sell either.
  • A swatch can't show a wall. A small circle says nothing about how a pattern sits across 10 feet. The button opens the Product Designer as a full-screen preview drawn at the size the shopper typed.
  • Each colour carries its own rate. The swatches are the product's colour variants in Shopify, so a colour's price is its price per square foot.

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.

  • 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.
Wallpaper calculator with Green selected, a width of 120 inches and a height of 96 inches
Green, 120 wide and 96 high.
Price summary showing an area of 80.00 square feet and a total of 2320.00 dollars
The summary shows the area, then the total.

The price formula is one line: a pricing variable for the area in square feet, times the selected variant's price. The vertical repeat article walks through it.

The design decisions

The pattern comes from the colour

The pattern in the preview is the selected colour's product image, set to repeat across. Pick Yellow and the preview tiles the Yellow image. The wall takes its size from the width and height boxes.

The repeat direction is a setting on the pattern. Switching a design from across to down changes how the preview tiles. It doesn't change the options or the price.

The shopper chooses where it starts

The pattern is free to move, so the shopper slides it to pick where it begins on the wall. Every editing tool is off, so the preview stays a preview.

Direction is yours to choose per design

Across, down, both ways, a locked roll grid or no repeat: the options are covered in how to set up wallpaper pattern repeats. Pick the one that matches how you print each design.

What arrives with the order

Width, height and colour travel with the order, and the shopper can change them with Edit options in the cart. Saving the design creates a proof image for the app's Orders page.

Make it yours

  • Mix repeat directions. Give each design its own repeat setting, so one calculator sells across, down and both-ways patterns.
  • Add more units. Offer centimetres and feet and 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 your own description. Set the repeat in the Designer step with the wallpaper bindings guide.

FAQ

Can wallpaper repeat across the wall instead of down?

Yes. The repeat direction is a setting on the pattern. The calculator and the price stay the same.

Can customers preview the wall at the size they typed?

Yes. The Product Designer draws the wall from the width and height they entered and shows the total beside it.

Every pattern, repeating the way you print it.

Install Free on Shopify

Whatever you sell, however you price it · The last options app you'll shop for