Product listing image from catalog fields

Ecommerce ops runs this when the catalog changes. Product name, price, badge, photo. The fields are already in a catalog export. Two hundred listings should come from two hundred rows of a file you already have. No one should lay out a card per SKU.

This happens when the catalog changes, not once when the card is first drawn. The person doing it already has the rows. They should not open a design file for each price move.

The job is one listing image per product, at the storefront’s listing size, as JPEG. Photos compress better as JPEG, so this run uses --format jpg. You can re-run export with --data once per product, or put one artboard per SKU with colocated data. Same component either way.

Give Lerret a React component under .lerret/ and a data file. export writes a JPEG. Same card, catalog fields swapped, many images.

The component is .lerret/commerce/product-card.jsx. It draws the product name, the price, the badge, and a photo slot. Those are the catalog fields. The layout stays in the component. You do not rebuild the card when a price moves.

Data is a catalog export saved locally as catalog.json. One export run per product with --data (bulk pattern 1: re-run with a different --data file), or one artboard per SKU with colocated .data.json / .data.js (bulk pattern 2). --data applies to every artboard in the run and is never written back into .lerret/. The rows are the file you already have. There is no batch product, no queue, no orchestrator.

The image is a JPEG (--format jpg) at the storefront’s listing size. Photos compress better as JPEG. Product name, price, badge, and photo slot are the catalog fields. Two hundred rows are two hundred runs or two hundred colocated artboards.

Two hundred listings from two hundred rows of a file you already have. No manual layout per SKU. A design file per product will drift the first time someone restyles one badge. You use Lerret because the listing is the row, and the row is already in the catalog file.

Photos compress better as JPEG, so the run uses --format jpg. The photo slot is part of the card. Two hundred listings from two hundred rows of a file you already have.

npx @lerret/cli@latest export --data --format jpg

Start a project with npx create-lerret@latest. More in the use cases index.