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 app/sanity/schemas/objects/sections directory

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

   app/sanity/schemas/objects/sections/my-new-section.ts

   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 app/sanity/schema/index.ts file.

4. Add a new groq query to the app/data/sanity/sections.ts file using GROQ:

   app/data/sanity/sections.ts

   export const MY_NEW_SECTION_SECTION_FRAGMENT = defineQuery(`{
     _key,
     _type,
     showImage,
     settings ${SECTION_SETTINGS_FRAGMENT}
   }`);
   
   // Add the the section fragment to 'SECTIONS_FRAGMENT'
   export const SECTIONS_FRAGMENT = () =>
     defineQuery(`
       _type == 'richtextSection' => ${RICHTEXT_SECTION_FRAGMENT},
       _type == 'carouselSection' => ${CAROUSEL_SECTION_FRAGMENT},
       _type == 'collectionListSection' => ${COLLECTION_LIST_SECTION_FRAGMENT},
       _type == 'featuredProductSection' => ${FEATURED_PRODUCT_SECTION_FRAGMENT},
       _type == 'featuredCollectionSection' => ${FEATURED_COLLECTION_SECTION_FRAGMENT},
       _type == 'imageBannerSection' => ${IMAGE_BANNER_SECTION_FRAGMENT},
       _type == 'myNewSection' => ${MY_NEW_SECTION_SECTION_FRAGMENT},
     `);

5. Create a new section component to the app/components/sections/ directory:

   app/components/sections/my-new-section.tsx

   import type {SectionDefaultProps, SectionOfType} from 'types';
   
   // Infer props types from Sanity TypeGen
   type MyNewSectionProps = SectionOfType<'myNewSection'>;
   
   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/section-sesolver.ts

   ...
   
   import {MyNewSection} from '~/components/sections/my-new-section';
   
   export const sections: {
     [key: string]: React.FC<any>;
   } = {
     carouselSection: CarouselSection,
     collectionBannerSection: CollectionBannerSection,
     myNewSection: MyNewSection,
     ...
   };

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