Product Box Designer: How to combine blocks and sections

How to combine blocks and sections

A product card is built from sections you stack on top of each other, and blocks you place inside each section. This article explains how the two levels are connected, how to make multiple blocks stand side by side, and how to place badges on top of the image.

The two levels: section and block

A section is a horizontal row on the card. You stack sections from top to bottom — the standard layout has a top, middle, and bottom section. Each section has its own background, padding, border, and spacing between elements.

A block is one content element inside a section — an image, a title, a price, a button. Blocks arrange themselves sequentially within the section, and you determine the order by dragging.

Think of sections as the rows and blocks as the content within the rows. If you want to visually separate the image from the text, place them in separate sections and give the sections different backgrounds.

Build a card step by step

• Start with the sections. Decide how many rows the card should have, and name them to describe their content (for example, «Image», «Text», «Action»).
• Add blocks to each section with Add new blockDrag the blocks into the correct order. You can drag a block from one section to another.
• Click the settings icon on a section or block to adjust it. Changes are shown in the preview immediately.

Screenshot here: a product card in the builder with the sections clearly marked, and the sidebar showing the blocks in one section.

Two blocks side by side

Each row is divided into an eight-column grid. The setting Column width on a block determines how many of the eight columns the block occupies.

• Column width = full width. The block fills the entire row, and the next block appears below it.Two blocks with column width
• divide the row into two equal parts and stand side by side.A title with width and an article number with width allows the title to take up most of the space, with the article number next to it.

For blocks to be on the same row, they must be in the same section and have a combined column width of 8 or less. If the sum is greater than 8, the last block will break to a new line.

Screenshot here: a section with price on the left and CTA button on the right, both with column width 4.

Spacing between blocks on the same row

The section setting Spacing between elements controls the space between blocks in the row. If you want more breathing room between a price and a button that are side by side, increase this value — not the margin on each individual block.

Tag overlay: marks on top of the image

In addition to the regular sections, there is a separate section type called Tag Overlay. Blocks in this section are placed on top of the card instead of taking up space in the flow — typically over the product image.

You use the overlay for Ribbon and Tag, i.e., discount labels, "New" labels, customer club badges, and freestanding labels. These blocks are positioned towards a corner (Ribbon) or with their own coordinates (Tag), and float over the rest of the content.

Common content blocks like title and price do not belong in the overlay — you place them in a regular section.

Screenshot here: a card with a discount ribbon in the top left corner and a "New" tag, showing the overlay on top of the image.

A common layout

A neat standard card typically looks like this:

• Top section — Thumbnail (full width). Ribbon and Tag in a Tagger overlay on top of the image.
• Middle section — Title and optionally Manufacturer or Item number.
• Bottom section — Price and CTA button, preferably side by side with column width 4 + 4.

Give each section the same background color for a seamless card, or break it up with a different background on one section to highlight, for example, the price row.

Tips

• Switch to dummy data mode while working on the layout. This prevents uneven product data from making it difficult to see if the column widths are correct.
• Keep the number of blocks down. A card that shows everything becomes cluttered — choose what customers need to click through.
• Rather hide a block or section than delete it if you think you'll need it later.
• Each block is described in detail in its own article. Start with [Product Box Designer — Block Reference] for a quick overview of all blocks.