Overview

Wallpaper-style calculators need the bound pattern image to match real wall size on the artboard — not stretched to fill the screen. In Appify CPO you do this with a Product image canvas binding (Step 5 → Designer mode → right panel → Canvas bindings → Product image), plus Customer experience settings such as Product preview and Drag image.

This page explains each Product image field, when to use Product image vs a background binding, and copy-ready recipes for common wallpaper setups. For other binding types (artboard size, cut-line, bleed), see Canvas Bindings.

Quick reference

Product image vs background

Most wallpaper storefront previews should use Product image, not background alone.

Step 5 settings to set first

Before editing the binding, open Step 5 → Designer mode → gear icon → Customer experience:

Optional toolbar tools (Step 5 tools row):

See Configuring Step 5 for profiles, capabilities, and tools.

Product image binding fields

Open the Product image binding in Canvas bindings to configure the sections below.

Image source

Repeat (tile pattern)

Set repeat on the Product image binding (or per choice in the map), not on separate width/height bindings unless you split sizing on purpose.

Panel width (physical print width)

Panel width is the real-world width of one printed panel (one roll width, one mural panel, one tile module).

• Show panels seam guides and production panel math use this value when it is set.
• Height is never entered separately — the editor derives height from the image aspect ratio so the pattern is not skewed.
• Values are converted into your Default artboard unit (Step 5 → Default artboard). Match Print unit / per-row Unit to how you measure panels (inches, feet, and so on).

Where to set it:

Physical print width sources (binding level — used when a per-choice row has no Panel width, or when the binding is Dynamic without a choice map):

Add one or more sources; they are tried top to bottom and the first that resolves to a width wins. Typical order:

1. Variant metafield — width for the selected variant
2. Product metafield — fallback when the variant has no value
3. Fixed value — same width for every product (only add one fixed source; if it is first in the list it always resolves)

When the binding uses Calculator option (per choice), set Panel width on each pattern row. Row values override binding-level sources for that choice. Use binding-level sources only as a shared fallback for choices without their own width.

Use a Shopify dimension metafield when possible (value includes unit). For plain number metafields, set Print unit on the binding.

When the customer changes variant on the product page, panel width from metafields is refreshed after you publish the calculator.

If panel width is not set anywhere, the storefront preview falls back to cover fit and Step 5 shows a warning on the binding.

Where repeat and placement are configured

Repeat pattern at panel width

This checkbox controls whether panel width drives preview scale and tiling, or only cut guides.

Defaults: On when horizontal repeat is enabled; Off when there is no repeat unless you turn it on for a single-panel true-scale mural (Recipe 3).

For repeat-x roll wallpaper with Repeat pattern at panel width On, a tile shorter than the wall height is scaled uniformly so the pattern fills the wall height while horizontal panel steps stay aligned to panel width.

Roll wallpaper (locked grid) always repeats at panel width.

Placement

Per-choice map rows can override placement for each pattern.

Panels in image (optional)

When your sample file shows multiple panels side by side in one image (for example two 24″ panels in a single asset), enter how many panels that image width represents. Tiling then steps every single panel width, not the full file width.

Only shown when repeat at panel width is on and repeat is horizontal, both axes, or roll locked grid.

Fallback image

Optional image used when the primary source (variant, metafield, or map entry) cannot load.

Recipes

Each recipe assumes wall Width and Height calculator options are bound to artboard width and artboard height (feet or inches with matching pixels per unit on the binding). Adjust units to match your calculator.

Recipe 1 — Standard roll wallpaper (repeat-x)

Best for: Pre-printed roll goods where the pattern repeats every panel width.

1. Customer experience: Product preview, Drag image, Image drag axis → Auto or Horizontal only.
2. Canvas bindings: Add Product image → Calculator option (per choice) mapped to your Pattern swatch (or Dynamic if one URL/metafield source for all variants).
3. Configure repeat and panel width (example for standard rolls):
   • Repeat → Repeat horizontally (repeat-x)
   • Panel width → roll width (for example 2 ft or 24 in)
   • Repeat pattern at panel width → On
   • Placement → Free
   • Per-choice map: set these on each pattern row.
   • Dynamic: set Repeat and Default placement on the binding; add Physical print width sources and Repeat pattern at panel width on the binding when width is not per choice.
4. Tools: Add Show panels and Ruler from the + menu if customers should see seams.
5. Customer capabilities: Leave features off if the wall is driven only by calculator options.

Recipe 2 — Roll wallpaper (locked grid)

Best for: Roll goods where the pattern grid is fixed and customers must not pan.

1. Same Step 5 profile as Recipe 1 (Product preview, Drag image).
2. Product image per pattern:
   • Repeat → Roll wallpaper (locked grid)
   • Panel width → required (validation error if missing)
   • Repeat pattern at panel width → always on (not editable)
3. Placement is locked automatically for this repeat mode.
4. Add Show panels if seam guides help production.

Recipe 3 — Single-panel mural (true scale)

Best for: One printed piece sized to panel width, centered on the wall with honest margins when smaller than the wall.

1. Customer experience: Product preview, Drag image.
2. Product image:
   • Repeat → No repeat (printed / cover fit)
   • Panel width → printed width of the mural panel
   • Repeat pattern at panel width → On
   • Placement → Free or Locked depending on whether the customer may reposition
3. Optional Show panels — usually off for a single panel.

Recipe 4 — Mural or continuous print (panel lines as cut guides only)

Best for: Panel seams mark where to cut, but the artwork flows continuously (no restart each panel).

1. Same Step 5 profile as Recipe 1.
2. Product image:
   • Repeat → No repeat or Repeat horizontally as your product requires
   • Panel width → cut width for seam guides
   • Repeat pattern at panel width → Off
   • Placement → Free if customers may pan
3. Add Show panels so green seam lines match panel width even though the image cover-fits the wall.

Recipe 5 — Multi-panel sample file

Best for: One uploaded asset contains two (or more) panel repeats side by side.

1. Start from Recipe 1 or 2.
2. On the pattern row, set Panels in image to the count of panels in the file (for example 2 for a 2×24″ strip).
3. Set Panel width to the width of one panel, not the full file.

Recipe 6 — Panel width from Shopify metafield

Best for: Width varies by variant (different roll widths per SKU).

1. Create a dimension metafield on the product or variant in Shopify admin (for example namespace custom, key pattern_panel_width).
2. Product image binding → Physical print width → add Variant metafield (and optionally Product metafield as fallback).
3. Enter namespace and key to match your metafield.
4. Set Print unit if you use plain number metafields instead of dimension type.
5. Configure repeat and Repeat pattern at panel width per Recipe 1 or 3.
6. Publish the calculator so storefront variant changes pick up metafield values.

Per-choice Panel width on a pattern row still overrides metafield sources when that choice is selected.

Recipe 7 — Pattern grid (repeat both)

Best for: Tile modules that repeat in a grid (wallpaper panels or floor-style grids).

1. Product preview, Drag image.
2. Per pattern: Repeat → Repeat both (repeat-xy).
3. Panel width → one module width; Repeat pattern at panel width → On.
4. Panels in image if one asset contains multiple modules in a row.

Troubleshooting

Examples

• 12 ft wall, 2 ft roll — Bind wall to 12×8 ft artboard; Product image repeat-x, panel width 2 ft, Repeat pattern at panel width On; customer pans horizontally; Show panels every 2 ft.
• Custom mural 4 ft wide on 10 ft wall — No repeat, panel width 4 ft, Repeat pattern at panel width On; mural renders at 4 ft with margins; no pan if Placement Locked.
• Continuous scenic roll with cut marks — repeat-x, panel width 3 ft, Repeat pattern at panel width Off, Show panels On; image cover-fits; seams are production guides only.

Related Docs

• Canvas Bindings
• Configuring Step 5
• How customers use the editor
• Product Designer Overview
• Product Designer Translations
• Setting up the option