> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/soul-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/soul-documentation/sections/template-sections/image-gallery.md).

# Image gallery

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

To add this section, please follow the below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Image gallery**".

## Section settings <a href="#section-settings-1" id="section-settings-1"></a>

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td>Set the color for the section.</td></tr><tr><td>Desktop content position</td><td><p>Positions the content relative to the image:</p><ul><li><strong>Top Left</strong> - Positions the content to the top vertically and the left horizontally.</li><li><strong>Top Center</strong> - Positions the content to the top vertically and the center horizontally.</li><li><strong>Middle Left</strong> - Positions the content to the middle vertically and the left horizontally.</li><li><strong>Middle Center</strong> - Positions the content to the middle vertically and the center horizontally.</li><li><strong>Bottom Left</strong> - Positions the content to the bottom vertically and the left horizontally.</li><li><strong>Bottom Center</strong> - Positions the content to the bottom vertically and the center horizontally.</li></ul></td></tr><tr><td>Desktop content alignment</td><td><p>Sets the alignment of the content on desktop:</p><ul><li><strong>Left</strong> - Aligns the content to the left.</li><li><strong>Center</strong> - Aligns the content to the center.</li><li><strong>Right</strong> - Aligns the content to the right.</li></ul></td></tr><tr><td>Show container on desktop</td><td>Show background for the content.</td></tr></tbody></table>

### Content <a href="#section-settings-1" id="section-settings-1"></a>

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>The title for this section.</td></tr><tr><td>Heading size</td><td><p>The size of the heading text:</p><ul><li>Small</li><li>Medium</li><li>Large</li><li>Extra large</li></ul></td></tr><tr><td>Text</td><td>The text for this section.</td></tr><tr><td>Text style</td><td><p>The style of the text:</p><ul><li>Body</li><li>Subtitle</li></ul></td></tr><tr><td>Button label</td><td>The text that displays on the button. Leave the label blank to hide the button.</td></tr><tr><td>Button link</td><td>The URL that you want the button to link to.</td></tr><tr><td>Button style</td><td><p>Style of the button:</p><ul><li>Filled</li><li>Text link</li><li>Outlined</li></ul></td></tr><tr><td>Color scheme</td><td>Set the color for the content.</td></tr></tbody></table>

### Mobile layout

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Mobile content alignment</td><td><p>Sets the alignment of the content on mobile:</p><ul><li><strong>Left</strong> - Aligns the content to the left.</li><li><strong>Center</strong> - Aligns the content to the center.</li><li><strong>Right</strong> - Aligns the content to the right.</li></ul></td></tr></tbody></table>

### Section spacing

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top padding</td><td>Determines the height of the top inner space of the footer. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the footer. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).</td></tr></tbody></table>

## Image block <a href="#section-settings-1" id="section-settings-1"></a>

<table><thead><tr><th width="276">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>The image for this block.</td></tr></tbody></table>


---

# 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:

```
GET https://halosoft.gitbook.io/soul-documentation/sections/template-sections/image-gallery.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.