Wallpaper and product image bindings

Wallpaper and product image bindings

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

Merchant goal Repeat Repeat at panel width Placement Show panels
Roll wallpaper Repeat horizontally or Roll wallpaper (locked grid) On Free (roll) / Locked (locked grid) Recommended
True-scale mural No repeat On Free or Locked Optional
Cut guides only Any Off Free On
Grid tile Repeat both On Free Optional

Product image vs background

Goal Use
Customer pans a pattern on a sized wall; panel seams and rulers reflect real panel width Product image binding
Static tiled fill behind design elements (no true-scale pan preview) background binding with Tile on the image map
Variant or swatch picks which pattern file loads Product image (dynamic source or per-choice map)

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:

Setting Typical wallpaper value Why
Customer access Product preview (typical) or Full editing if customers also add text or clipart on the wall Canvas follows calculator choices; preview profile hides the Preview toolbar tool
Layout mode Drag image Wall size stays fixed; the pattern moves inside it
Image drag axis Auto or Horizontal only Matches how customers reposition roll wallpaper

Optional toolbar tools (Step 5 tools row):

Tool When to add
Show panels Green vertical lines at each panel seam across the artboard — requires panel width on the active Product image binding
Ruler Edge tick marks in artboard units (gear → Ruler). Separate from Show panels; does not replace panel seam guides

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

Product image binding fields

Open the Product image binding in Canvas bindings. Cards appear in this order:

  1. Image sources — includes Per-choice mapping when the mode is Calculator option
  2. Fallback image
  3. Pattern sources (when Image sources is Dynamic)
  4. Print width sources (when Image sources is Dynamic)

Existing calculators that were saved before these cards keep working: Pattern sources defaults to Static, Print width sources infers Static or Dynamic from what you already configured, and Placement metafield stays None.

Image sources

Mode Use when
Dynamic (product / variant) One pattern pipeline from Shopify. Add one or more sources; they are tried top to bottom and the first resolved image URL wins.
Calculator option (per choice) Each pattern swatch or dropdown choice gets its own image row in this card. Each row sets the image, Repeat, Placement, Panel width, unit, Repeat pattern at panel width, and optional Panels in image. Print width sources and Pattern sources are hidden in this mode — those settings live on the row.

Dynamic source types (add as many as you need):

Source type Reads
Variant featured image Selected variant image, then the product featured image
Variant metafield File or URL metafield on the variant
Product metafield File or URL metafield on the product
Fixed URL A single image URL for every product

Fallback image

Optional image shown when no Image source resolves (no variant/metafield URL, or no calculator choice selected). This card sits directly under Image sources.

Pattern sources

Shown when Image sources is Dynamic. When Image sources is a calculator option, set Repeat and Placement on each map row instead.

Mode Use when
Static (default) Pick Repeat on this binding. Existing bindings that already have a Repeat value stay Static until you change this.
Dynamic (product / variant) Read the repeat mode from a product or variant metafield. Sources are tried top to bottom.

Dynamic metafield values (text metafield; first that matches wins):

Metafield value Same as Repeat
repeat-x Repeat horizontally
repeat-y Repeat vertically
repeat-xy Repeat both
repeat-roll Roll wallpaper (locked grid)
none (or no-repeat, cover, mural) No repeat

If no Pattern source resolves, the Static Repeat value on the binding is used.

Default placement is a static setting on this card (Free / Locked). It is hidden when Static Repeat is Roll wallpaper (locked grid) — that mode always locks placement. In Dynamic Pattern mode it is always shown and used when the metafield is not roll wallpaper.

Placement metafield (optional) — one product or variant metafield (not a source list). When it resolves, it overrides Default placement for that product. Leave None to use Default placement. Accepted values: free, locked (also pan / no-pan). Roll wallpaper still always locks.

Repeat (tile pattern)

Value Behavior
No repeat (printed / cover fit) Single image; without panel-aligned scaling below, the image scales to cover the artboard
Repeat horizontally (repeat-x) Roll wallpaper along the wall width
Repeat vertically (repeat-y) Vertical repeat only — does not use panel-width true-scale tiling (use repeat-x, repeat both, or Roll wallpaper for panel-aligned rolls)
Repeat both (repeat-xy) Grid of tiles
Roll wallpaper (locked grid) Roll repeat with placement locked; Repeat pattern at panel width is always on; panel width is required

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 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:

Setup Set panel width here
One pattern for all products (Image sources Dynamic) Print width sources on the binding — Static (one width) or Dynamic (metafields)
Different width per pattern swatch (Image sources Calculator option) Panel width on each row in Per-choice mapping (this card is inside Image sources)

Print width sources is shown only when Image sources is Dynamic:

Mode Use when
Static One width for every product (the former Fixed value source). Existing bindings that only had a fixed width stay Static.
Dynamic (product / variant) Product or variant metafields, tried top to bottom; the first that resolves to a width wins. Typical order: variant metafield, then product metafield.

When the binding uses Calculator option (per choice), set Panel width on each pattern row. The standalone Print width sources card is hidden.

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

Image source mode Repeat / placement / panel width
Dynamic (product / variant) Pattern sources (Static Repeat + Default placement, or Dynamic metafields) and Print width sources / Repeat pattern at panel width
Calculator option (per choice) Each pattern row in the map table: Repeat, Placement, Panel width, Repeat pattern at panel width, optional Panels in image

Repeat pattern at panel width

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

Setting Preview behavior
On Pattern width on the artboard equals panel width; height from aspect; typical roll wallpaper — pattern restarts each panel
Off Panel width still draws seam guides when Show panels is on, but the image cover-fits the wall — use for murals, continuous custom rolls, or when panel lines are cut marks only

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

Value Customer can
Free (customer can pan) Drag the pattern when Drag image layout mode is on
Locked (no pan) Pattern position is fixed — murals or locked-grid roll wallpaper

Where it is set:

Image sources mode Placement control
Dynamic (product / variant) Default placement on Pattern sources, optionally overridden by Placement metafield
Calculator option (per choice) Placement on each map row (overrides the binding default for that choice)

Roll wallpaper (locked grid) always locks placement, including when Pattern sources is Dynamic and the metafield is repeat-roll.

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.

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 Pattern sources (Static Repeat + Default placement, or Dynamic metafields) on the binding; add Print width sources and Repeat pattern at panel width 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 → Print width sources → Dynamic (product / variant) → 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.

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.

Recipe 8 — Fully from the Shopify product

Best for: One wallpaper calculator that reads image, repeat, panel width, and (optionally) placement from each product or variant — no per-choice map.

  1. In Shopify, create metafields (examples):
    • Image file/URL — custom.pattern_image
    • Repeat mode (text) — custom.pattern_repeat (repeat-x, repeat-roll, none, …)
    • Panel width (dimension) — custom.pattern_print_width
    • Placement (text, optional) — custom.pattern_placement (free or locked)
  2. Product image → Image sources → Dynamic (product / variant). Add Variant metafield / Product metafield for the image (and Variant featured image if you want that as a fallback).
  3. Upload a Fallback image for products that have no metafield image yet.
  4. Pattern sources → Dynamic (product / variant). Add the repeat metafield (variant, then product if you want a fallback). Set Default placement for products whose repeat metafield is missing or not roll wallpaper. Optionally set Placement metafield.
  5. Print width sources → Dynamic (product / variant). Add the width metafield (variant, then product). Set Print unit if the metafield is a plain number. Turn Repeat pattern at panel width On for pre-printed rolls.
  6. Publish the calculator so storefront variant changes pick up metafield values.

Troubleshooting

Symptom Likely cause What to check
Panel lines show but the pattern still fills the whole wall Repeat pattern at panel width is Off Turn On for true-scale roll tiling, or accept cover-fit for Recipe 4
Scale looks wrong but seams are absent Panel width not set Set per-choice Panel width or binding Print width sources
Pattern does not restart at green seams Repeat pattern at panel width Off, or wrong repeat mode Use repeat-x or roll locked grid with Repeat pattern at panel width On
Variant change does not update image, repeat, or width Metafield not in the matching source card, or calculator not republished Confirm namespace/key on Image sources, Pattern sources, and Print width sources; republish after binding changes
Repeat stays on the old Static value Pattern sources is still Static, or the metafield value is not a recognized token Switch Pattern sources to Dynamic; use repeat-x, repeat-y, repeat-xy, repeat-roll, or none
Customer cannot pan Default placement or Placement metafield is Locked, or Display only profile Set Free on Default placement (and the metafield if used) and Product preview with Drag image
Pattern looks stretched top to bottom on a tall wall Short roll tile with repeat-x Expected when tile aspect is shorter than the wall — tile scales to wall height while panel steps stay aligned
Repeat vertically only but expected panel tiling repeat-y does not panel-align Switch to repeat-x, repeat both, or Roll wallpaper (locked grid)

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.
  • Catalog-driven wallpaper — One calculator for many SKUs: Image sources, Pattern sources, and Print width sources all Dynamic from product/variant metafields (Recipe 8).