How to Set Up a Horizontal Repeat Wallpaper Calculator on Shopify

This tutorial builds a horizontal wallpaper calculator from the Wallpaper Repeat Horizontal X template in Appify Custom Product Options. The customer picks a colour, types their wall size and sees that variant's own image on the wall, with the price for the area. Every setting the calculator needs is here, in order, with a screenshot from the app.

It is one tutorial in our series of template tutorials. Each repeat type, such as vertical, both ways or a locked roll grid, has its own settings, so each gets its own guide.

What you're building

Here is the finished result in our Wallpaper Repeat Horizontal X demo. The shopper chose Green and typed a wall of 120 by 96 inches.

Step 1: Install the Wallpaper Repeat Horizontal X template

In the app, open Calculators, switch to the Templates tab and search for wallpaper. Find Wallpaper Repeat Horizontal X, open its preview with the eye icon, then click Install to my store.

The calculator template installs as a new draft with no products assigned. Nothing changes in your store until you publish. The screenshots below come from our demo calculator of the same name.

To build it from scratch instead, click New on the Calculators page and choose Create from scratch. Then follow the same steps and add each part yourself.

Step 2: Set up the product in Shopify

The calculator reads its colours, pictures and prices from your Shopify product, so set that up first.

• One variant per design. Name the Shopify option whatever suits your products, such as Color, Style or Pattern. Our demo uses Color.
• A featured image on each variant. That image is the artwork the shopper sees on their wall.
• Each variant's price is its rate per square foot. The formula in Step 7 multiplies the wall area by it.

Our demo product has three variants, Green, Yellow and Black, each with its own image and price.

Step 3: Link the product to the calculator

Link the product now, so the editor can read its options and images while you set up the rest. Open the Placement & Styling step, keep Product pages (recommended), and assign the calculator one of two ways.

• Select products adds individual products, as our demo does.
• Select collections assigns every product in a collection at once, including products added to it later.

A good way to organise a larger catalogue is one collection per repeat type, such as "Horizontal wallpaper", with this calculator assigned to it. It isn't required, but a new horizontal design then only needs its variant images and a place in that collection. You can link a calculator to products or collections at any time.

Step 4: Check the initial price

The next four steps are in the calculator editor's first step, Options & Pricing. At the top, Initial Price is set to Selected Product Variant.

This setting only changes the price when the formula is empty or uses VAR("BASE_PRICE"). This template's formula reads the variant price directly with VAR("SHOPIFY.PRICE"), so you can leave it as it is.

Step 5: Set up the three options

The template has three options. Click the pencil on an option to open its settings. If you build from scratch, add each one with Add Option and pick its type.

Colour: swatches from your Shopify variants

• Type: Image swatch. Each choice shows as a small picture.
• Image source: Shopify product option, and Shopify option: Color. In the demo that option is Color. The swatches come from the linked product's variants, so you never type them in the app.
• Sync option selection to Shopify variant picker: ticked. Picking a swatch also picks that variant on the product page, so the price, photo and cart all follow it.

If your product uses another option, such as Style or Pattern, choose that in the Shopify option list. The swatches stay in sync with your Shopify variants, so a new colour variant shows up as a new swatch.

Why this matters when you sell thousands of designs

With the image source set to Shopify product option, the calculator stores no designs of its own. It reads them from whichever product the shopper is looking at, so one calculator can serve every wallpaper in your store.

• Each product shows its own designs. One wallpaper might come in Green, Yellow and Black, and the next in eight completely different designs. The same calculator shows the right swatches on each.
• Each swatch shows its variant's image. The thumbnail is the variant's featured image, and the Product image binding in Step 10 puts that same image on the wall.
• Each design keeps its own price. The formula reads the selected variant's price, so a premium design can cost more per square foot.
• Changes in Shopify flow through. Add or remove a variant in Shopify, and the swatches update with it. Nothing needs changing in the app.

For a store with thousands of wallpapers, this is the difference between maintaining designs in two places and maintaining them once, in Shopify, where you already manage your products.

Dimensions: the wall width and height

• Type: Dimension, marked Required, with the key DIMENSIONS_IN. The formulas below use that key, so keep it exactly.
• Dimension 1 is Width and Dimension 2 is Height. Both use the unit "in", a minimum of 0 and 0 decimals. Set an initial value, maximum or step here if your printer needs one.
• Its own Formula and Rate stay empty, so the option adds no price by itself. The area variable in Step 6 uses its numbers instead.

Selling in centimetres, metres or feet? The Unit field on each dimension is the first place to change it. It sets the unit the shopper sees beside the Width and Height inputs, such as "cm" instead of "in".

The numbers the shopper types then arrive in that unit, so change these to match:

• The Designer's unit. In Step 9, set the Fallback artboard Unit to the same unit, so the wall is drawn at the right size.
• The area variable. In Step 6, centimetres times centimetres divided by 10,000 gives square metres, so name it something like AREA_M2 and divide by 10000 instead of 144.
• The price and the summary. Set each variant's price as a rate per square metre, use the new variable in the Step 7 formula, and change the summary text in Step 8 to {result} m².

If shoppers should pick their own unit, the Wallpaper Multi Unit calculator shows a setup with cm, feet and inches in one calculator.

Preview & Show Price: the button that opens the Designer

This is a Product Designer option, and its label is the button text the shopper sees. The editor's Designer step only appears once a calculator has one.

Linked option is set to "None - don't link an option", so the button opens the Designer without an upload. Leave Quick preview unticked, since there is no upload to approve. Designer instructions is optional text that shows in a small popup when the Designer opens.

Step 6: Add the AREA_FT2 variable

Below the options, the Variables section holds one variable. To build it yourself, click + Add Variable, name it AREA_FT2 and enter this formula.

( INPUT("DIMENSIONS_IN", "dim1") * INPUT("DIMENSIONS_IN", "dim2") ) / 144

• INPUT("DIMENSIONS_IN", "dim1") is the Width input of the Dimensions option, and "dim2" is the Height input.
• Width times height gives square inches. There are 144 square inches in a square foot, so dividing by 144 gives square feet.

A pricing variable can be reused anywhere: in the formula, in the price summary, and in rules.

Using other units

The variable has two jobs: multiply width by height, then convert the result into the area unit you price by. Only the end of the formula changes. Find the unit your Dimensions option uses and the area you want to charge for:

For example, with Dimensions in centimetres and prices per square metre, the variable becomes:

( INPUT("DIMENSIONS_IN", "dim1") * INPUT("DIMENSIONS_IN", "dim2") ) / 10000

• Rename the variable to match, such as AREA_M2, and use the new name in the Step 7 formula and the Step 8 summary item.
• The key DIMENSIONS_IN can stay. It is only a name, and changing it would break every formula that uses it.
• Set your Shopify variant prices per the same area unit, such as a price per square metre.

Step 7: Enter the total price formula

Further down Options & Pricing is the Total price formula section. The formula goes in the Unit price calculation field, marked Primary formula.

VAR("AREA_FT2") * VAR("SHOPIFY.PRICE")

That is the wall area in square feet times the selected variant's price. A 10 by 8 foot wall is 80 square feet, so a variant priced at 29 gives a total of 2,320.

Price granularity stays on Per unit. The formula gives the price of one wall, and the cart quantity multiplies it. Most shoppers order a quantity of 1, so they pay the formula's price, and two identical walls cost twice as much.

Choose Total only when your formula already counts the quantity itself, for example by multiplying by a quantity option. Then the formula's result is the whole line price, and it is not multiplied again.

Step 8: Show the area in the price summary

The price summary is in the editor's second step, Optional features, under Price Summary. Tick Options and Total under Show fields. Then, under Options to show, use Add item to pick the AREA_FT2 variable.

Label the item Area, set its text to {result} ft² with 2 decimals, and leave Format value as price off, because it is an area, not money. The demo also ticks Show price different text, which shows how each choice changes the price.

Here is the calculator with everything so far, before the shopper fills it in:

Step 9: Set up the Designer's wall size

Open the editor's Designer step and make sure the Designer tab is selected. Designer and Image Edit each keep their own settings, and this calculator uses the Designer, so set everything below with Designer selected.

First, the unit. Click the gear icon (1) next to the Designer and Image Edit tabs, choose Designer (2), then Artboard (3). Set the Fallback artboard Unit (4) to Inches to match the Dimensions option.

This Unit applies to every print area. The fallback width and height on that tab are only used when a print area has no size of its own. This one gets its size from an option, so the right panel sets it.

Then, in the right panel:

• Right-panel options: pick Colour and Dimensions, so the shopper can change them inside the Designer.
• Artboard size for Print area: Size comes from is From an option. Width when the option is empty and Height when the option is empty are both 96 in. They set the wall the shopper sees until they type a size.
• Artboard size binding (inside that section): Size from is Width & height sources. Width source and Height source are both Dimensions (dimensions), with Width dimension input set to Width and Height dimension input set to Height. This is what makes the wall in the Designer the size the shopper typed.

Building from scratch? Choose From an option, fill in the two sizes for when the option is empty, then add the Artboard size binding inside that section.

The wall becomes the size the shopper typed. The size labels on the wall's edges show feet and inches, so a 120 by 96 inch wall reads 10 ft by 8 ft.

Step 10: Set the Product image binding

The Product image binding, also under Canvas bindings, decides which image goes on the wall and how it repeats. To add it yourself, use + Add binding and pick Product image. The screenshot shows its three main cards.

Image sources: where the picture comes from

This setup uses Dynamic (product / variant) with one source, added with + Source: Variant featured image. The wall shows the image of the variant the shopper picked, or the product's featured image if the variant has none.

You can add more than one source. They are tried from top to bottom, and the first one that finds an image wins. The other source types suit other setups:

• Variant metafield or Product metafield. Use these when the pattern tile is not your product photo. Store it in a file or URL metafield.
• Fixed URL. One image for every product that uses the calculator.
• Calculator option (per choice). This separate mode gives each swatch or dropdown choice its own uploaded image, with its own repeat, placement and panel width. It fits patterns that are calculator choices rather than Shopify variants.

Below Image sources, the Fallback image shows when no source finds an image. Our demo uses a plain wall texture so the wall is never blank. Use Replace to upload your own.

Pattern sources: which way the image repeats

With Static, you pick one Repeat for every product. For this tutorial it is Repeat horizontally (repeat-x). With Repeat pattern at panel width on, the image then repeats across the wall one panel at a time.

The other values are Repeat vertically, Repeat both, Roll wallpaper (locked grid) and No repeat, and each is its own setup.

Default placement decides whether the shopper can move the artwork. Free (customer can pan) lets them drag it into position, and Locked keeps it fixed. Placement override can read free or locked from a metafield or a calculator variable, and None keeps the default.

Dynamic (metafield or variable) reads the repeat from a metafield or pricing variable instead, using values such as repeat-x or repeat-y. If nothing is found, the Static Repeat is used.

Print width sources: how wide one panel is

Print width is the real width of one printed panel, such as your roll width. Pick the Print unit and enter the Print width, which is 56 cm in our demo. The app converts it to the Fallback artboard unit, and it takes the height from the image's shape so the artwork isn't stretched.

With Static, every product uses this one width. With Dynamic, it can come from a metafield or a pricing variable, which helps when widths differ by product or by paper.

Repeat pattern at panel width: does each panel hold the whole design?

This checkbox depends on your artwork, so look at your files before you set it.

It turns on by default when you pick Repeat horizontally, so untick it if your artwork spans panels. Our demo leaves it off, because its crane artwork runs across the whole wall. If one image file holds two or more panels side by side, the optional Panels in image field tells the app how many, once the checkbox is on.

Step 11: Set the customer experience and tools

Click the same gear icon as in Step 9, stay on the Designer tab, and choose the General tab to find Customer experience. These are the customer access and layout settings for this calculator.

• Customer access: Limited editing. The wall follows the calculator choices, and the shopper only gets the tools you allow.
• Layout mode: Drag image. The wall stays the size the shopper typed, and the artwork moves inside it.
• Image drag axis: Automatic (based on fit). The shopper can only drag where the image is bigger than the wall.
• Customer capabilities: all left off, so there are no text, clipart or upload tools.

On the toolbar above the canvas, add two tools with the + button. Person shows a figure for scale, and Show panels draws the green seam line at each print width.

To have a tool on when the Designer opens, click its chip in the preview and set it on by default, as the demo does for both. If a Grid tool appears, which new calculators start with, you can remove it.

The Export tab in the same gear settings decides which print files come with each order. The template's settings work as they are.

Step 12: Publish

Click Publish in the editor header. Saving alone keeps your changes as a draft, and only publishing updates your store. Then open the product page, pick a colour, type a wall size and click Preview & Show Price to check the result.

Step 13 (optional): Add your own options, such as paper type

The template has no paper type, but you can add any option the price depends on. In Options & Pricing, add an option such as Paper type, as a Dropdown or Button type, with one value per paper.

Paper usually changes the price per square foot, not a flat fee. Type each paper's number in its Formula field and leave Rate at 1. Make the option required, or give it a default choice, so a paper is always selected.

Then replace the formula from Step 7 with one of these two. Both assume the option's key is PAPER_TYPE.

• Paper sets the rate. Each value is the price per square foot for that paper, so the variant price no longer sets the rate: VAR("AREA_FT2") * OPT("PAPER_TYPE")
• Paper multiplies the variant's rate. Each value is a multiplier, such as 1 for standard and 1.5 for a premium paper: VAR("AREA_FT2") * VAR("SHOPIFY.PRICE") * OPT("PAPER_TYPE")

Advanced: one calculator for every product with metafields

The setup above reads only the image from the product. Four settings on the Product image binding can also come from metafields, which lets one calculator serve every wallpaper in your store.

• Image sources: a variant or product metafield holding the pattern, as a file or URL.
• Pattern sources: Dynamic, reading a text metafield such as repeat-x, repeat-y or none.
• Print width sources: Dynamic, reading a dimension metafield.
• Placement override: a metafield holding free or locked.

The catch is that every product needs those metafields filled in. Product metafields can be set in bulk with a Shopify product CSV import, using a URL metafield for the image. Variant metafields are set with Shopify's bulk editor instead.

Once they're set, one calculator can cover designs that repeat in different directions.

FAQ

Where does the formula go?

In Options & Pricing, in the Total price formula section, inside the Unit price calculation field marked Primary formula.

Where does the wallpaper image come from in this setup?

From the selected variant's featured image in Shopify. The Product image binding reads it with the Variant featured image source, and falls back to the product's featured image.

Why does the wall match the size the shopper types?

The wall's size comes from the Dimensions option's Width and Height inputs, through the Artboard size binding inside the print area's From an option setting. When the shopper changes a number, the wall is redrawn at the new size.

Should I tick Repeat pattern at panel width for horizontal wallpaper?

It depends on the artwork. Tick it when each panel holds the full pattern and lines up with the next. Leave it off when the artwork spans several panels, as in a mural.

Do I need one calculator per collection?

No. It's one way to organise a large catalogue. You can assign products one by one, or use metafields and run every product from a single calculator.