4 Design Your Store Layout

Your storefront is made up of layouts, which represent the different page types that can appear, such as product details, checkout, and order confirmation. The default layouts act as templates, and you use them to design, adjust, and preview your pages before publishing live.

Layouts contain a set of design tools, known as widgets, that define the structure of your web store pages. Several widgets are themselves made up of configurable sub-component elements. Widgets contain within them the specific UI functionality to which they relate. For example, the Order Confirmation layout contains information on items ordered, prices, shipping address, and so on. Each layout’s widgets combine to form the overall page layout. Accessible via a component library, widgets can be added, removed, cloned, and customized.

Note: You can use an extension to upload custom widgets and widget elements to your store. See Understand Extension Features for more details.