Skip to main content

Product Grid

With the Product Grid section (found under the preset 'Featured products grid'), you can display a selection of specific products in a fixed grid. Unlike the slider version, the products here are placed directly below each other in rows, providing a calm and organized look. This is ideal for presenting a small fixed collection or 'top picks' on your homepage.

Note: Just like other product sections, the settings for the individual product cards (such as image type and price display) are managed via the general theme settings.

General Layout & Background​

Adjust the environment of the grid for the right visual impact:

  • Color scheme: Choose the color scheme for the background and the texts of this section.
  • Section display (Type): Determine whether the background of the section spans the full width (Full width / Edge-to-edge) or is centered within a frame (Box / Container).
  • Background image: You can enrich the section with a background image (with options for a separate mobile version).
  • Height & Background height: Choose an automatic height that grows with the products (Auto) or a fixed height (Fixed). With a fixed height, you can use a slider to determine exactly how far the background color or image extends (separately adjustable for desktop and mobile).

Spacing (Whitespace)​

Manage the margin (outer space) and padding (inner space) at the top and bottom to neatly position the section relative to other elements on the page.

Selecting Products​

  • Product list: Manually select the products you want to display here. You can add up to 20 products. The products will be automatically distributed across the available columns.

Text & Buttons​

You can place an introduction above the product grid to explain the collection:

  • Alignment: Choose whether the title and introductory text should be aligned to the left, center, or right.
  • Title Formatting: Enter a heading and adjust the SEO HTML tag, the visual size, and the font weight.
  • Content (Rich text): Use this field for an additional explanation below the title.
  • Action buttons (Buttons): You can add up to two buttons (e.g., "View all products").
    • Give the button a label and link a URL.
    • Check Secondary button style for an 'outline' appearance.
    • Optionally add an icon (such as a right arrow).
    • Tip: The buttons only appear if you actually fill in a label.