> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/section-templates/section.md).

# Introduction to Section

Build flexible, custom page sections by combining content blocks — a complete guide to the Custom Section system in the Arctos theme.

Use **Custom section** to build flexible page layouts from Theme blocks. Arctos also includes pre-built sections, which may either use the Custom Section structure or have their own dedicated section structure.

### 1. How sections work in Arctos

Arctos gives you two main ways to build page sections:

* **Pre-built sections:** Ready-made layouts for faster setup. Some are built on the Custom Section structure, while others are dedicated sections with their own functionality and configuration.
* **Custom section:** An empty container that lets you create a layout from scratch using supported Theme blocks.

{% hint style="info" %}
**Every section is really two layers working together.** 

*For example, when you add a Slideshow section, you get:*

* **Slideshow (outer layer):** A Custom section renamed "Slideshow." It controls the section-level layout, spacing, and styling.
* **Slideshow (inner layer):** The functional Theme block that provides the slideshow's content and behavior, such as slides, transitions, and autoplay settings.
  {% endhint %}

*Pre-built sections are ready-made sections that come in two types:*

1. **Custom Section-based** pre-built layouts share the same outer layout, style, and spacing controls as an empty Custom section. 
2. **Dedicated sections** use their own structure and settings.

{% hint style="info" %}
Because **Custom section-based** pre-built sections share the same structure as Custom sections, you can:

* Start with a **Custom section-based** pre-built section and adjust its outer layer like any Custom section, or
* Start with an empty Custom section and add Theme blocks yourself.

This also means you can mix and match Theme blocks within a section, so layouts fit your content and brand.
{% endhint %}

### 2. How to access a section

{% stepper %}
{% step %}
**Add a section**

In Theme Editor (Customize), click **Add section**.
{% endstep %}

{% step %}
**Select Custom section**

Search for "custom section" and select from the library.
{% endstep %}

{% step %}
**Adjust the settings**

Adjust the **General**, **Inner content layout**, **Style**, and **Spacing** settings to shape the container.
{% endstep %}

{% step %}
**Preview the result**

Preview the result on desktop and mobile.
{% endstep %}

{% step %}
**Save your changes**

Click **Save.**
{% endstep %}
{% endstepper %}

### 3. What you can customize

The Custom section handles section-level settings only:

* **Width, height, and fullscreen behavior** — control the overall size of the section.
* **Content direction, alignment, and gap** — control how blocks inside the section are positioned and spaced.
* **Color scheme and background** — define the section’s visual treatment.
* **Padding** — control spacing around the section, with separate values for mobile.
* **Section ID** — create a direct link (anchor) to the section.

Content and functionality come from the [blocks](/arctos-theme/blocks/introduction-to-blocks.md) you place inside it.

#### Available blocks

Custom Section supports **37 merchant-configurable block types** that you can choose from when building a layout.

<details>

<summary><em>37 merchant-configurable block types' documentation</em></summary>

<table data-search="false"><thead><tr><th>Block</th><th>Category</th><th>Documentation</th></tr></thead><tbody><tr><td><strong>Accordions</strong></td><td>Layout</td><td><a href="/arctos-theme/blocks/layout/accordions.md">Accordions</a></td></tr><tr><td><strong>Banner</strong></td><td>Media</td><td><a href="/arctos-theme/blocks/media/banner.md">Banner</a></td></tr><tr><td><strong>Before/after image slider</strong></td><td>Media</td><td><a href="/arctos-theme/blocks/media/before-after-image-slider.md">Before/after image slider</a></td></tr><tr><td><strong>Blog posts</strong></td><td>Storytelling</td><td><a href="/arctos-theme/blocks/storytelling/blog-posts.md">Blog posts</a></td></tr><tr><td><strong>Button</strong></td><td>Basic</td><td><a href="/arctos-theme/blocks/basic/button.md">Button</a></td></tr><tr><td><strong>Collection links</strong></td><td>Collections and products</td><td><a href="/arctos-theme/blocks/collections-and-products/collection-links.md">Collection links</a></td></tr><tr><td><strong>Collection list</strong></td><td>Collections and products</td><td><a href="/arctos-theme/blocks/collections-and-products/collection-list.md">Collection list</a></td></tr><tr><td><strong>Countdown timer</strong></td><td>Storytelling</td><td><a href="/arctos-theme/blocks/storytelling/countdown-timer.md">Countdown timer</a></td></tr><tr><td><strong>Custom liquid</strong></td><td>Basic</td><td>Standard Shopify custom liquid</td></tr><tr><td><strong>Custom list</strong></td><td>Layout</td><td><a href="/arctos-theme/blocks/layout/custom-list.md">Custom list</a></td></tr><tr><td><strong>Divider</strong></td><td>Layout</td><td><a href="/arctos-theme/blocks/layout/spacer-and-divider.md">Divider</a></td></tr><tr><td><strong>Email signup</strong></td><td>Contact</td><td><a href="/arctos-theme/blocks/contact/email-signup.md">Email signup</a></td></tr><tr><td><strong>Form</strong></td><td>Contact</td><td><a href="/arctos-theme/blocks/contact/contact-form.md">Contact form</a></td></tr><tr><td><strong>Google Maps</strong></td><td>Links</td><td><a href="/arctos-theme/blocks/links/google-map.md">Google Maps</a></td></tr><tr><td><strong>Group</strong></td><td>Layout</td><td><a href="/arctos-theme/blocks/layout/group.md">Group</a></td></tr><tr><td><strong>Heading</strong></td><td>Basic</td><td><a href="/arctos-theme/blocks/basic/heading.md">Heading</a></td></tr><tr><td><strong>Highlight text with media</strong></td><td>Storytelling</td><td><a href="/arctos-theme/blocks/storytelling/highlight-text-with-image.md">Highlight text with media</a></td></tr><tr><td><strong>Icon</strong></td><td>Basic</td><td><a href="/arctos-theme/blocks/basic/icon.md">Icon</a></td></tr><tr><td><strong>Icon box list</strong></td><td>Storytelling</td><td><a href="/arctos-theme/blocks/storytelling/icon-box.md">Icon box list</a></td></tr><tr><td><strong>Image</strong></td><td>Basic</td><td><a href="/arctos-theme/blocks/basic/image.md">Image</a></td></tr><tr><td><strong>Instagram list</strong></td><td>Storytelling</td><td><a href="/arctos-theme/blocks/storytelling.md">Instagram list</a></td></tr><tr><td><strong>Jumbo text</strong></td><td>Storytelling</td><td><a href="/arctos-theme/blocks/storytelling/jumbo-text.md">Jumbo text</a></td></tr><tr><td><strong>Logo</strong></td><td>Basic</td><td><a href="/arctos-theme/blocks/basic/logo.md">Logo</a></td></tr><tr><td><strong>Lookbook</strong></td><td>Collections and products</td><td><a href="/arctos-theme/blocks/collections-and-products/shop-the-look-full.md">Lookbook</a></td></tr><tr><td><strong>Marquee</strong></td><td>Storytelling</td><td><a href="/arctos-theme/blocks/storytelling/marquee.md">Marquee</a></td></tr><tr><td><strong>Menu</strong></td><td>Links</td><td><a href="/arctos-theme/blocks/links/menu.md">Menu</a></td></tr><tr><td><strong>Product list</strong></td><td>Collections and products</td><td><a href="/arctos-theme/blocks/collections-and-products/product-list.md">Product list</a></td></tr><tr><td><strong>Slideshow</strong></td><td>Media</td><td><a href="/arctos-theme/blocks/media/slideshow.md">Slideshow</a></td></tr><tr><td><strong>Social media</strong></td><td>Links</td><td><a href="/arctos-theme/blocks/links/social-media.md">Social media</a></td></tr><tr><td><strong>Spacer</strong></td><td>Layout</td><td><a href="/arctos-theme/blocks/layout/spacer-and-divider.md">Spacer</a></td></tr><tr><td><strong>Sticky layout</strong></td><td>Layout</td><td><a href="/arctos-theme/blocks/layout.md">Sticky layout</a></td></tr><tr><td><strong>Store locator</strong></td><td>Contact</td><td><a href="/arctos-theme/blocks/contact/store-locator.md">Store locator</a></td></tr><tr><td><strong>Tabs</strong></td><td>Layout</td><td><a href="/arctos-theme/blocks/layout/custom-tab.md">Tabs</a></td></tr><tr><td><strong>Testimonial item</strong></td><td>Storytelling</td><td><a href="/arctos-theme/blocks/storytelling/testimonial.md">Testimonial item</a></td></tr><tr><td><strong>Testimonial list</strong></td><td>Storytelling</td><td><a href="/arctos-theme/blocks/storytelling/testimonial.md">Testimonial list</a></td></tr><tr><td><strong>Text</strong></td><td>Basic</td><td><a href="/arctos-theme/blocks/basic/text.md">Text</a></td></tr><tr><td><strong>Video</strong></td><td>Basic</td><td><a href="/arctos-theme/blocks/basic/video.md">Video</a></td></tr></tbody></table>

</details>

### 4. General settings

#### 4.1. Section container

<details>

<summary>Invisible mode</summary>

Controls whether the section displays its own background and padding.

<table><thead><tr><th width="181.5703125">Options</th><th width="508.75">What it does</th></tr></thead><tbody><tr><td><strong>Off (Default mode)</strong></td><td>The section keeps its background and padding, so it appears as a separate visual block.</td></tr><tr><td><strong>On (Invisible mode)</strong></td><td>The section’s background and padding are removed, allowing multiple sections to flow together into a more cohesive Bento-style layout.</td></tr></tbody></table>

</details>

<details>

<summary>Fullscreen</summary>

Controls whether the section expands to fill the screen.

<table><thead><tr><th width="171.3671875">Setting</th><th width="144.484375">Option</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Fullscreen</strong></td><td><ul><li>Off</li><li>On</li></ul></td><td>Controls whether the section expands to fill the screen. When On, <strong>Container width</strong> and <strong>Height</strong> are hidden.</td></tr></tbody></table>

</details>

<details>

<summary>Container width</summary>

Sets the content width of the section. *Only available when **Fullscreen** is Off.*

<table><thead><tr><th width="171.3671875">Setting</th><th width="144.484375">Option</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Container width</strong></td><td><ul><li>Inherit</li><li>Full width</li><li>Standard</li><li>Wide</li><li>Narrow</li></ul></td><td><ul><li><strong>Inherit:</strong> Uses the <strong>Container width (default)</strong> setting from <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-2.-container-width">Theme settings → General → Container width</a>.</li><li><strong>Full width:</strong> Always uses the full available width.</li><li><strong>Standard:</strong> Uses the Standard container width defined in <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-2.-container-width">Theme settings → General → Container width</a>.</li><li><strong>Wide:</strong> Uses the Wide container width defined in <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-2.-container-width">Theme settings → General → Container width</a>.</li><li><strong>Narrow:</strong> Uses the Narrow container width defined in <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-2.-container-width">Theme settings → General → Container width</a><strong>.</strong></li></ul><p>Container width is always full width on mobile.</p></td></tr></tbody></table>

</details>

<details>

<summary>Height</summary>

Sets the height of the section. *Only available when **Fullscreen** is Off.*

<table><thead><tr><th width="171.3671875">Setting</th><th width="144.484375">Option</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Height</strong></td><td><ul><li>Fit</li><li>Small</li><li>Medium</li><li>Large</li><li>Full</li></ul></td><td><ul><li><strong>Fit:</strong> Uses the height required by the section's content.</li><li><strong>Small:</strong> Uses a small predefined height.</li><li><strong>Medium:</strong> Uses a medium predefined height.</li><li><strong>Large:</strong> Uses a large predefined height.</li><li><strong>Full:</strong> Expands to the full available height.</li></ul></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>Off</li><li>On</li></ul></td><td>Enables setting an independent section height for mobile screens.</td></tr><tr><td><strong>Height (Mobile)</strong></td><td><ul><li>Fit</li><li>Full</li></ul></td><td><ul><li><strong>Fit:</strong> Uses the height required by the section's content on mobile.</li><li><strong>Full:</strong> Expands the section to fill the mobile screen height.</li></ul><p><em>Only available when <strong>Custom on mobile</strong> is On.</em></p></td></tr></tbody></table>

</details>

<details>

<summary>Section ID</summary>

Adds a custom ID to identify the section and create a scroll anchor.

For example, if the Section ID is `product-highlight`, use `#product-highlight` as the link to scroll directly to that section.

For links from another page, use the full page URL followed by the Section ID, such as `https://your-store.com/#product-highlight`.

</details>

#### 4.2. Inner content layout

Arrange the blocks placed inside the Custom section.

Inner content layout controls the direction, alignment, position, gap, and mobile layout of the blocks inside the section. These controls work similarly to the [Inner content layout](https://ursus-ecom.gitbook.io/arctos-theme/section-templates/pages/ABvGsQq7dgOOxcwgztbs#id-3.2.-inner-content-layout).

#### 4.3. Style

Control the section's color scheme, background, and visual treatment.

<details>

<summary>Color scheme</summary>

<table><thead><tr><th width="171.3671875">Setting</th><th width="144.484375">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Uses the inherited color scheme from theme settings when On. Turn Off to choose an independent color scheme for this section.</td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme selector</td><td>Selects a color scheme from <a href="/arctos-theme/theme-settings/colors.md">Theme settings > Colors</a>. <em>Only available when <strong>Inherit color scheme</strong> is Off.</em></td></tr></tbody></table>

</details>

<details>

<summary>Background</summary>

Turn **Custom background** to **On** to create a custom background treatment for the section.

<table data-search="false"><thead><tr><th width="171.3671875">Setting</th><th width="144.484375">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Background</strong></td><td><ul><li>None</li><li>Color</li><li>Media</li></ul></td><td><ul><li><strong>None:</strong> Keeps the background transparent.</li><li><strong>Color:</strong> Displays a solid color or gradient background.</li><li><strong>Media:</strong> Displays a background image or video.</li></ul></td></tr><tr><td><strong>Color style</strong></td><td><ul><li>Solid</li><li>Gradient</li></ul></td><td>Chooses whether the color background uses a solid color or a gradient. <em>Available when <strong>Background</strong> is <strong>Color</strong>.</em></td></tr><tr><td><strong>Color code</strong></td><td>Color or gradient picker</td><td>Sets the color value for the solid color or gradient. <em>Available when <strong>Background</strong> is <strong>Color</strong>.</em></td></tr><tr><td><strong>Type</strong></td><td><ul><li>Image</li><li>Video</li></ul></td><td>Selects whether to use an image or video file for the background media. <em>Available when <strong>Background</strong> is <strong>Media</strong>.</em></td></tr><tr><td><strong>File</strong></td><td>Image or video picker</td><td>Selects the image or video file for the background. <em>Available when <strong>Background</strong> is <strong>Media</strong>.</em></td></tr><tr><td><strong>Show different media on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Reveals separate mobile media controls so you can select a dedicated image or video file for mobile screens. If enabled and the mobile file is not selected, the section seamlessly falls back to the desktop media file. <em>Available when <strong>Background</strong> is <strong>Media</strong>.</em></td></tr><tr><td><strong>Type (Mobile)</strong></td><td><ul><li>Image</li><li>Video</li></ul></td><td>Chooses whether the mobile background media is an image or video. <em>Available when <strong>Show different media on mobile</strong> is On.</em></td></tr><tr><td><strong>File (Mobile)</strong></td><td>Image or video picker</td><td>Selects the dedicated image or video file for mobile screens. <em>Available when <strong>Show different media on mobile</strong> is On.</em></td></tr><tr><td><strong>Overlay</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds a solid or gradient overlay tint over the background media to ensure text remains legible. <em>Available when <strong>Background</strong> is <strong>Media</strong>.</em></td></tr><tr><td><strong>Enable parallax effect</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables a depth scroll animation on the background media. Automatically disabled when reduced motion is preferred. <em>Available when <strong>Background</strong> is <strong>Media</strong>.</em></td></tr></tbody></table>

{% hint style="info" %}
**Mobile presentation vs mobile asset:**

Setting separate mobile dimensions or spacing (such as **Custom on mobile** under **Height**, **Inner content layout**, or **Spacing**) controls how the section is sized and arranged on small screens. In contrast, **Show different media on mobile** replaces the underlying media asset with a dedicated mobile image or video file.
{% endhint %}

</details>

#### 4.4. Spacing

<table><thead><tr><th width="171.3671875">Setting</th><th width="138.5859375">Option</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Padding</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds space inside the section between its edge and the inner content.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><p>Reveals separate padding values with the same setting structure for mobile screens.</p><p><em>Only available when <strong>Padding</strong> is On.</em></p></td></tr></tbody></table>

### Design ideas

{% tabs %}
{% tab title="Full-bleed hero banner" icon="bullseye-arrow" %}
Set Container width to Full width and Height to Large or Full, then use a Media background with a subtle Overlay so heading and button text stay readable over the image.
{% endtab %}

{% tab title="Anchor-linked promo sections" icon="person-arrow-up-from-line" %}
Give each Custom section on a landing page its own Section ID (for example `summer-sale`, `new-arrivals`), then link to them from a top navigation bar or a "Jump to" menu using `#summer-sale` style anchors.
{% endtab %}

{% tab title="Split content block" icon="split" %}
Set Direction to Horizontal and Alignment to Space between to place an image on one side and text plus a button on the other, without needing a separate two-column section type.
{% endtab %}
{% endtabs %}

{% hint style="success" %}
**Tip:**

* Since every section is a Custom section, name your Section IDs consistently (lowercase, hyphenated) so anchor links stay predictable across the site.

***

* Use Invisible mode when using a Group block inside a Custom section to group and align blocks, without wanting it to look like its own visual section.

***

* When using a Gradient background, preview on both desktop and mobile — gradient angle and color stops can look different at narrow widths.

***

* Turn on Custom on mobile for Inner content layout whenever a horizontal desktop layout would feel cramped on small screens.

***

* Keep Padding values proportional across a page. Large gaps in one section next to tight ones elsewhere can make a page feel inconsistent.
  {% endhint %}

### Related documentation

* [**Group**](/arctos-theme/blocks/layout/group.md) - group and align multiple Theme blocks inside a Custom section without adding another visual section
* [**Theme block**](/arctos-theme/blocks/introduction-to-blocks.md) - add content and functionality to a Custom section using modular Theme blocks
* [**Slideshow**](/arctos-theme/blocks/media/slideshow.md) - see an example of a pre-built section that uses the same Custom section and inner Theme block structure