An introduction to views

Themes on our platform are made up of a number of Twig files, known as views.

Each view serves its own unique purpose. For example, the product.twig view shows the details of a single product.

View files are contained within the views folder of the page editor.

Depending on the mode you are using, the folder structure you'll see will be different (either advanced or normal mode). In normal mode, the theme editor will display a stylised version of a theme's directory structure by organising views into directories like 'checkout pages' to make it easy to find the view you want to edit. In advanced mode, the editor will display the true structure of a theme's directories.

Normal mode

Within the views folder you'll see a number of sub-folders. The sub-folders contain view files of a particular type/topic.

For example, the checkout pages folder contains the view files relating to the checkout process (the shopping basket page, login page, checkout page, and the order success and failure pages).

The other folder contains views which do not fit into the other folders. These are either partials which are bits of code that can be referenced in other views, macros which are used to put often used HTML idioms into resuable elements (so as not to repeat yourself) and templates which contain theme page layouts.

Advanced mode

Advanced mode shows the real structure of the theme's files.

All assets are contained in the main assets folder (and its sub-folders).

Views are contained in the main views folder (and its sub-folders).

In this section of articles we explain what each view file is used for and how to use it.

View files use objects, to render dynamic content, forms to either query data or submit data to the platform, and also reference the stylesheets, javascript and settings files.