Skip to Content

Sections Reference

This reference covers all sections available in the Edpro theme. Sections are the building blocks of your store pages.

How to Use Sections

  1. Open the theme editor
  2. Navigate to the page you want to edit
  3. Click Add section in the left sidebar
  4. Select a section from the list
  5. Configure its settings and add blocks

Homepage Sections

Main Hero Slider

A full-width hero section with sliding images, text, and call-to-action buttons.

Settings:

  • Background color
  • Mobile height (300-800px)
  • Desktop height (400-1200px)
  • Show navigation

Blocks: Hero slides with media, text, and buttons

Secondary Hero

A versatile hero section for secondary messaging.

Use for: Welcome messages, promotional banners, brand statements

Product Display

Display products from a collection or manual selection.

Settings:

  • Display type (grid or slider)
  • Product source (collection or product list)
  • Grid/slider configuration
  • Background color

Blocks: Content group, buttons

Collections Slider

Showcase multiple collections in a sliding format.

Use for: Category navigation, seasonal collections, gift guides

Featured Article

Highlight a blog article on your homepage.

Use for: News, announcements, content marketing

Content Sections

Free Blocks

A flexible section for custom content layouts.

Blocks:

  • Headings
  • Paragraphs
  • Buttons
  • Media
  • Spacers
  • And more

Brand Content

Tell your brand story with media and text.

Use for: About us content, brand values, mission statements

Citation

Display customer quotes or testimonials.

Use for: Social proof, customer testimonials

Double Media

Two media elements side by side.

Use for: Before/after images, product comparisons

Image

Single full-width or contained image.

Settings: Image, height, link, alt text

Media Slider

Carousel of images or videos.

Use for: Lookbooks, product galleries, behind-the-scenes

Gallery that expands on interaction.

Use for: Portfolio-style displays, detailed product views

Product

Main product section for product pages.

Blocks:

  • Product informations
  • Badges
  • Price
  • Variants
  • Buy buttons
  • Description
  • Accordions
  • Recommendations

Product Display

Featured products grid or slider.

Settings: Source, layout, styling

Product Recommendations

AI-powered or manual product suggestions.

Use for: Cross-selling, related products

Shop the Look

Curated product sets for lifestyle selling.

Use for: Outfit bundles, room sets, styled looks

Trust & Social Proof

General Reviews

Display customer reviews and ratings.

Use for: Building trust, social proof

Reassurance

Trust badges and guarantees.

Blocks: Reassurance items (shipping, returns, security)

Ticker

Scrolling text banner.

Use for: Announcements, promotions, shipping info

Comparison Sections

Simple Before/After

Basic before/after image comparison.

Use for: Product results, transformations

Detailed Before/After

Extended before/after with more context.

Use for: Detailed comparisons, case studies

FAQ & Information

Small FAQ

Compact FAQ with accordion items.

Blocks: Question/answer pairs

Page FAQ (Full)

Complete FAQ page layout.

Blocks: Categories and questions

Site header with logo, navigation, and utility icons.

Settings: Logo, position, behavior

Blocks: Navigation items, mega menu content

Site footer with links, newsletter, and payment icons.

Blocks: Link columns, newsletter, social links

Navigation breadcrumbs showing page hierarchy.

Commerce Sections

Cart Drawer

Slide-out cart panel.

Settings: Progress indicator, recommendations

Blocks: Progress steps, payment icons

Main Cart

Full cart page layout.

Filter Panel

Product filtering for collections.

Settings: Filter types, layout

Announcement Bar

Announcement Banner with countdown.

Blocks: Countdown timer

Email signup popup.

Settings: Timing, content, styling

Layout Sections

Spacing

Add vertical space between sections.

Settings: Mobile and desktop spacing amounts

List Collections

Display all or selected collections.

Settings: Display style, per-row count

Article Sections

Article Hero

Hero section for blog articles.

Blocks: Title, author, excerpt

How Sections Work Together

Section Groups

Sections are organized into groups:

  • Header group - Top of every page
  • Footer group - Bottom of every page
  • Modal group - Overlays (cart drawer, popups)
  • Template body - Main page content

Section Limits

  • Maximum sections per page: 25
  • Maximum blocks per section: Varies by section type

Responsive Behavior

All sections adapt to different screen sizes:

  • Desktop: Full layouts
  • Tablet: Adjusted columns
  • Mobile: Stacked, simplified layouts

Tips for Using Sections

  1. Start with hero sections for impact
  2. Alternate content types for visual interest
  3. Use spacing sections for breathing room
  4. Add trust elements throughout
  5. Keep mobile experience in mind

Need Help?

For specific section configuration, refer to:

Last updated on