Elements of a web page

Abstract

Overview of the elements that make up a storefront web page.

A web page in your online store consists of the following basic elements, all of which are available in the Experience Editor Toolbox:

Diagram of the elements of a storeront page

Page designs

The page design is a structure that consists of a selection of partial designs. For example, you can create a page design with a header and footer that will be consistent across all web pages of the same render type. You can create multiple page designs each with a specific layout, such as a blog page, a landing page, a product page, and so on.

Partial designs

A partial design is a set of selected components. You can use this to create the common design elements for your page, which you can easily re-use across the entire web shop. Headers and footers are common partial designs that are used to ensure a consistent look and feel.

Renderings

A rendering is a page element (also called a component). Renderings are listed in the Toolbox in the Experience Editor. You build your web pages by dragging and dropping renderings directly where you need them. Available renderings include simple text, images, videos, social media plugins as well as lists and search elements.

Rendering variants

Rendering variants are customized renderings based off of the default renderings. You use rendering variants to visualize content in a different way.