Products, images & variants

Product data and stable IDs connect the collection to the detail view. Pro also uses those IDs for bag, saved items and comparisons.

Edit the catalog

Change names, prices, descriptions, options and image basenames in catalog-data.js. Keep IDs stable unless you also update links and stored selections that refer to them. Product data is fictional fixture data, not a live inventory service.

Pro colour variants

The canvas product begins at €68 in Midnight / Ecru. Its Sand / Ecru variant is €74 with another photo. The variant must resolve through the shared lookup on every page.

const sandCanvas = {
  ...products[0],
  id: 'canvas-sand',
  color: 'Sand / Ecru',
  price: 74,
  image: 'sneaker-sand'
};

In Pro, assets/js/product.js also contains product notes and gallery configuration. Do not change only the visible price or image in HTML: the selected bag line must agree with the detail page.

Replace images

Packaged images use WebP. Replace assets using the same filenames for the simplest first edit, or update every referencing filename and gallery entry together. Keep dimensions and informative alternative text. Use artwork you own or may redistribute; the included generated artwork is approved for redistribution with the download; see LICENSE-AND-ASSETS.md.

Verify one product end to end

1. Open the product from the collection.
2. Change colour and check image, price and available options.
3. For Pro, select a size and add it to the bag.
4. Reload, inspect quantity and confirm checkout uses the same variant.