Layout and structure

Layout is the arrangement of elements on a page. A good layout helps merchants understand and find information to complete their goals. To learn more, visit the Layout documentation.

Layout primitives

All layouts and spacing should be handled using layout primitives. This keeps our components simple, flexible and composable. Our component naming conventions follow web standards for logical properties and values.


Layout primitives allow you to specify values for different screen sizes. Check out the layout primitives for information on how responsive props apply to each component.

Layout compositions

Layout compositions are built with layout primitives. Use these components to build common layouts in the admin with the help of sensible defaults.

  • Read the Layout guidelines for information on layout behaviors, as well as examples.