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
app/sanity/schemas/objects/sections
directory -
A section schema file should have the following structure:
app/sanity/schemas/objects/sections/myNewSection.tsx import {defineField} from 'sanity';export default defineField({name: 'myNewSection',title: 'My New Section',type: 'object', // type 'object' is requiredfields: [defineField({name: 'showImage',title: 'Show collection image',description: 'Add useful info for content editor.',type: 'boolean',}),// Section settings field is required for every sectionsdefineField({type: 'sectionSettings',name: 'settings',}),],initialValue: {},preview: {},}); -
Add your newly created schema to the sections array located in the
app/sanity/schema/index.ts
file. -
Add a new groq query to the
app/groq/sections.ts
file using GROQD:app/groq/sections.ts export const MY_NEW_SECTION_SECTION_FRAGMENT = {_key: q.string().nullable(),_type: q.literal('myNewSection'),showImage: q.boolean().nullable(),settings: SECTION_SETTINGS_FRAGMENT,} satisfies Selection;// Add the the section fragment to the 'SECTION_LIST_SELECTION'export const SECTIONS_LIST_SELECTION = {"_type == 'carouselSection'": CAROUSEL_SECTION_FRAGMENT,"_type == 'collectionListSection'": COLLECTION_LIST_SECTION_FRAGMENT,"_type == 'featuredCollectionSection'": FEATURED_COLLECTION_SECTION_FRAGMENT,"_type == 'featuredProductSection'": FEATURED_PRODUCT_SECTION_FRAGMENT,"_type == 'myNewSection'": MY_NEW_SECTION_SECTION_FRAGMENT,"_type == 'imageBannerSection'": IMAGE_BANNER_SECTION_FRAGMENT,"_type == 'richtextSection'": RICHTEXT_SECTION_FRAGMENT,}; -
Create a new section component to the
app/components/sections/
directory:app/components/sections/myNewSection.tsx import type {TypeFromSelection} from 'groqd';import type {SectionDefaultProps} from '~/lib/type';import type {MY_NEW_SECTION_FRAGMENT} from '~/qroq/sections';// Infer props types from GROQD fragmenttype MyNewSectionProps = TypeFromSelection<typeof MY_NEW_SECTION_FRAGMENT>;export function MyNewSection(props: SectionDefaultProps & {data: MyNewSectionProps},) {const showImage = props.data.showImage;return "Your Component"} -
Add your newly created component to the
app/lib/sectionResolver.ts
file:app/lib/sectionResolver.ts import {lazy} from 'react';export const sections: {[key: string]: React.FC<any>;} = {carouselSection: lazy(() =>import('../components/sections/CarouselSection').then((module) => ({default: module.CarouselSection,})),),myNewSection: lazy(() =>import('../components/sections/MyNewSection').then((module) => ({default: module.MyNewSection,})),),...}; -
You are all set! You can now add your new section to any page using the Sanity Studio.