Theme layout basics

Layout is a template of a page which consists of modules inside of a grid. Layouts are used to display whole pages like product card, category page or home page as well as more static parts of an application like header or footer.

Grid layout

All Shoper layouts consist of grid elements. Inside grid elements we put grid rows and inside grid rows we put grid columns. Inside those columns we put our modules. Such structure allows to seamlessly operate on all parts of a page via the Shoper Visual Editor. Here is an example of a valid Twig layout:

<div class="grid">
    <div class="grid__row">
        <div class="grid__col">
            {{ module("my_module", 1) }}
        </div>
    </div>
</div>

In the following example we have a grid element with a single row and a single column. Inside that column we put a my_module module. To find out more about modules visit the module documentation page.

Contexts

Each layout has its own unique context with a set of variables that can be used inside of it. For example a product card layout has a product_id variable which contains an id of a currently displayed product but it does not have a category_id variable because it does not make sense to display a category id on a product card page.

To find out more about variables available for all of the different contexts visit contexts documentation page.