Implementing Global Content and Layout: A Technical Guide for Developers
This guide explains how to implement global content elements like headers, footers, and site-wide settings in a Pack-powered Hydrogen storefront from a technical perspective. You'll learn how to define global settings schemas, fetch global content in loaders, and create layout components to render consistent elements across your site.
Introduction to Global Content
Global content refers to elements that appear consistently across multiple pages of your storefront, such as:
- Headers and navigation
- Footers
- Announcements and banners
- Site-wide settings (colors, typography, etc.)
- Social media links
Pack provides a structured approach to managing global content through Storefront Settings, which are accessible to content editors via the Customizer but defined by developers in code.
Global Content Implementation Process
Implementing global content in a Pack-powered Hydrogen storefront involves these steps:
- Set up global Storefront Settings schema in your code
- Set up global content fetching in your root loader
- Implement the global layout component
- Connect the layout to your routes
Let's walk through each step with code examples.
Step 1: Set Up Global Storefront Settings Schema
In Pack, global elements like headers, footers, and promotional banners are managed through Storefront Settings in the Customizer. As a developer, you need to define the settings schema in your code.
Global settings are defined in the /settings/index.js file of your project. This file exports an array of settings that will be available to content editors in the Customizer.
// settings/index.js
// Must be an array
const settings = [
{
label: 'Header',
name: 'header',
component: 'group',
fields: [
{
label: 'Logo',
name: 'logo',
component: 'image',
},
{
label: 'Menu Items',
name: 'menuItems',
component: 'group-list',
itemProps: {
label: '{{item.label}}',
},
fields: [
{
label: 'Label',
name: 'label',
component: 'text',
},
{
label: 'Link',
name: 'link',
component: 'link',
},
{
label: 'Submenu Items',
name: 'submenuItems',
component: 'group-list',
itemProps: {
label: '{{item.label}}',
},
fields: [
{
label: 'Label',
name: 'label',
component: 'text',
},
{
label: 'Link',
name: 'link',
component: 'link',
},
],
},
],
},
],
},
{
label: 'Footer',
name: 'footer',
component: 'group',
fields: [
{
label: 'Logo',
name: 'logo',
component: 'image',
},
{
label: 'Footer Links',
name: 'footerLinks',
component: 'group-list',
fields: [
{
label: 'Section Title',
name: 'title',
component: 'text',
},
{
label: 'Links',
name: 'links',
component: 'group-list',
itemProps: {
label: '{{item.label}}',
},
fields: [
{
label: 'Label',
name: 'label',
component: 'text',
},
{
label: 'Link',
name: 'link',
component: 'link',
},
],
},
],
},
{
label: 'Copyright Text',
name: 'copyright',
component: 'text',
},
],
},
{
label: 'Theme Settings',
name: 'theme',
component: 'group',
fields: [
{
label: 'Primary Color',
name: 'primaryColor',
component: 'color',
defaultValue: '#000000',
},
{
label: 'Secondary Color',
name: 'secondaryColor',
component: 'color',
defaultValue: '#ffffff',
},
{
label: 'Font Primary',
name: 'fontPrimary',
component: 'select',
options: [
{ label: 'Sans Serif', value: 'sans-serif' },
{ label: 'Serif', value: 'serif' },
],
defaultValue: 'sans-serif',
},
],
},
{
label: 'Announcement Bar',
name: 'announcement',
component: 'group',
fields: [
{
label: 'Enable',
name: 'enabled',
component: 'toggle',
defaultValue: false,
},
{
label: 'Text',
name: 'text',
component: 'text',
},
{
label: 'Link',
name: 'link',
component: 'link',
},
{
label: 'Background Color',
name: 'backgroundColor',
component: 'color',
defaultValue: '#000000',
},
{
label: 'Text Color',
name: 'textColor',
component: 'color',
defaultValue: '#ffffff',
},
],
},
];
export default settings;