Moving and reacting
Hover and chosen looks
Anything can change how it looks when the pointer is over it, when the pointer is over something beside it, or when it's the one a shopper picked. No code: you set the look, and the page does the rest.
Looks set
The four looks
Select something and open Style in its Design tab. Across the top are four tabs:
- Normal
- How it looks the rest of the time.
- Hovered
- While the pointer is over it.
- Another one hovered
- While the pointer is over one of the things beside it, in the same box. Fade or shrink the rest, so the one being pointed at stands out.
- Chosen
- While it's the current item of its list: the size a shopper picked, the thumbnail that's showing. See Lists.
What a look can change
- Size %
- Grow or shrink. Grow from the top, the centre or the bottom.
- Opacity %
- Fade it back.
- Blur
- Soften it.
- Move across, Move down
- Shift it a little.
- Bring to the front
- Draw it above its neighbours, for things that overlap.
- Make room
- Push its neighbours aside as it grows.
- Background, Text colour
- Change colour: a chosen chip in your accent colour.
- Speed and Feel
- Quick, normal or slow; smooth, even or springy.
A look for a whole list
- Open the list's component (double-click the list).
- Select its outer box and set the looks there.
Every item in the list gets them. That's how the Rack recipe makes hangers swing forward.
Recipes that use it
- SpotlightA row of small photos under one big one. Point at a product, or tap it on a phone, and it fills the big frame with its name, price and a link.
- RackClothes hang on a rail, overlapping like hangers. The one under the pointer swings forward, the rest fade back, and its name and price show above the rail.
- Size pickerA chip for every size, the chosen one filled in and sold-out ones marked. Add to cart adds exactly the size picked.