Section header

Use the section header component to group items in a list. It helps merchants to quickly see what items are related.

Default

Use to group related content together, for example orders received on the same day.

Shipping costs card with multiple sections: domestic, international

Default

Use to group related content together, for example orders received on the same day.

Shipping costs card with multiple sections: domestic, international

Fixed

Use if your list section could be longer than the height of the screen. For example you may need fixed section headers for a list of orders, because merchants may receive many orders in one day.

Shipping costs card with multiple sections: domestic, international

Best practices

  • List the groups in a clear and obvious way, such as alphabetically or by date.
  • Avoid cluttering the list with long section titles that make it hard to scan.
  • Avoid using section headers if your list usually has only 1 item in every grouping. The more section headers there are, the harder it is for merchants to scan the list.

Content guidelines

  • Keep titles short
  • Created today

  • Created Aug 15

  • Discount created today, Aug 15

  • Created August 15, 2018

Read more about dates and numbers.

  • Use a clear sort order
  • Today

  • Yesterday

  • Monday

  • Recent

  • Other