RistmarkStart free

Guide

Product cards

A product catalogue, a price list with photos, a set of name badges, a staff directory: one small design printed once for every record in your data. This walkthrough builds product cards, each with a photo, a name, a description, a price with a product code, and a QR code that opens the product's page.

You will use three things together: a Repeater (prints one design per record), an Image set to take its picture From data, and a QR code whose value comes from the record.

The data

Paste this into Manage data (the JSON tab):

{
  "catalogue": { "title": "Autumn range", "season": "Autumn 2026" },
  "products": [
    { "name": "Ceramic mug",       "sku": "MUG-014", "price": 12.5, "photo": "",
      "blurb": "Hand-glazed, holds 350 ml, dishwasher safe.", "url": "https://shop.example/mug-014" },
    { "name": "Linen apron",       "sku": "APR-203", "price": 29,   "photo": "",
      "blurb": "Washed linen with two deep pockets and an adjustable strap.", "url": "https://shop.example/apr-203" },
    { "name": "Oak serving board", "sku": "BRD-077", "price": 46,   "photo": "",
      "blurb": "Solid oak, oiled finish, 40 cm long.", "url": "https://shop.example/brd-077" },
    { "name": "Wool throw",        "sku": "THR-310", "price": 84,   "photo": "",
      "blurb": "Soft Latvian wool in a classic check.", "url": "https://shop.example/thr-310" }
  ]
}

The photo values are empty here on purpose: a picture in your data is the id of a PNG or JPEG you uploaded to your workspace (or a small picture sent inline), and you pick sample pictures in the editor in Step 3 rather than typing ids.

Step 1 — A title and the repeating section

  1. Add two Text blocks at the top: {{ $data.catalogue.title }} (large) and {{ $data.catalogue.season }} (grey).
  2. Open Search blocks and layouts at the top of the palette and search for "repeating section". There is no Repeater tile — the search is the way in. It arrives with one line of sample text and no list yet, so it prints nothing.
  3. Select it. In the side panel choose the list products in the list chooser. The panel says "This section will repeat 4 times, once per record". Set Name for each record to product, and the gap between cards to about 5 mm.

Step 2 — Design one card

You only design one card; the others are faded previews of the same design (see Repeater).

  1. Click into the design copy ("Item design · record 1") and replace its sample text with a Row of three columns. Give the first column a fixed 28 mm, the last a fixed 24 mm, and leave the middle one to take the rest (Column section in the side panel).
  2. Middle column: a Stack holding three Text blocks — {{ $data.product.name }} (bold, larger), {{ $data.product.blurb }} (grey), and {{ format($data.product.price, 'currency') }} · {{ $data.product.sku }}.
  3. To draw a frame around the card, select the Row and give it a border and some padding in its Box section.

Step 3 — The photo

  1. Put an Image in the first column. Set Source to From data.
  2. Field: choose product › photo. Nothing changes until you choose one.
  3. Under Sample records, each record has a Sample picture list of the PNG and JPEG pictures you have uploaded. Pick one per record to see the card with real photos. That changes only the sample data you are looking at, never the template.
  4. Optional: a Fallback picture for a record with no photo of its own, and If a record has no picture: a "Picture unavailable" marker (the default) or empty space.
  5. Set the fit to cover if photos vary in shape and you want them to fill the square.

Step 4 — The QR code

Put a QR code (palette group "Scan codes") in the last column. Set its Value to {{ $data.product.url }} — click into the Value box and click the field in the Data bindings pane — and its size to about 22 mm. Every card now carries a code for its own product link. Keep the link short: a long value needs more squares across the same area, and each square gets too small to scan reliably when printed small. See QR code.

What you should see

The title and season, then four bordered cards one below the other. Each card has its photo on the left (until you pick sample pictures, the "Picture unavailable" marker), the product name, its description, "€12.50 · MUG-014" in the accent colour, and a QR code on the right. The cards follow the order of the list in your data.

Variations

  • Different pictures per record, same logo on every card. In the Field list, the record's own fields come first; fields of the whole document (such as a shop › logo) follow and print the same picture on every card.
  • Records with no photo. Leave them empty: they show the fallback picture or the marker, and the preview of a download says how many records had no usable picture.

Output differences

PDF, HTML and Word all draw a card per record; pictures are PNG or JPEG. In a Word file the Row becomes a borderless table and the QR code a picture. A web address in the photo field is never fetched — upload the picture and send its id.

If something looks wrong

  • Nothing prints. No list is chosen, or it is empty. The panel says "Not repeating yet — choose a list; prints nothing" or "No records in this sample — prints nothing".
  • Every card shows "Picture unavailable". The photo field is empty or holds something that is not an uploaded PNG/JPEG id; the Sample records line says why each record has none.
  • The QR code is replaced by a note starting "QR code (value too long". The link needs more bytes than one code holds; shorten it or lower the error correction.
  • Editing one card changes all the cards. That is how a repeater works: there is one design. A difference between records has to come from the data.
  • Cards run onto a second page. A repeater that runs long continues on the next page, breaking between records; it stops after 3000 records and says so on the page.

See Image, QR code and Repeater for every option of each block.

The cards from this guide are kept as the tested example product-cards-1; it is checked automatically to lay out and produce PDF, Word and HTML without errors.