Spotlight

Make it yourself

1. Make the thumbnail first: press I and drag a small square image. Choose ⋯ › Make component, and call it Thumbnail.
2. Open the Thumbnail and select its image. In the Behaviour tab, set Shows to Photo, so each copy shows its product's photo.
3. Back on the page, open the Library and drag in a List of products. Under Each item uses, pick Thumbnail; under Records, pick one collection.
4. In the list's Behaviour tab, set When one is clicked to Make it the current item, and tick The current item follows the pointer.
5. Build the big frame above it: a large image, a heading, a price and a button, grouped into a box.
6. Select that box and, in its Behaviour tab, set Read data from to The current item of the list. Then set each part's Shows: Photo, Name, From price, and Page for the button.
7. To mark the chosen thumbnail, open the Thumbnail, select its box, and under Style › Chosen give it the accent background.

Made with

• ListsA box that repeats a component for every product, collection or photo.
• Reading dataParts that show a product's name, price or photo, and only when it applies.
• Hover and chosen looksHow things change when pointed at, when something beside them is, and when picked.