Section Types Reference

14 React components that read from Shopify Metaobjects. Each section corresponds to a metaobject definition in your Shopify Admin.

How it works

  1. 1 Create a metaobject definition in Shopify (e.g., type: section_hero)
  2. 2 Add fields to the definition (heading, image, button_text, etc.)
  3. 3 Create entries and reference them in a "route" metaobject
  4. 4 The Sections.tsx component maps types to React components

Read Shopify's Metaobjects docs →

Hero Sections

SectionHero

section_hero

Full-width hero banner with background image, heading, and CTA.

Fields: heading, subheading, image, button_text, button_link

SectionHeroSlider

section_hero_slider

Carousel of multiple hero slides.

Fields: slides (list of section_hero references)

Product & Collection

SectionFeaturedProducts

section_featured_products

Grid of featured products with quick-add.

Fields: heading, products (product references)

SectionCollectionGrid

section_collection_grid

Grid of collection cards.

Fields: heading, collections (collection references)

Content

SectionRichText

section_rich_text

Formatted text content.

Fields: heading, content

SectionImageWithText

section_image_with_text

Side-by-side image and text.

Fields: heading, content, image, image_position

SectionVideo

section_video

Embedded video (YouTube/Vimeo).

Fields: heading, video_url

Social Proof

SectionTestimonials

section_testimonials

Customer quotes.

Fields: heading, testimonials (list)

SectionLogos

section_logos

Partner/press logo strip.

Fields: heading, logos (file references)

Utility

SectionFAQ

section_faq

Accordion FAQ.

SectionFeatures

section_features

Feature cards grid.

SectionBanner

section_banner

Announcement banner.

SectionCountdown

section_countdown

Sale countdown timer.

SectionNewsletter

section_newsletter

Email signup form.