Skip to main content

Collection Grid

With the Collection Grid section (found under the preset 'Featured collections grid'), you can show a clear list of your most important collections. Unlike a slider, the collections here are placed in a fixed layout (grid). This is ideal to show visitors at a glance all the categories you offer.

Note: The visual layout of the individual collection cards themselves (e.g., the shape or size of the image) is adjusted in the general theme settings under 'Collection & Brand Cards'.

General Layout & Whitespace​

Perfectly tailor the section to your brand identity and the surrounding content:

  • Color scheme: Determine the background and text colors for the entire section.
  • Custom Class: Add your own CSS class for advanced styling options.
  • Margin & Padding: Manage the distance directly around the section (outer space) and the distance between the frame and the texts inside (inner space). You can choose the default spacing of the theme or omit the space completely (None).

Grid Settings​

Here you determine how many collections are shown next to each other. If you add more collections than fit in one row, they automatically fall neatly onto the next line.

  • Desktop (Items per row): Choose whether you want to show 3, 4, or 6 collections next to each other on large screens.
  • Tablet (Items per row): Choose 2, 3, or 4 collections next to each other on medium-sized screens.
  • Mobile (Items per row): Choose 2 or 3 collections next to each other on smartphones.

Selecting Collections​

  • Collection list: Click here to select specific collections from your Shopify store that should be shown in this grid. You can add up to 20 collections and determine the order by dragging them.

Text & Buttons​

Guide your grid with a clear introduction and any call-to-actions:

  • Alignment: Choose whether you want to align the text above the collections to the left, center, or right.
  • Title & Content: Add an eye-catching heading (e.g., "Shop by category") and write a short, introductory text. You can adjust the size, font weight, and the SEO HTML tag of the title to your liking.
  • Action buttons (Buttons): You can add up to two buttons below the text (above the collections). This is handy if, for example, you want to offer a "View all collections" button.
    • Enter the label (text) and link a URL.
    • Check Secondary button style (Outline button) if you want the button to have a transparent appearance with a border.
    • Optionally choose a FontAwesome icon (such as an arrow).
    • Tip: Leave the label empty if you do not want to show a button.