Layouts
Netgen Layouts is a powerful layout management and page-building system integrated into SellStack. It enables administrators and content managers to visually compose and manage page layouts without modifying templates or source code. It provides a drag-and-drop content layout editor that works seamlessly with BitBag CMS content (pages, blocks, media) and SellStack entities (such as products, taxons, or static pages). Netgen Layouts allows you to design and configure custom pages, such as the homepage, landing pages, campaign pages, or category overviews, using reusable building blocks called layouts and blocks. Within SellStack, Netgen Layouts is used to:
Build custom page structures without direct template editing.
Create dynamic and static layouts for the homepage, promotional pages, or CMS-driven pages.
Combine BitBag CMS blocks, images, and custom components into flexible content grids.
Assign (map) specific layouts to routes or conditions, defining which layout is used for which page.
To create a new layout in the Admin interface:
Navigate to Administration → Layouts → Layouts
Click the “New layout button”
Enter the basic information:
Name: A human-readable title for the layout (e.g., Homepage Layout).
Select any template type.
Add containers - Layouts are structured into containers (rows or grid areas).
Add and configure blocks - Within each zone, add blocks to compose the desired page structure. Examples include:
Image Block - display a headline, banner, logo, or other images.
Text Block - add introductory text, promotional copy, or headings.
Product List Block - display a dynamic product collection.
CMS Block (BitBag integration): reuse content created via the CMS plugin.
Save and publish the layout - Once saved, the layout is available to be linked (mapped) to specific pages or routes.
SellStack offers a variety of available elements to use for building a layout (see Available Netgen layout elements in SellStack image). Containers are used for grouping elements into layout sections with shared properties, such as styling (background color) and organization. HTML snippets are most commonly used for displaying any page text, such as section titles. Gallery elements are used for displaying any page items, such as products, banners, images, or any other CMS elements. Here, a Grid gallery is usually used for displaying products in the created layouts. It is suitable for organizing products in rows and columns. Sliders can be used for product animation. A Single image element is one of the most used elements. It is suitable for working with images with a range of view types, specialized for different displays of images and their content. These types are set in the Design window. Depending on the single-image item view types, we distinguish between the following types:
Headline banner - used for building headlines with or without text
Shop banner - used for building shop banners with some text
Logo
Logo with text
Standard
Available Netgen layout elements in SellStack
Design configuration of a Single image element
After creating a layout, it must be mapped to a specific route or condition so that SellStack knows where to display it. Mappings define when and where a particular layout should be used. To create a new mapping:
Go to Administration → Layouts → Layout mappings and add a new mapping
Select the layout you wish to link to the new mapping.
Define the target route or mapping condition - layouts are usually mapped to Sylius routes (e.g., homepage) or to BitBag CMS Pages.
Netgen layout mappings in SellStack Admin
Last updated