Virtual Workshop: From Idea to Application in 60 Minutes

Announcing Visual Copilot - Figma to production in half the time

Builder.io
Builder.io

Virtual Workshop: From Idea to Application in 60 Minutes

Announcing Visual Copilot - Figma to production in half the time

Landing pages
Blog Article
Hero Section
Navigation Links
Announcement Bar
Product Details
Product Editorial
Homepage
Request a blueprintGo to developer docs

Integrate a Hero Section

Sometimes you want to just one section of a page to be visually editable, such as for the hero section of a common page, like a collection page.

Model definition

A standard section model named collection-hero is all you need. Name this section based on what kind of page this section is on, such as if it's on a product collection page. Another example is if this section is on a different page type, such as a product page, you may want to use a more fitting name like product-hero.

By default, you don't need any fields. Instead, use targeting to determine if different visitors or pages should see a different hero.

Example code

Get the latest from Builder.io