• Shopify Section
Richtext - columns
The "Richtext - columns" section is a sophisticated content builder that allows for complex multi-column layouts with diverse content types. It's particularly powerful because it combines the flexibility of rich text with advanced interactive elements.
Key features include:
- Flexible column layouts:
- Multiple columns with customizable widths
- Individual column background colors
- Custom text alignment per column
- Responsive stacking on mobile devices
Content block types available in each column:
1. Rich Text:
- Formatted text with headings
- Custom fonts and text styling
- Flexible text alignment
2. Media Elements:
- Inset images with multiple aspect ratio options (4:3, 2:3, 1:1, original)
- Image sliders with fade/slide transitions
- Before/after comparison sliders with interactive drag handle
- Audio players with progress bars and time display
- Video embeds with custom play/pause controls
3. Interactive Components:
- Countdown timers
- Newsletter signup forms
- Custom liquid code blocks
- Clickable links and buttons
Advanced features:
- Entrance animations for content blocks
- Background images with overlay options
- Custom spacing controls (margins/padding)
- Mobile-specific layouts and image sizes
- Intersection Observer for performance optimization
- Touch-friendly interactions for mobile devices
The section is particularly useful for:
- Creating complex product descriptions
- Building feature comparison pages
- Designing detailed about/information pages
- Showcasing product specifications
- Any content that benefits from a structured, multi-column layout with mixed media types
All elements are fully responsive and maintain their layout integrity across different screen sizes, with thoughtful consideration for mobile viewing experiences.
• Style variations
Same section. Completely different stores.
Every example below uses the same Richtext - columns section just configured differently in the Shopify editor.
Set up your columns with different widths and backgrounds. Use the full library of blocks as content.
Set up your columns with different widths and backgrounds. Use the full library of blocks as content.