This tutorial builds a vertical repeat wallpaper calculator from the Wallpaper Repeat Vertical Y template in Appify Custom Product Options. The shopper picks a colour and types their wall size. They then see the design repeat from the top of the wall to the bottom, with the price for the area.
Every setting is below, in editor order, with screenshots.
Only one setting makes it vertical: Repeat vertically on the Product image binding. Everything else matches our horizontal repeat tutorial. Both are part of our series of template tutorials.
Prefer to watch? Here is the whole setup as a video.
Short on time? See it in action in under a minute.
What you're building
Here is the finished result in our Wallpaper Repeat Vertical Y demo. The shopper chose Blue and typed a wall 96 inches wide and 144 inches high.
| Part | What it does |
|---|---|
| Shopify variants | One per design. The demo's Color option has Blue, Grey and Black. Each variant's featured image is the artwork, and its price is the rate per square foot. |
| Options | Colour, Dimensions, and a Preview & Show Price button. |
| Variable and formula | AREA_FT2 works out the wall in square feet, and the formula multiplies it by the variant's price. |
| Price summary | Shows the area and the total. |
| Designer | Draws the wall at the shopper's size and repeats the variant's image down it. |
What vertical repeat does on the wall
With Repeat vertically, the design is drawn across the full width of the wall. It then repeats downward, one copy under the next, until the wall is filled. On a given wall width, a taller wall shows more copies.
The shopper can drag the design up or down to choose where a copy starts. In our demo, dragging sideways does nothing, because the design already spans the wall's width. Step 11 explains the setting behind this.
This setup suits artwork drawn as one wide picture that stacks top to bottom, like the map in our demo. For rolls that must line up at every seam, pick one of the repeat types listed in Step 10. Our guide to wallpaper pattern repeats compares all five repeat types.
Want to see the finished calculator explained from the shopper's side first? Read our overview of the Vertical Y calculator.
Step 1: Install the Wallpaper Repeat Vertical Y template
In the app, go to Calculators, open the Templates tab and search for vertical. Find Wallpaper Repeat Vertical Y in the list. The eye icon opens a preview, and Install to my store adds it to your shop.
The calculator template arrives as a draft with no products assigned, so your store is unchanged until you publish. After install, every setting below is already in place. The steps explain each one so you can check or change it.
The storefront screenshots come from our Vertical Y demo. Where an editor setting is the same in both wallpaper demos, the screenshot was taken in the horizontal demo, and its caption says so.
Prefer to start empty? Choose New on the Calculators page, then Create from scratch, and add each part as you go.
Step 2: Set up the product in Shopify
The calculator takes its designs, pictures and prices from the Shopify product, so start there.
- One variant per design. Call the option whatever fits, such as Color, Style or Pattern. Our demo uses Color, with Blue, Grey and Black.
- A featured image on each variant. This is the artwork that repeats down the shopper's wall. Upload the design as one image; it is drawn across the wall's width.
- A price per square foot on each variant. The formula in Step 7 multiplies the wall's area by it. In the demo, Blue is 29, Grey 28 and Black 27.
Step 3: Link the product to the calculator
Link the product before anything else, so the editor can read its options and images. Go to the Placement & Styling step and keep Product pages (recommended). Then assign products in one of two ways:
- Select products picks individual products. Our demo is assigned to its one product this way.
- Select collections covers every product in a collection, including ones you add later.
For a larger range, one collection per repeat type works well, such as "Vertical wallpaper" with this calculator assigned. You don't have to do it this way.
It just means a new vertical design only needs its variant images and a place in that collection. You can link a calculator to products or collections whenever you like.
Step 4: The initial price
Steps 4 to 7 are all in the editor's first step, Options & Pricing. Initial Price sits at the top, set to Selected Product Variant.
It only affects the price when the formula is empty or uses VAR("BASE_PRICE"). This template's formula reads the variant price with VAR("SHOPIFY.PRICE") instead, so there is nothing to change.
Step 5: The three options
The template comes with three options, and the pencil on each one opens its settings. Building from scratch? Add each with Add Option and choose its type.
Colour: swatches from your Shopify variants
- Type: Image swatch, so each choice shows as a small picture.
- Image source: Shopify product option, with Shopify option set to Color. The swatches come from the linked product's variants, so there is nothing to type in the app.
- Sync option selection to Shopify variant picker: ticked. A swatch click also selects that variant, so the price, photo and cart follow it.
If your option has another name, pick it in the Shopify option list. Because the swatches stay in sync with your Shopify variants, a new variant shows up as a new swatch.
It also means one calculator can show each product's own designs. The horizontal tutorial explains why that matters when you sell thousands of designs.
Dimensions: the wall width and height
- Type: Dimension, Required, with the key DIMENSIONS_IN. Keep the key as it is, because the formulas use it.
- Width and Height: Dimension 1 and Dimension 2, each with the unit "in", a minimum of 0 and 0 decimals. Add a starting value, maximum or step here if you need one.
- Formula and Rate: left empty. The option adds no price itself. The area variable in Step 6 uses its numbers.
To sell in another unit, change the Unit on each dimension first. Then match the Fallback artboard Unit in Step 9, the end of the area formula in Step 6, and the summary text in Step 8.
If shoppers should choose their own unit, the Wallpaper Multi Unit calculator shows how.
Preview & Show Price: the button that opens the Designer
This is a Product Designer option. Its label is the button text, and the editor's Designer step appears once a calculator has one.
Linked option stays on "None - don't link an option", because the shopper uploads nothing, and Quick preview stays unticked for the same reason. Designer instructions is optional text shown in a small popup when the Designer opens.
Step 6: The AREA_FT2 variable
Under the options, the Variables section has one variable. To make it yourself, click + Add Variable, name it AREA_FT2 and use this formula.
( INPUT("DIMENSIONS_IN", "dim1") * INPUT("DIMENSIONS_IN", "dim2") ) / 144
"dim1" is the Width input and "dim2" is the Height input. Multiplied together, they give the wall in square inches. A square foot holds 144 square inches, so dividing by 144 gives square feet.
A pricing variable like this can be used again in the formula, the summary and rules. For other units, only the end of the formula changes. The common ones:
| Shopper types | You price per | End the formula with |
|---|---|---|
| Inches | Square feet |
/ 144 (the template) |
| Inches | Square metres | / 1550.0031 |
| Centimetres | Square metres | / 10000 |
| Feet | Square feet | Nothing, end after the brackets |
Rename the variable to suit, such as AREA_M2, and use the new name in Steps 7 and 8. The horizontal tutorial has the full table, including millimetres and metres.
Step 7: The total price formula
Lower down in Options & Pricing is the Total price formula section. The formula goes in the Unit price calculation field, labelled Primary formula.
VAR("AREA_FT2") * VAR("SHOPIFY.PRICE")
That is the area in square feet times the selected variant's price. The demo's 8 by 12 foot wall is 96 square feet, so with Blue at 29 the total is 2,784.
Leave Price granularity on Per unit. The formula prices one wall, and the cart quantity multiplies it. Pick Total only if your formula already counts the quantity itself, so it isn't multiplied twice.
Step 8: The area in the price summary
The price summary lives in the editor's second step, Optional features, under Price Summary. Under Show fields, Options and Total are ticked. Under Options to show, Add item picks the AREA_FT2 variable.
The item is named Area, with the text {result} ft² and 2 decimals. Format value as price stays off, since 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 on the demo's product page once a shopper has filled it in:
Step 9: The Designer's wall size
Open the editor's Designer step with the Designer tab selected. Designer and Image Edit keep separate settings, and this calculator uses the Designer.
Start with the unit. Click the gear icon (1) beside the Designer and Image Edit tabs, pick Designer (2), then Artboard (3). The Fallback artboard Unit (4) is 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:
- Right-panel options: Colour and Dimensions, so the shopper can change both without leaving the Designer.
- Save and note buttons: the panel's Save button reads Save Design, and the Add note button is on. A note the shopper writes there reaches the order as a Production Notes property.
- 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 is drawn at the shopper's size, with feet and inches on its edges. In the demo, 96 by 144 inches reads 8 ft by 12 ft.
Step 10: The Product image binding, set to repeat vertically
This is the step that makes the calculator vertical. The Product image binding, also under Canvas bindings, decides which picture goes on the wall and how it repeats. To add one yourself, click + Add binding and pick Product image.
Image sources: the picture on the wall
The binding uses Dynamic (product / variant) with one source, added with + Source: Variant featured image. The wall then shows the picked variant's image, or the product's featured image if the variant has none.
Sources are tried from top to bottom, and the first image found wins. The other source types are Variant metafield, Product metafield and Fixed URL, and a separate mode, Calculator option (per choice), gives each swatch its own image. The horizontal tutorial explains when to use each.
Below them, the Fallback image appears if no source finds one. Our demo uses a plain wall texture, and Replace swaps in your own.
Pattern sources: choose Repeat vertically
Pattern sources stays on Static, with Repeat set to Repeat vertically (repeat-y). This one choice is the difference from the horizontal template, which uses Repeat horizontally.
- Default placement: Free (customer can pan), so the shopper can drag the design up and down. Locked keeps it still.
- Placement override: None. It can read free or locked from a metafield or a pricing variable when you need that per product.
Print width sources: one panel's width
Print width is the real width of one printed panel, 56 cm in the demo, with Print unit set to centimetres. In this setup it places the green seam lines, and the design is drawn across the wall's width. Static uses one width for every product, and Dynamic reads it from a metafield or a pricing variable.
Repeat pattern at panel width: leave it off
Repeat vertically doesn't use panel-width tiling, so our demo leaves it unticked.
If your design must restart at every panel seam, this isn't the right repeat. Switch to Repeat horizontally, Repeat both or Roll wallpaper (locked grid), which line up with the panel width.
Step 11: Customer experience and tools
Click the same gear icon as in Step 9, stay on the Designer tab, and open General to find Customer experience. These are the customer access and layout settings.
- Customer access: Limited editing. The wall follows the calculator choices, and the shopper gets only the tools you allow.
- Layout mode: Drag image. The wall keeps the shopper's size and the design moves inside it.
- Image drag axis: Automatic (based on fit). The app allows dragging only where the image is bigger than the wall, which in our vertical demo means up and down. You can also limit the direction, such as Horizontal only, which suits roll wallpaper.
- Customer capabilities: all off, so there are no text, clipart or upload tools.
On the toolbar above the canvas, the template has Person and Show panels, added with the + button. Person shows a figure for scale, and Show panels draws the seam lines.
Click a tool's chip in the preview to have it on when the Designer opens, as the demo does for both. New calculators may start with a Grid tool, which you can remove.
The Export tab in the same settings controls which print files come with each order. The template's settings work as they are.
Step 12: Publish
Click Publish in the editor header. Save keeps a draft, and only Publish updates your store.
Then open the product page, pick a colour, type a tall wall such as 96 by 144 inches, and click Preview & Show Price. You should see the design repeat down the wall, and be able to drag it up and down.
Step 13 (optional): Add your own options, such as paper type
The template has no paper type, but you can add any option that affects the price. In Options & Pricing, add an option such as Paper type, as a Dropdown or Button type, with one value per paper.
Type each paper's number in its Formula field, keep Rate at 1, and make the option required or give it a default. Then change the Step 7 formula to one of these, assuming the option's key is PAPER_TYPE:
-
Paper sets the rate (each number is a price per square foot):
VAR("AREA_FT2") * OPT("PAPER_TYPE") -
Paper multiplies the variant's rate (such as 1 for standard, 1.5 for premium):
VAR("AREA_FT2") * VAR("SHOPIFY.PRICE") * OPT("PAPER_TYPE")
Keep Shopify variants for what changes the artwork, so the Variant featured image source always finds the right picture. Other choices can live in the app, which also keeps you clear of Shopify's variant limits.
Advanced: vertical and horizontal designs in one calculator
If you sell both kinds, you don't need two calculators. Store the repeat in a text metafield on each product or variant: repeat-y for vertical designs and repeat-x for horizontal ones.
Then switch Pattern sources to Dynamic (metafield or variable) and add that metafield as a source in Pattern sources. If no value is found, the Static Repeat is used.
Print width and placement can come from metafields the same way. The catch is that every product needs those metafields filled in. The horizontal tutorial covers this setup and how to fill the metafields in bulk.
FAQ
What is the difference between the vertical and horizontal wallpaper templates?
One setting. Wallpaper Repeat Vertical Y uses Repeat vertically on the Product image binding, and Wallpaper Repeat Horizontal X uses Repeat horizontally. The options, formula, summary and Designer setup are the same.
Should I tick Repeat pattern at panel width for vertical wallpaper?
No. Our demo leaves it unticked, as Step 10 explains. If your design must restart at every panel seam, use Repeat horizontally, Repeat both or Roll wallpaper (locked grid) instead.
Can the shopper drag the design sideways?
Not in this setup: the design is drawn at the wall's width, so Automatic only pans up and down.
Where does the formula go?
In Options & Pricing, in the Total price formula section, inside the Unit price calculation field marked Primary formula.
Can one calculator handle vertical and horizontal designs?
Yes. Store repeat-y or repeat-x in a metafield on each product or variant, then add that metafield as a source in Pattern sources, set to Dynamic.
Show every design on the shopper's wall, top to bottom.
Whatever you sell, however you price it · The last options app you'll shop for