Lightning Pages

Visual product catalog

The spring catalog on the account record: six products, one photo each, an Add to order button under every tile. The rep never leaves the account.

Image List
dcImageList
center
The scenario

Open Northwind Distribution and the catalog sits under the highlights panel. Three tiles across, product name, SKU and price under each photo, a search box for larger catalogs. Add to order fires an interaction that creates the order line on this account.

The configuration
  • itemsSObjectMapping on the product object, imageSrc bound to the product photo: the tile is the record.
  • largeContainerCols: 3, imageAttributes.position: below, cropFit: cover: three clean columns, text under the photo.
  • actions Add to order with evtItemActionClick: one interaction creates the order line for the clicked product.
  • searchable: true, searchEngineAttributes.position: right: search where the eye expects it.
Step by step

The settings above are the ones that matter. The tutorial has the whole build: the objects and sample data behind the screen, every step in order, and what to check once it runs.

Open the tutorial
Runs on
Flow Screen ComponentsDynamic ComponentsExperience Site Components

Build it in your org.

85+ components, four Salesforce surfaces, 10 free production licenses. Start with the one you just saw.

Start freeAll use cases