Sections & Groups
Sections
The Freedom theme is built entirely on the powerful Shopify Theme blocks architecture. Unlike traditional themes where
sections have rigid structures, Freedom utilizes the full flexibility of Theme blocks to allow you to construct unique
layouts using nested modular elements.
At the core of the theme lies a versatile component simply named Section. This element serves as a blank canvas and
gives you the freedom to arrange any available blocks like text, images, and buttons exactly how you envision them.
When you select options like Contact Form, Image Banner, or FAQ, you are essentially utilizing pre-configured presets of
the master Section (internally section.liquid). While they come with default settings for convenience, they operate
within the same flexible structure.
However, not all sections in the theme utilize this single generic file. You can read more about these distinct layouts
under the Specialized sections structure heading below.
Settings
Because most sections share this same foundation, you will find a consistent set of controls across the theme:
Layout
This determines how the blocks inside the section are arranged.
- Direction: Choose Vertical (Column) to stack blocks or Horizontal (Row) to place them side-by-side.
- Gap: Controls the spacing between elements.
- Alignment: Controls how content is positioned (e.g., Center, Left, Stretch) vertically or horizontally.
- Mobile Layout: You can toggle Use different layout on mobile to completely change the direction and spacing for
smaller screens (e.g., Row on Desktop, Column on Mobile).
Size
- Width:
- Full: Spans the entire screen edge-to-edge.
- Page: Constraints content to the standard site width.
- Custom: Allows you to define a specific max-width in pixels.
- Minimum Height:
- Fit: The section shrinks to fit its content.
- Screen: Sets height as a percentage of the user's viewport (e.g., 100% for a full-screen hero).
Appearance
- Background media: You can assign an Image or Video as the background for the entire section.
- Overlay: Apply a solid color or gradient over the background media to ensure text readability.
Specialized sections structure
Sections like Scrolling Content, Hero Slideshow, or Testimonials utilize a unique nested structure. This architecture
allows you to wrap complex functionality with standard content blocks.
The Structure:
1. The Parent Section handles the background, width, and padding for the whole area.
2. Content Above (Header) is a dedicated slot where you can add standard blocks like Headings and Subheadings that
appear before the main feature.
3. The Main Block contains the specific settings for the feature (e.g. Scroll Speed, Slider logic).
4. Content Below is the empty space at the bottom that allows you to add extra blocks like buttons that sit below the
main feature.
This arrangement allows you to apply a single unified background that seamlessly covers all these elements while
utilizing consistent layout and spacing settings for the entire section.
Groups
While Sections define the main areas of your page, Groups allow you to organize content within those sections. They act
as inner containers, giving you precise control over layout and styling for specific sets of blocks.
There are three types of groups available in the theme, each serving a specific purpose.
Group (Basic)
The standard Group block is the most commonly used tool for layout adjustments. It features similar layout settings to
the main Section (Direction, Gap, Alignment) but applies them only to the blocks nested inside it.
Common Use Case:
Imagine a section with a vertical layout (Heading, Text, Buttons stacked on top of each other). If you want two buttons
to sit side-by-side instead of stacked, you would:
1. Add a Group block.
2. Set the Group's direction to Horizontal.
3. Place the two button blocks inside this Group.
Best Practice: Always use this basic Group unless you specifically need a background color or border. This keeps the
page code lightweight and ensures optimal performance.
Styled Group
The Styled Group includes all the layout features of the Basic Group but adds rich styling options found in the
Appearance settings.
Features:
- Backgrounds: Add a solid color, gradient, image, or video background specific to this group.
- Borders: Apply borders, control thickness, and adjust Corner radius for a card-like appearance.
Use this when you want to create a distinct "box" or highlighted area within a section (e.g., a pricing card or a
highlighted feature box).
Sized Group & Proportional Parts
The Sized Group is designed for grid layouts, such as split banners or asymmetrical collages.
How it works:
Unlike other groups, the Sized Group can only contain a specific block called a Proportional part. You then place your
actual content (Images, Text) inside these parts.
Desktop Layout (Horizontal)
On desktops, the Proportional parts are arranged side-by-side. You control their width using the Proportion setting
(1–5).
- Logic: The theme compares the values of all parts in the group, for example:
- If Part A is 1 and Part B is 1, they split the space 50/50.
- If Part A is set to 2 and Part B is set to 1, they split the space 2:1 (Part A takes up 2/3, Part B takes 1/3).
Height Control
You can control the height of each part independently using the Height setting (Fit or Custom).
- Desktop & Mobile: While Proportion controls the width on desktop, the Height setting determines the vertical size of
the block on all devices.
- Mobile Specifics: Since the mobile layout switches to a vertical stack, the Proportion setting has no effect there.
Therefore, the Height setting becomes the primary way to control the size of each block on mobile screens.