Skip to content

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:

  1. Add a section schema file to the studio/schemas/objects/sections directory

  2. A section schema file should have the following structure:

    studio/schemas/objects/sections/myNewSection.tsx
    import {defineField} from 'sanity';
    export default defineField({
    name: 'myNewSection',
    title: 'My New Section',
    type: 'object', // type 'object' is required
    fields: [
    defineField({
    name: 'showImage',
    title: 'Show collection image',
    description: 'Add useful info for content editor.',
    type: 'boolean',
    }),
    // Section settings field is required for every sections
    defineField({
    type: 'sectionSettings',
    name: 'settings',
    }),
    ],
    initialValue: {},
    preview: {},
    });

  3. Add your newly created schema to the sections array located in the studio/schema/index.ts file.

  4. 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,
    };

  5. 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 fragment
    type MyNewSectionProps = TypeFromSelection<typeof MY_NEW_SECTION_FRAGMENT>;
    export function MyNewSection(
    props: SectionDefaultProps & {data: MyNewSectionProps},
    ) {
    const showImage = props.data.showImage;
    return "Your Component"
    }

  6. 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,
    })),
    ),
    ...
    };

  7. You are all set! You can now add your new section to any page using the Sanity Studio.