Sale / discount overlay set

Ecommerce ops runs this per promotion. A sale starts and every listing image has to carry the same percentage-off ribbon, with an end date that matches the promo. The product fields are already in the catalog. What has to change is the overlay, and it has to change on every card at the same time.

This is promo work, not a one-time brand kit. When the promo later steps from 20% to 30%, the same person runs export again with a new data file. The cards that already went out at 20% have to come back at 30% together.

The job is a full set of listing images with a discount overlay. Each image is one product. Every image in the run shows the same percent off and the same end date. You are not redesigning the product card for the sale. You are putting a ribbon on the card you already have. When the promo moves, the whole set has to come out again so a stale 20% ribbon cannot sit on one SKU.

Give Lerret a React component under .lerret/ and optional data. export writes a JPEG. Same component, data swapped, many images. There is no batch product, no queue, no orchestrator.

The component is .lerret/commerce/sale-badge-card.jsx. It is a product card plus a percentage-off ribbon. The card still shows the product. The ribbon reads the sale fields. Both live in one file in the repo, next to the other commerce artboards.

The sale data is { percentOff, endsOn }, merged into the product fields. The merge is how one promo file sits on top of the product data you already have. A single --data sale-20.json run regenerates the whole set at 20% off. The next tier is sale-30.json. That is bulk pattern 1: re-run export with a different --data file each time. Same components, new values, new images. --data applies to every artboard in the run and is never written back into .lerret/.

The image is a JPEG at listing size.

Changing the whole promo from 20% to 30% is one file and one command, across every product. There is no chance of a stale badge left behind. The ribbon is a field in the data file. You edit percentOff, point --data at the new file, and the set updates together.

npx @lerret/cli@latest export --data sale-20.json

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