# Custom section

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

To add this section, please follow 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**".

## Section settings

### General

<table><thead><tr><th width="337">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1320px)</strong></mark><br><mark style="color:orange;"><strong>Width (1420px)</strong></mark><br><mark style="color:orange;"><strong>Width (1520px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full width (100% of the viewport width).</strong></mark></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determine the left and right spacing of the full width layout.</td></tr><tr><td>Height</td><td>Determine the section height.<br><br><mark style="color:orange;"><strong>Auto</strong></mark><br><mark style="color:orange;"><strong>Small</strong></mark><br><mark style="color:orange;"><strong>Medium</strong></mark><br><mark style="color:orange;"><strong>Large</strong></mark><br><mark style="color:orange;"><strong>Custom</strong></mark></td></tr><tr><td>Custom height</td><td><p><sup><strong>(Displayed if the</strong><strong> </strong><mark style="color:red;"><strong>Height</strong></mark><strong> </strong><strong>setting is set to</strong><strong> </strong><mark style="color:red;"><strong>Custom</strong></mark><strong>)</strong></sup></p><p>Adjust height manually for 'custom' height option</p></td></tr></tbody></table>

### Layout

<table><thead><tr><th width="337">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Direction</td><td>Select the direction in which the blocks are displayed.<br><br><mark style="color:orange;"><strong>Vertical</strong></mark><br><mark style="color:orange;"><strong>Horizontal</strong></mark></td></tr><tr><td>Vertical on mobile</td><td><sup><strong>(Displayed if the </strong><mark style="color:red;"><strong>Direction</strong></mark><strong> setting is set to </strong><mark style="color:red;"><strong>Horizontal</strong></mark><strong>)</strong></sup><br>Enable to display vertical layout on mobile.</td></tr><tr><td>Alignment</td><td>Select the position of the content to be either to the left, right, center, or space between its container.</td></tr><tr><td>Position</td><td>Select the vertical alignment of the text content to be either the top, center, bottom, or space between of the section.</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>

#### Appearance

<table><thead><tr><th width="337">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Background media</td><td><p>Select the background media from the dropdown menu:<br></p><p><mark style="color:orange;"><strong>None</strong></mark></p><p><mark style="color:orange;"><strong>Image</strong></mark></p><p><mark style="color:orange;"><strong>Video</strong></mark></p></td></tr><tr><td>Image</td><td><p><sup><strong>(Displayed if the</strong><strong> </strong><mark style="color:red;"><strong>Background media</strong></mark><strong> </strong><strong>setting is set to</strong><strong> </strong><mark style="color:red;"><strong>Image</strong></mark><strong>)</strong></sup></p><p>Set up an image.</p></td></tr><tr><td>Image position</td><td><p><sup><strong>(Displayed if the</strong><strong> </strong><mark style="color:red;"><strong>Background media</strong></mark><strong> </strong><strong>setting is set to</strong><strong> </strong><mark style="color:red;"><strong>Image</strong></mark><strong>)</strong></sup></p><p>Select the image fit type:</p><p><br><mark style="color:orange;"><strong>Cover</strong></mark><br><mark style="color:orange;"><strong>Fit</strong></mark></p></td></tr><tr><td>Video type</td><td><sup><strong>(Displayed if the </strong><mark style="color:red;"><strong>Background media</strong></mark><strong> setting is set to </strong><mark style="color:red;"><strong>Video</strong></mark><strong>)</strong></sup><br>Select the type of video<br><br><mark style="color:orange;"><strong>YouTube</strong></mark><br><mark style="color:orange;"><strong>MP4</strong></mark></td></tr><tr><td>Video ID</td><td><sup><strong>(Displayed if the </strong><mark style="color:red;"><strong>Video type</strong></mark><strong> setting is set to </strong><mark style="color:red;"><strong>YouTube</strong></mark><strong>)</strong></sup><br>Enter your YouTube video ID.</td></tr><tr><td>Video ID for mobile</td><td><sup><strong>(Displayed if the </strong><mark style="color:red;"><strong>Video type</strong></mark><strong> setting is set to </strong><mark style="color:red;"><strong>YouTube</strong></mark><strong>)</strong></sup><br>Enter your YouTube video ID on mobile.</td></tr><tr><td>Video</td><td><sup><strong>(Displayed if the </strong><mark style="color:red;"><strong>Video type</strong></mark><strong> setting is set to </strong><mark style="color:red;"><strong>Mp4</strong></mark><strong>)</strong></sup><br>Select an mp4 video available on your store.</td></tr><tr><td>Video link for mobile</td><td><sup><strong>(Displayed if the </strong><mark style="color:red;"><strong>Video type</strong></mark><strong> setting is set to </strong><mark style="color:red;"><strong>Mp4</strong></mark><strong>)</strong></sup> <br>Select mp4 video available on your store for mobile.</td></tr><tr><td>Video position</td><td><sup><strong>(Displayed if the </strong><mark style="color:red;"><strong>Video type</strong></mark><strong> setting is set to </strong><mark style="color:red;"><strong>Mp4</strong></mark><strong>)</strong></sup> <br>Select the video fit type:<br><br><mark style="color:orange;"><strong>Cover</strong></mark><br><mark style="color:orange;"><strong>Contain</strong></mark></td></tr><tr><td>Auto-play video</td><td><sup><strong>(Displayed if the </strong><mark style="color:red;"><strong>Background media</strong></mark><strong> setting is set to </strong><mark style="color:red;"><strong>Video</strong></mark><strong>)</strong></sup><br>Toggle so that the video will automatically play.</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>Background 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>Background 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><p></p><p><mark style="color:orange;"><strong>Solid</strong></mark></p><p><mark style="color:orange;"><strong>Gradient</strong></mark></p></td></tr></tbody></table>

#### Top padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

#### Bottom padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

## How to use the AI Block Support block?

With **Custom Section**, you can access Shopify Sidekick and AI-powered tools. You can add some description about the section you want, like "create me a section to display customer reviews" and Sidekick will create it for you, complete with layout and placeholder content.

To add this AI block, please follow the steps below:

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**".
4. Click **Add block** and choose "**Generate**".

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

5. Enter a description of the section you want.

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

6. Result.

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


---

# 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/ella-documentation/sections/all-sections-in-theme/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.