Customizing Page Layouts with Custom Sections and Content Containers (OS 3.0 Themes Only)

When your theme's pre-built components don't quite match your design vision, Custom sections and Content containers give you the flexibility to build exactly what you need. By combining basic building blocks, like Text, Images, and Buttons, inside flexible layout containers, you can create unique page layouts and a distinctive brand experience without writing code. 

This guide explains how to fine-tune existing components, build a custom component from scratch, and apply key layout rules to optimize your store's page design.

Core Concepts: Sections, Blocks, and Content Containers

Before you start designing, it is essential to understand the structural hierarchy of a webpage, as this directly affects your visual layout logic.

Section and Block Hierarchy

• Section: The core module of a page that defines the overall structure and functionality.
  
• Block: A reusable unit within a section, such as a button or an image.
  
• Hierarchical Logic: Settings applied to a parent container directly affect the layout of its "first-level" child elements. Understanding this relationship helps you determine which layer to adjust when changing alignment or direction (e.g., horizontal vs. vertical).
  

What is a "Content container"?

A Content container does not hold specific content by itself; it acts as a highly flexible "layout framework":

• Content Hosting (Using reusable blocks): Containers serve as a collection point for basic building blocks. You can place various reusable blocks (such as Text, Images, Buttons, etc.) into a container as "content."
  

• Flexible Layout Logic (Flex Layout): Containers use flexible layout logic. Think of it as an invisible frame that lets you freely adjust the direction of content (horizontal/vertical), alignment, and wrapping rules.
  

  Note: Page-specific components, such as the Product page module, cannot be added to a Content container. See "Limitations and Important Considerations for Content Containers" below for details.

Beginner Case: Tweaking Existing Components

You don't always have to start from scratch. You can use the layout capabilities of a Content container to fine-tune existing official components (e.g., Image with text list, Image comparison, etc.).

Layout Application Logic: Where to Find the Settings

When adjusting component layouts, follow this logic to quickly locate the correct settings:

• Downward Application (Parent-level controls child-level): Most layout settings (such as alignment, spacing, and direction) apply to the "next level" elements within the container.
  

• Self-applying Logic (Terminal node controls itself): If a block is the final level in the hierarchy (such as a single button or text) and has its own layout options, those settings will apply directly to the block itself.

  Tip: To quickly optimize the layout of a specific block, look for layout settings in the parent container of that block, or within the block's own settings. For example, to change how a group of cards is arranged, click the parent container of the card group and adjust the settings in its panel.

Common Layout Tweaks for Content Containers

Content containers support the following common layout adjustments:

• Change Layout Direction: Use the container’s flexible layout logic to switch reusable blocks from a horizontal row to a vertical column.
• Optimize Alignment and Wrapping: Fine-tune how elements align within the space or set rules for auto-wrapping when screen space is limited.
• Adjust Spacing: Modify the Margins and Padding between elements to create a tighter or more spacious look.

Advanced Case: Building a Unique Component (Step-by-Step)

If your theme doesn't offer a specific component you need, you can build it from scratch using a Custom section. The steps below walk through creating a "Feature Grid"—a component with a top title, three side-by-side feature cards, and a bottom button.

To build this component, follow these steps:

1. Analyze the layout structure. The overall layout is a vertical column, but the middle section containing the three cards is a horizontal row, and each card's internal elements are arranged in a vertical column.
   
2. In the Theme Editor, click + Add component under Template, then add a Custom section. 
   
   • Within this section, add three Content containers (reserved for the Title, Card group, and Button).
     
   • Then set the section's layout direction to Vertical.
     
3. Add a Title component to the 1st Content container.
   
   • Then, add a Button component to the 3rd Content container.
     
4. Enter the 2nd Content container and add three sub-level Content containers (one per card). 
   
   • Switch this container's layout direction to Horizontal so the cards sit side by side.
     
   • Select each of the three subcontainers and change their width from Auto to 33% to divide the space equally.
     
5. Inside the 1st card container, add an Image, Title, Text, and Button in that order. 
   
   • Set the container's alignment to Left.
     
   • Then adjust the Line spacing in the parent container to create balanced gaps between elements.
     
6. Once the first card looks the way you want, duplicate that container twice, then replace the images and text in the other two cards to complete the component.
   

Limitations and Important Considerations for Content Containers

Component Compatibility with Content Containers

Only reusable blocks can be added to a Content container. Availability depends on whether the module is general-purpose or page-specific:

• General-purpose Components (usable across multiple pages): Basic modules usable across most areas of the site, such as Text, Title, Button, Image, Product cards, and Blogs (over 30 types available).
• Specific-page Components (restricted use): Features designed exclusively for certain page types. For example, the Product page module is specific to the Product page and cannot be added to a Content container.

Static Content Focus for Content Containers

Content containers are ideal for static layouts. They do not natively support complex animations or logic, such as an auto-playing banner built with the Banner image component.

Page Block Limits for Custom Sections

Each page has a limit of 50 Blocks.