> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/layout/group.md).

# Group

The **Group** block is a container you put other blocks inside. On its own it shows nothing, but it decides whether the blocks it holds sit side by side or stacked, how they line up, how far apart they are, and what sits behind them. It is added inside a section, and it is the block that turns a single stacked column into columns, cards, and image backed panels. Give the group a link and everything inside it becomes one clickable card.

<figure><img src="/files/Cs97lIaC6ATsjUuYaoGj" alt=""><figcaption></figcaption></figure>

### How to add it <a href="#how-to-add-it" id="how-to-add-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the section you want to arrange.
3. Click **Add block** and choose **Group**.
4. Set **Direction** to decide whether its contents run across or down.
5. Add the content blocks inside the group, then adjust **Gap** and the alignment settings.
   {% endhint %}

*Result:* the blocks you added sit inside the group and follow its direction, alignment, and background instead of stacking on their own.

### General settings <a href="#general-settings" id="general-settings"></a>

| Setting                  | Description                                                                                                                                                           |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Link**                 | Makes the whole container clickable, so a picture, its heading, and its wording act as one large target rather than needing a separate button.                        |
| **Open link in new tab** | Loads that destination in a second browser tab, leaving your store open behind it.                                                                                    |
| **Inherit Color Scheme** | Leaves the container in the colors of the section around it, which is the default and keeps it from reading as a separate panel.                                      |
| **Color scheme**         | <p><em>Only visible when Inherit Color Scheme is disabled</em>.</p><p>Gives the container its own scheme, which is how a card is set off from the page behind it.</p> |

### Layout <a href="#layout" id="layout"></a>

| Settings                 | Description                                                                                                                                                                                                                                                                             |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Direction**            | Whether the blocks inside run down the page, Vertical (stacked, default), or across it, Horizontal (side by side). Horizontal is what creates columns.                                                                                                                                  |
| **Vertical on Mobile**   | <p><em>Only visible when Direction is Horizontal</em>.</p><p>Stacks the contents on phones instead of squeezing the columns into a narrow screen. Leave it on unless the items are small enough to sit together.</p>                                                                    |
| **Content Wrap**         | <p><em>Only visible when Direction is Horizontal</em>.</p><p>Lets the contents drop onto a second line when they no longer fit, rather than being squashed into the row.</p>                                                                                                            |
| **Horizontal Position**  | <p><em>Only visible when Direction is Horizontal</em>.</p><p>How the items in the row line up against each other from top to bottom, which is what keeps cards of different heights level:</p><ul><li>Top</li><li>Center (Default)</li><li>Bottom.</li></ul>                            |
| **Vertical Position**    | <p><em>Only visible when Direction is Vertical</em>.</p><p>Where the stack sits inside the height it was given:</p><ul><li>Top,</li><li>Center (Default)</li><li>Bottom</li><li>Space Between (pushes the first item to the top and the last to the bottom).</li></ul>                  |
| **Vertical Alignment**   | <p><em>Only visible when Direction is Vertical</em>.</p><p>Where the stacked items sit from side to side:</p><ul><li>Start (Left),</li><li>Center (Default)</li><li>End (Right).</li></ul>                                                                                              |
| **Horizontal Alignment** | <p><em>Only visible when Direction is Horizontal</em>.</p><p>How the row is spread across the width available:</p><ul><li>Start (Left)</li><li>Center (Default)</li><li>End (Right)</li><li>Space Between (spreads the items to the outer edges with equal gaps between them)</li></ul> |
| **Gap**                  | The space kept between the blocks inside, from 0px to 100px. It is the fastest way to make a row of cards feel airy or tight.                                                                                                                                                           |

### Size <a href="#size" id="size"></a>

| Setting                 | Applies To | Description                                                                                                                                                                                                                                                                              |
| ----------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Width**               | Desktop    | <p>How much room the container takes across a computer screen.</p><ul><li>Fit (Default, as wide as its contents need)</li><li>Fill (spans the space it is given)</li><li>Custom (you set the share of the width yourself, which is how two groups are made into even columns).</li></ul> |
| **Custom Width**        | Desktop    | <p><em>Only visible when Width is Custom</em>.</p><p>The exact share of the available width, from 0% to 100%. Two groups at 50% give an even split.</p>                                                                                                                                  |
| **Mobile Width**        | Mobile     | The same choice on phones, where Fill is the default so a card is not left floating in a narrow column.                                                                                                                                                                                  |
| **Custom Mobile Width** | Mobile     | <p><em>Only visible when Mobile Width is Custom</em>.</p><p>The exact share of the phone screen, from 0% to 100%.</p>                                                                                                                                                                    |
| **Height**              | Both       | <p>How tall the container is allowed to be.</p><ul><li>Fit (Default, as tall as its contents)</li><li>Fill (stretches to match the tallest group beside it, which keeps a row of cards level)</li><li>Custom (you set the height yourself).</li><li>Adapt to media background</li></ul>  |
| **Custom Height**       | Both       | *Only visible when Height is Custom*. The exact height, from 0% to 100%.                                                                                                                                                                                                                 |

### Appearance <a href="#appearance" id="appearance"></a>

| Setting                       | Description                                                                                                                                                                                                                   |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Background Media**          | <p>What sits behind the contents of the container:</p><ul><li>None (Default)</li><li>Image</li><li>Video.</li></ul><p>This is how a group becomes a banner with wording on top of it.</p>                                     |
| **Image**                     | <p><em>Only visible when Background Media is Image</em>.</p><p>The picture placed behind the contents.</p>                                                                                                                    |
| **Local Video**               | <p><em>Only visible when Background Media is Video</em>.</p><p>The video file placed behind the contents.</p>                                                                                                                 |
| **Corner Radius**             | <p>How rounded the corners of the container look:</p><ul><li>None</li><li>Custom.</li></ul>                                                                                                                                   |
| **Custom Radius**             | <p><em>Only visible when Corner Radius is Custom</em>.</p><p>The exact rounding, from 0px to 100px.</p>                                                                                                                       |
| **Enable Background Overlay** | <p><em>Only visible when Background Media is not None</em>.</p><p>Lays a colored film over the picture or video so the wording on top stays readable. Turn it on whenever text sits over a busy image.</p>                    |
| **Overlay Color**             | <p><em>Only visible when Overlay is enabled</em>.</p><p>The color of that film and how far you can see through it. Darker and more solid means safer text, but less of the picture.</p>                                       |
| **Overlay Style**             | <p><em>Only visible when Overlay is enabled</em>.</p><p>Whether the film covers evenly or fades:</p><ul><li>Solid (Default)</li><li>Gradient (heavier at one end, so only the part behind the wording is darkened).</li></ul> |
| **Gradient Direction**        | <p><em>Only visible when Overlay Style is Gradient</em>.</p><p>Which end the fade is heaviest at:</p><ul><li>To Top (Default)</li><li>To Bottom.</li></ul><p>Point the heavy end at the wording.</p>                          |
| **Border Style**              | <p>Whether the container is outlined:</p><ul><li>None (Default)</li><li>Solid (a line around the edge, which marks the group out as a card).</li></ul>                                                                        |

### Spacing <a href="#spacing" id="spacing"></a>

These settings control the external spacing (padding) applied directly above and below this specific block.

| Setting    | Description                                                                                  |
| ---------- | -------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the container so it separates from the block over it. Accepts 0px to 100px. |
| **Bottom** | Leaves space under the container before the next block starts. Accepts 0px to 100px.         |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Blocks that would have stacked one under another can now sit side by side, which is how column layouts and card rows are built.
* A group with a background picture or video, an overlay, and a border reads as a self contained card rather than as loose content.
* With a link set, shoppers can click anywhere in the card, which gives a much larger target than a button on its own.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Basic](/velare/customize-your-pages/basic.md): the content blocks that go inside a group
* [Carousel](/velare/customize-your-pages/layout/carousel.md): for sliding several groups horizontally instead of wrapping them
* [Colors](/velare/set-up-your-store/colors.md): where the color schemes come from


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/layout/group.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.