> 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/custom-section.md). # Custom section Build flexible, custom page sections by combining content blocks — a complete guide to the Custom Section system in the Arctos theme.
The **Custom Section** is the foundation of every page in the Arctos theme. Rather than locking you into a fixed layout, it gives you a blank canvas where you choose exactly which content elements — headings, text, images, buttons, video, and more — to include, and arrange them in any order you like. Think of it like building a page from individual blocks: each block adds one piece of content, and you mix and match them however you want to create a layout that fits your brand and your message. This means no two stores built with Arctos need to look the same. Every public section in Arctos (everything except the Header) is a Custom Section at its core — the theme applies different default blocks and settings per section type, but the underlying system is always the same. Understanding how Custom Sections work gives you complete creative control over your entire storefront. *** ### What you can do * **Build any layout** by mixing text, images, video, buttons, and more in a single section * **Drag and drop blocks** to rearrange content in any order without touching code * **Choose your own background** — a solid color, a gradient, an image, or a video * **Control spacing precisely** — set padding on all four sides, separately for desktop and mobile * **Apply your color scheme** or inherit the theme's default scheme for visual consistency * **Fill the full screen** for hero-style sections, or lock to a fixed height * **Add a parallax scroll effect** to background images for a dynamic, premium feel * **Go invisible** — strip background and padding completely to let content flow with the section above or below *** ### How to add a Custom Section 1. In the **Theme Editor (Customize)**, open the page where you want to add a section (Home page, collections, product pages, etc.). 2. In the left sidebar, click **Add section**. 3. Browse or search the section list — choose the section type that best fits your content (e.g., **Image with text**, **Rich text**, **Testimonials**, etc.). 4. Click the section to add it to your page. It appears at the bottom of the layout. 5. Click the section header in the sidebar to expand its settings. 6. Click **Add block** to choose content elements to populate your section. 7. Drag and drop blocks to reorder them. 8. Adjust the section-level settings (background, height, spacing) to control the overall look. 9. Click **Save** to publish your changes. {% hint style="success" icon="lightbulb" %} **Tip:** You can add multiple Custom Sections to the same page — each can have its own blocks, background, and spacing. This is the easiest way to build rich, varied page layouts without any code. {% endhint %} *** ### Section settings These settings control the section as a whole — the container that holds all your blocks. They affect the background, height, and spacing around your content. *** #### Layout settings These settings determine the size, shape, and visual presence of your section on the page. **Invisible mode** Removes the section's background color and all padding, making the section completely transparent and flush with surrounding sections. Content inside the section still displays — only the container styling is removed. Use this when you want content from the section above or below to flow visually into this section without a visual break. {% hint style="warning" icon="triangle-exclamation" %} **Warning:** When Invisible mode is on, the Background, Color scheme, and Spacing settings are all hidden because they no longer apply. Make sure your section still looks correct without any container styling before saving. {% endhint %} **Fullscreen** Stretches the section to fill the entire browser window height, regardless of content. This creates a bold, immersive section — ideal for hero banners, promotional callouts, or full-screen image and video backgrounds. When **Fullscreen** is enabled, the **Height** setting is hidden — the section automatically fills the viewport. {% hint style="success" icon="lightbulb" %} **Tip:** Fullscreen sections work best at the very top of a page. Pair them with a background image or video and overlay text using blocks to create a striking first impression. {% endhint %} **Height** Controls how tall the section is on desktop when **Fullscreen** is turned off. This setting adds a size multiplier on top of whatever the content inside naturally requires. **Options:** * *Auto* — The section height is determined entirely by the blocks and content inside it. Use this for compact sections like dividers, CTAs, or inline content areas. * *Small* — Adds a modest height above what the content naturally requires. Good for tight, focused sections. * *Medium* — A balanced increase. Works well for sections with moderate content that you want to visually emphasize. * *Large* — A significant height boost. Suitable for sections you want to stand out visually, such as featured collections or testimonials. * *Full* — Fills the remaining vertical space in the viewport. Unlike Fullscreen, this only fills what isn't already occupied by content above it. {% hint style="info" icon="note-sticky" %} **Note:** This setting only appears when **Fullscreen** is turned off. {% endhint %} *** #### Appearance settings These settings control the visual styling of the section container — background, color scheme, and overlay effects. **Inherit color scheme** When enabled, the section adopts the color scheme set in your **Theme settings → Colors**. This ensures the section blends consistently with the rest of your page. When disabled, you can choose a specific color scheme for this section only, allowing it to stand out from surrounding sections. {% hint style="success" icon="lightbulb" %} **Tip:** Alternate between inherited and custom color schemes to create visual rhythm down the page. Use the default scheme for most sections, then switch to a contrasting scheme for your most important call-to-action. {% endhint %} **Color scheme** Lets you pick a specific color scheme for this section when **Inherit color scheme** is turned off. Color schemes define a combination of background color, text color, button color, and accent color that work well together. {% hint style="info" icon="note-sticky" %} **Note:** This setting only appears when **Inherit color scheme** is turned off. To create or edit color schemes, go to **Theme settings → Colors** in the Theme Editor. {% endhint %} *** #### Background settings These settings appear under a **Custom background** toggle. Turn **Custom background** on to reveal the full set of background options. **Custom background** Enables a custom background for this section. When on, you can choose between a color background or a media background (image or video). When off, the section uses the background defined by your color scheme. {% hint style="info" icon="note-sticky" %} **Note:** Custom background settings are hidden when **Invisible mode** is enabled. {% endhint %} **Background type** Choose what kind of background fills the section container. **Options:** * *None* — No custom background. The section uses the background color from the color scheme. * *Color* — A solid color or gradient fills the background. Reveals the Color style options below. * *Media* — An image or video fills the background. Reveals the Media type options below. {% hint style="success" icon="lightbulb" %} **Tip:** A media background (image or video) creates a rich, immersive section that captures attention immediately. Pair it with a semi-transparent overlay and light-colored text for best readability. {% endhint %} **Color style** Choose between a single solid color or a gradient. **Options:** * *Solid* — A flat, single color fills the background. Reveals the **Color code** setting. * *Gradient* — A smooth transition between two or more colors fills the background. Reveals the **Color code (Gradient)** setting. **Color code (Solid)** Sets the exact color for a solid-color background. Click the color swatch to open the color picker, or type a hex code directly. **Color code (Gradient)** Defines a gradient background. The color picker supports linear and radial gradients. {% hint style="success" icon="lightbulb" %} **Tip:** Gradients work best when the transition is between your brand's primary color and white (or vice versa). Keep the shift subtle — a dramatic gradient across a large section can feel visually overwhelming. {% endhint %} **Media type** Choose whether the background is a static image or a looping video. **Options:** * *Image* — A still image fills the background. Reveals the **Image** setting. * *Video* — A video plays automatically in a loop behind your content. Reveals the **Video** setting. **Image** Upload or select a background image for this section. The image covers the full width and height of the section and scales to fit. **Recommended size:** *1920 × 800px* or wider, for crisp display on large screens **Supported formats:** JPG, PNG, WebP {% hint style="warning" icon="triangle-exclamation" %} **Warning:** Large, unoptimized images can slow your page load speed significantly. Always compress images before uploading — tools like TinyPNG or Squoosh can reduce file size without visible quality loss. Aim for under 500 KB per background image. {% endhint %} **Video** Select a video from your Shopify admin to use as the section background. Videos loop automatically and play without sound. {% hint style="info" icon="note-sticky" %} **Note:** The video must first be uploaded to your Shopify admin under **Content → Files**. Background videos work best in full-width sections with text overlay content. {% endhint %} **Media overlay** Adds a semi-transparent layer on top of a media background (image or video). Overlays improve text readability when your image or video has busy or bright areas. {% hint style="success" icon="lightbulb" %} **Tip:** Always use an overlay when placing text or buttons on top of a background image or video — even a very subtle dark overlay dramatically improves contrast and makes your text far easier to read. {% endhint %} **Overlay style** Choose the style of the overlay layer. **Options:** * *Solid* — A flat, semi-transparent color covers the entire media. Reveals the **Color code (Solid overlay)** setting. * *Gradient* — A directional color gradient fades from one edge to another. Reveals the **Color code (Gradient overlay)** setting. **Color code (Solid overlay)** Sets the overlay color and opacity. Use the alpha slider in the color picker to control transparency — lower opacity preserves more of the background image or video. {% hint style="success" icon="lightbulb" %} **Tip:** For most images, an opacity of 15–30% provides a subtle readability boost without making the background too dark. Increase to 40–60% if your image has bright areas or a lot of fine detail. {% endhint %} **Color code (Gradient overlay)** Defines a gradient overlay. The default fades from fully transparent at the top to fully opaque black at the bottom — ideal for hero sections with text at the bottom of the frame. {% hint style="success" icon="lightbulb" %} **Tip:** A top-to-bottom gradient overlay works especially well when your heading is near the top of the section and your subtext or CTA sits lower down. {% endhint %} **Enable parallax effect** When enabled, the background image scrolls at a slower speed than the rest of the page, creating a depth effect. This gives sections a premium, layered feel. {% hint style="warning" icon="triangle-exclamation" %} **Warning:** Parallax is most effective on full-width, full-height sections. It can feel jarring on short sections or on mobile — test on a phone before publishing to make sure the effect still looks intentional. {% endhint %} *** #### Spacing settings These settings control the padding — the empty space between the section's edges and the content inside. All spacing options appear under the **Padding** toggle. **Padding** Enables custom padding controls for this section. When off, the section uses the theme's default padding. When on, you can set the top, bottom, left, and right padding independently. **Top / Bottom / Left / Right** Controls the amount of empty space on each side of your content inside the section, measured in pixels. **Range:** *0px* to *200px* {% hint style="success" icon="lightbulb" %} **Tip:** Use larger top and bottom padding to create visual breathing room between sections. Use left and right padding to constrain wide content (like long paragraphs) to a comfortable reading width — the ideal line length for body text is 60–75 characters. {% endhint %} **Custom on mobile** Enables separate padding values for mobile devices. This lets you reduce padding on small screens while keeping generous spacing on desktop. **Mobile Top / Bottom / Left / Right** — Padding from 0 to 100px {% hint style="success" icon="lightbulb" %} **Tip:** A common pattern is to set desktop padding to 80–120px top and bottom, then reduce to 40–60px on mobile. This prevents sections from feeling too empty on small screens. {% endhint %} *** *** ### Available blocks This section supports all blocks from the theme's block library. You can add any number of each block type and arrange them in any order by dragging and dropping. | Block | What it adds to your section | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | **Accordion** | A collapsible panel that reveals hidden content when clicked — ideal for FAQs, product details, or shipping information | | **Avatar Group** | A row of customer avatars with an optional review snippet — builds trust through social proof | | **Before & After** | An interactive image comparison slider showing a before/after transformation — great for skincare, renovation, or comparison products | | **Button** | A clickable call-to-action button linking to a page, product, or collection | | **Container** | A wrapper block that groups and visually frames other blocks inside it | | **Copyright** | Displays your store's copyright text automatically | | **Custom Liquid** | Embeds custom code or third-party content (requires developer support) | | **Divider** | A visual horizontal rule to separate content areas cleanly | | **Follow on Shop** | A follow button that lets customers follow your store from the storefront | | **Group: Icon + Text** | A paired icon and text label — useful for feature lists, trust badges, or value propositions | | **Image** | A full or aligned image with optional caption and link | | **Jumbo Text** | Oversized display text for bold headings or campaign slogans | | **Listing** | A structured list of items such as links, features, or formatted content lines | | **Logo** | A single logo image — great for partner logos, certifications, or brand awards | | **Map** | An embedded store location map using Google Maps | | **Marquee Button** | An animated scrolling button within a marquee strip | | **Marquee Image** | An animated scrolling image within a marquee strip | | **Marquee Rich Text** | Animated scrolling text content within a marquee strip | | **Menu** | A navigation menu or link list displayed as a vertical or horizontal list | | **Password Group** | A grouped heading and password input for password-protected storefronts | | **Payment Icons** | Displays the payment method logos you accept (Visa, Mastercard, PayPal, etc.) | | **Policy Page** | Automatically displays a store policy (refund, privacy, terms of service) with your content filled in | | **Rich Text** | Formatted text content with headings, paragraphs, lists, and inline formatting | | **Social Media** | Icons linking to your social media profiles | | **Spacer** | A transparent gap of adjustable height to push content down or create visual space | | **Testimonial Item** | A single customer testimonial with name, star rating, and optional image | | **Title** | A section heading with optional subtitle — the most commonly used block for introducing content | | **Video** | An embedded video player for product demos, brand stories, or explainer content | {% hint style="info" icon="note-sticky" %} **Note:** You can add multiple instances of the same block type. For example, add two **Button** blocks to create a primary and secondary call-to-action side by side. {% endhint %} *** ### Design ideas & examples #### Create a hero section A hero section at the top of your Home page is the first thing visitors see — make it count. 1. Add a Custom Section and set **Fullscreen** to *On*. 2. Turn on **Custom background** and set **Background type** to *Media*. 3. Choose **Media type** → *Image* and upload a high-quality, wide image (at least 1920px wide). 4. Enable **Media overlay** and set **Overlay style** to *Solid* with \~25% opacity black. 5. Add a **Title** block with your main headline. 6. Add a **Rich Text** block with a supporting tagline. 7. Add a **Button** block with your primary CTA. 8. Set **Color scheme** to a scheme with light text so it stands out against the dark overlay. #### Build a feature showcase Highlight 3–5 key features of a product or service in a clean, scannable layout. 1. Add a Custom Section with **Height** set to *Medium*. 2. Turn on **Custom background** and set **Background type** → *Color*. 3. Set **Color style** → *Solid* and pick a light background color (e.g., `#f9fafb`). 4. Add a **Title** block with your section heading (e.g., "Why choose us?"). 5. Add a **Group: Icon + Text** block for each feature — choose an icon and write a short label and description. 6. Turn on **Padding** and set top and bottom to \~60px for breathing room. #### Add a trust-building strip A narrow section between your hero and main content that reinforces your store's credibility. 1. Add a Custom Section with **Height** set to *Small*. 2. Enable **Invisible mode** so it blends with the sections above and below. 3. Add a **Logo** block and upload logos of press mentions, certifications, or partner brands. 4. Or add a **Payment Icons** block and a short **Rich Text** line like "Trusted by 10,000+ customers." 5. Set **Padding** with left and right values of \~40px to keep content centered on wide screens. *** ### Tips & best practices {% hint style="success" %} **Tip:** Alternate light and dark sections to guide the customer's eye down the page. Use **Inherit color scheme** for most sections, then switch to a contrasting color scheme for your most important section — such as a promotional banner or newsletter signup. {% endhint %}