# Custom Section

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>Container</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1370px)</strong></mark><br><mark style="color:orange;"><strong>Width (1570px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Width (1860px)</strong></mark><br><mark style="color:orange;"><strong>Page width</strong></mark> </td></tr><tr><td>Height</td><td><p>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></p><p><mark style="color:orange;"><strong>Full screen</strong></mark><br><mark style="color:orange;"><strong>Custom</strong></mark></p></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="https://1003004518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO9T0eVpfbnvoysXhw8Kp%2Fuploads%2FztS8dJ0I32Mmxqd5kZr3%2Fimage.png?alt=media&#x26;token=dda0b00c-bed7-4a9a-8cdb-63f3247870c3" alt=""><figcaption></figcaption></figure>

5. Enter a description of the section you want.

<figure><img src="https://1003004518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO9T0eVpfbnvoysXhw8Kp%2Fuploads%2FTtRZQzmvPy2hTGFBvkjY%2Fimage.png?alt=media&#x26;token=85eb845b-e7a6-4ec8-9500-4d2ea081ca3e" alt=""><figcaption></figcaption></figure>

6. Result.

<figure><img src="https://1003004518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FO9T0eVpfbnvoysXhw8Kp%2Fuploads%2FHycuaS9DDVYM8TgHjnYq%2Fimage.png?alt=media&#x26;token=a52819a5-a79b-4e5e-b68f-3795339be4f7" alt=""><figcaption></figcaption></figure>
