Sections
Fluid aims to be flexible and easy to use. Similar to a Shopify Liquid theme, you can create sections to build your pages and organize your content.
Each section is built of:
- A Sanity schema where you can define all the section fields that the content editor will be able to edit
- A React component to render the section in your Hydrogen app
- A GROQ query to fetch section data from Sanity
Here a the steps to create a new section:
-
Add a section schema file to the
studio/schemas/objects/sections
directory -
A section schema file should have the following structure:
-
Add your newly created schema to the sections array located in the
studio/schema/index.ts
file. -
Add a new groq query to the
app/groq/sections.ts
file using GROQD: -
Create a new section component to the
app/components/sections/
directory: -
Add your newly created component to the
app/lib/sectionResolver.ts
file: -
You are all set! You can now add your new section to any page using the Sanity Studio.