# Custom section

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 "**Custom section**".

#### **Layout**

<table><thead><tr><th width="264">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Direction</td><td><p>Select the section width from the dropdown menu:</p><ul><li><strong>Vertical</strong></li><li><strong>Horizontal</strong></li></ul></td></tr><tr><td>Vertical on mobile</td><td><p><sup><strong>(Displayed if the</strong><strong> </strong><mark style="color:red;"><strong>Direction</strong></mark><strong> </strong><strong>setting is set to</strong><strong> </strong><mark style="color:red;"><strong>Horizontal</strong></mark><strong>)</strong></sup></p><p>Select this checkbox to use a vertical on mobile for this section</p></td></tr><tr><td>Alignment</td><td><p>Set horizontal alignment for content inside section containers.</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li><li><strong>Space between </strong><sup><strong>(Displayed if the</strong><strong> </strong><mark style="color:red;"><strong>Direction</strong></mark><strong> </strong><strong>setting is set to</strong><strong> </strong><mark style="color:red;"><strong>Horizontal</strong></mark><strong>)</strong></sup></li></ul></td></tr><tr><td>Position</td><td><p>Select desktop content position from the dropdown menu:</p><ul><li><strong>Top</strong></li><li><strong>Center</strong></li><li><strong>Bottom</strong></li><li><strong>Space between </strong><sup><strong>(Displayed if the</strong><strong> </strong><mark style="color:red;"><strong>Direction</strong></mark><strong> </strong><strong>setting is set to</strong><strong> </strong><mark style="color:red;"><strong>Vertical</strong></mark><strong>)</strong></sup></li></ul></td></tr><tr><td>Gap</td><td>Determines the row gap of link. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr></tbody></table>

#### Size

<table><thead><tr><th width="264">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Width</td><td><p>Select the width from the dropdown menu:</p><ul><li><strong>Page</strong> </li><li><strong>Full</strong></li></ul></td></tr><tr><td>Page width</td><td><p><sup><strong>(Displayed if the</strong><strong> </strong><mark style="color:red;"><strong>Width</strong></mark><strong> </strong><strong>setting is set to</strong><strong> </strong><mark style="color:red;"><strong>Page</strong></mark><strong>)</strong></sup></p><p>Select the page width from the dropdown menu:</p><ul><li><strong>Narrow</strong></li><li><strong>Normal</strong></li><li><strong>Wibe</strong></li></ul></td></tr><tr><td>Height</td><td><p>Select the height from the dropdown menu:</p><ul><li><strong>Auto</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li><li><strong>Full screen</strong></li><li><strong>Custom</strong></li></ul></td></tr><tr><td>Custom height</td><td>Determines the maximum height of the image. Can be from 0% to 100%, in 1% arithmetic increments.</td></tr></tbody></table>

#### Appearance

<table><thead><tr><th width="264">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Color scheme</td><td>Select a color scheme to set the text and background colors for the section</td></tr><tr><td>Background media</td><td><p>Select the background media from the dropdown menu:</p><ul><li><strong>None</strong></li><li><strong>Image</strong></li><li><strong>Video</strong></li></ul></td></tr><tr><td>Borders</td><td><p>Select the background media from the dropdown menu:</p><ul><li><strong>None</strong></li><li><strong>Solid</strong></li></ul></td></tr><tr><td>Border thickness</td><td><p><sup><strong>(Displayed if the</strong><strong> </strong><mark style="color:red;"><strong>Borders</strong></mark><strong> </strong><strong>setting is set to</strong><strong> </strong><mark style="color:red;"><strong>Solid</strong></mark><strong>)</strong></sup></p><p>Set the width of an input's four borders. Can be from 0px to 10px, increasing arithmetically of 1px (pixel).</p></td></tr><tr><td>Border opacity</td><td><p><sup><strong>(Displayed if the</strong><strong> </strong><mark style="color:red;"><strong>Borders</strong></mark><strong> </strong><strong>setting is set to</strong><strong> </strong><mark style="color:red;"><strong>Solid</strong></mark><strong>)</strong></sup></p><p>Sets the opacity level for an input's four borders. Can be from 0% to 100%, increasing arithmetically of 1%.</p></td></tr><tr><td>Corner radius</td><td>Set the radius of the corners. Can be from 0px to 40px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Background overlay</td><td>Select this checkbox to use a background overlay for this section</td></tr><tr><td>Overlay color</td><td><p><sup><strong>(Displayed if the</strong><strong> </strong><mark style="color:red;"><strong>Enable overlay</strong></mark><strong> </strong><strong>setting is turned</strong><strong> </strong><mark style="color:red;"><strong>on</strong></mark><strong>)</strong></sup></p><p>Set the background color.</p></td></tr><tr><td>Overlay style</td><td><p><sup><strong>(Displayed if the</strong><strong> </strong><mark style="color:red;"><strong>Enable overlay</strong></mark><strong> </strong><strong>setting is turned</strong><strong> </strong><mark style="color:red;"><strong>on</strong></mark><strong>)</strong></sup></p><p>Select the gradient direction from the dropdown menu:</p><ul><li><strong>Solid</strong></li><li><strong>Gradient</strong></li></ul></td></tr><tr><td>Gradient direction</td><td><p><sup><strong>(Displayed if the</strong><strong> </strong><mark style="color:red;"><strong>Overlay style</strong></mark><strong> </strong><strong>setting is set to</strong><strong> </strong><mark style="color:red;"><strong>Gradient</strong></mark><strong>)</strong></sup></p><p>Select the gradient direction from the dropdown menu:</p><ul><li><strong>Up</strong></li><li><strong>Down</strong></li></ul></td></tr></tbody></table>

#### **Padding**

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Top</td><td>Determines the height of the top inner space of the section. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of <strong>1px</strong> (pixel).</td></tr><tr><td>Bottom</td><td>Determines the height of the bottom inner space of the section. Can be from <strong>0px</strong> to <strong>100px</strong>, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>


---

# Agent Instructions: 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/concept-documentation/section/custom-section.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.