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