Custom Section
What This Section Does
The Custom Section is your blank canvas for creating any layout you can imagine. It provides a flexible container where you can add, arrange, and style any combination of blocks to build unique page sections that perfectly match your store's needs.
Perfect for: Creating unique landing pages, building custom hero sections, designing promotional areas, and constructing layouts that don't fit standard section templates
How to Add It
Step 1: Add the Section
- In your Shopify admin, go to Online Store → Themes
- Click Customize next to your live theme
- Click Add section in the main content area
- Choose Custom Section from the list
Step 2: Build Your Layout
- Click Add block within the Custom Section
- Choose from any available block type
- Add multiple blocks and arrange them as needed
- Configure the overall section layout and styling
Key Settings to Configure
Layout Controls
Direction: Choose how your blocks are arranged
- When to use: Vertical for traditional stacked layouts, Horizontal for side-by-side content
- Pro tip: Horizontal direction automatically stacks on mobile for better usability
Alignment & Position: Control how content is positioned within the section
- Best practice: Center alignment works for most content, but experiment with different positions for unique designs
Gap Between Items: Set spacing between your blocks
- When to use: Larger gaps for breathing room, smaller gaps for tighter, more connected layouts
Section Sizing
Height Options: Control how tall your section appears
- Auto: Height adjusts to content (recommended for most uses)
- Small/Medium/Large: Fixed heights for consistent section sizing
- Full Screen: Perfect for hero sections and landing pages
Page Width: Choose how wide your content appears
- Regular: Standard content width (most common)
- Narrow: Constrained width for focused content
- Full: Edge-to-edge layouts for maximum impact
Background Styling
Background Media: Add visual impact behind your content
- Color: Use your theme's color schemes for brand consistency
- Image: Upload background images with customizable overlays
- Video: Add background videos for dynamic, engaging sections
- Pro tip: Always test readability with background media - use overlays to ensure text is visible
Pro Tips for Success
Design Best Practices
- Start with purpose: Define what you want to achieve before adding blocks
- Use consistent spacing: Match gap settings with other sections on your page
- Test responsiveness: Always preview on mobile devices before publishing
- Layer thoughtfully: Use background media to enhance, not overwhelm, your content
Common Mistakes
- Too many block types: Stick to 2-3 different block types per section for clarity
- Overwhelming backgrounds: Dark overlays help text readability over busy background images
- Ignoring mobile: Remember that horizontal layouts stack vertically on phones
- Inconsistent heights: If using multiple Custom Sections, consider consistent height settings