# Custom section

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FcXJabPh5UO98ULOGtUMm%2Fimage.png?alt=media&#x26;token=c0a40946-a283-424c-bbdd-d7ec9279b217" 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FezbszwdT8TS33Dj7W5cs%2Fimage.png?alt=media&#x26;token=45581b55-3272-4b03-8ce9-60662382a4d7" alt=""><figcaption></figcaption></figure>

5. Enter a description of the section you want.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F3eeg9n42n3XXeTFVaCfd%2Fimage.png?alt=media&#x26;token=aa6e7e9c-f323-4628-a57a-d7395a073896" alt=""><figcaption></figcaption></figure>

6. Result.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FrNuRI6Gl3YURMup60Huu%2Fimage.png?alt=media&#x26;token=3939a72f-04c4-40c7-9825-64ea5b39a846" alt=""><figcaption></figcaption></figure>