More pieces
Badges, icons and dividers
The small things that make a page easy to read: a badge that says New or Sale, an icon for the bag or the menu, a line between two sections.
How to make one
- Draw a small box, or type a word.
- Choose ⋯ › Turn into › Badge, Icon or Divider.
Each one
- Badge
- A short word on a coloured pill. On a product card, set Show it to On sale or Sold out and it appears only when that's true (see Reading data).
- Icon
- Menu, bag, search, account, saved, close, previous and next. Pick one under Icon; it takes the text colour around it.
- Divider
- A thin line in your store's line colour. Make it taller or give it a background for a bolder one.
Good to know
- An icon that does something needs a click action (see Click actions): the bag opens the cart, the menu opens a drawer.
- Screen readers say an icon's name, so a bag icon reads as “Bag”.