Skip to main content

Section settings

Overview​

Every section in the theme includes comprehensive settings that control layout, appearance, and behavior. These universal settings ensure consistent design while providing flexibility to customize each section's visual impact and spacing. Understanding section settings is crucial for creating professional, cohesive page layouts that work seamlessly across all devices.

Universal section settings​

Spacing Controls​

  • Padding Top & Bottom (Desktop)
  • Padding Top & Bottom (Mobile) - which can inherit desktop values

Appearance​

Color Scheme Options

  • Default: Uses global theme colors for consistent brand representation
  • Light: White/light backgrounds with dark text for clean, minimal aesthetics
  • Dark: Dark backgrounds with light text for dramatic, premium feels

Background Enhancements

  • Solid Colors: Single color backgrounds with opacity controls
  • Gradient Overlays: Linear and radial gradients for visual depth
  • Image Backgrounds: Full-width images with overlay options for text readability
  • Video Backgrounds: Subtle motion backgrounds with mobile fallback images

Default responsive behavior​

  • Desktop Display: Full section width with complete padding and styling controls for optimal large-screen presentation.
  • Tablet Adaptations: Automatic content scaling and spacing adjustments for mid-sized screens and touch interactions.
  • Mobile Optimizations: Condensed layouts, reduced padding, and touch-friendly elements for small-screen usability.

All available sections​

Collection sections​

  • Collection list
  • Collection list: Expand
  • Collection sale banner
  • Collection title content
  • Collection: Editorial
  • Collection: Title with image
  • Feature collection: grid
  • Product intro

Blog sections​

  • Blog list
  • Blog: Editorial

Product sections​

  • Featured product
  • Featured product grid
  • Product list
  • Product list with box
  • Product list with sidebar