Manage Sections

You can view all of your sections via Pack’s Admin > Sections, and manage them in Pack’s Customizer.

Template Sections

Template sections are replicated across all pages that share the same template. This is ideal for content that should appear on all pages of a certain type, for example, you might want to add a section that appears on all product pages.

Template sections can be added to any of these 5 templates:

• /pages
• /products
• /collections
• /blogs
• /articles

For example, you might want to include a product details section every time you create a /products pages.

To add a template section:

1. Select Customizer in Pack’s admin.
2. Select a page with the template you want to add a section to.
3. Click on the template name (ex. Page) — in the Template menu in the left panel.
4. Choose + Add Section in the left panel.
5. Select a section or metaobject
6. Click Add Selected.
7. This section will now appear on all pages using that template.

Note: Now that you’ve added a new section to all pages that fall within a given template (this section appears on all “Product” pages or “Article” pages), you can open each page individually to customize the section each time it appears.

If you’d like to add a section where the content updates automatically are reflected across all sections, you’ll want to create a linked section.

Local Sections

Local sections are unique, and only appear on one page. By default, any new section you create the customizer will be a local section.

1. Select Customizer in Pack's admin.
2. Find the Sections menu on the left panel and click the +
3. Click Add New Section
4. Choose the section(s) you want to add; multiple selections are possible.
5. Advanced users have the option to add an HTML section to create a section from scratch using HTML.
6. Click Add Selected
7. Click on the new section to start editing it.

You can edit, duplicate, or delete, your section by clicking the three dots next to the Page dropdown menu—located at the top of the left hand panel.

Copying a Section

You can create an independent copy of an existing, populated section from another page. This process creates a distinct version of the section. When you make edits to the copy of your section, your changes will not affect the original version.

1. Select Customizer in Pack's admin.
2. Find the Sections menu on the left panel and click the +
3. Select Copy Existing Section
4. Find the section you want to copy by name and select it to create a unique copy.
5. Click on the new section to start editing it.

Linking a Section

When you link a section, you’re adding a pre-existing, populated section from another page to your current page. This creates a link between the sections, displaying identical content on both pages.

Any edits made to a linked section will be reflected on all pages where it's displayed, due to its 'linked' nature.

1. Select Customizer in Pack’s admin.
2. Find the Sections menu on the left panel and click the +
3. Select Link Existing Section
4. Search for the existing section by name and click to link it.

Adding a New Section

You can add a new section via Customizer.

To add a section to multiple pages, follow these steps:

1. Navigate to Pack's admin, then select Pages.
2. Check the box next to all the pages you want to add the section to.
3. Click on the three dots at the top of the page list and select Add sections.

Publishing and Unpublishing Sections

Publishing and unpublishing sections allows you to control the visibility of specific content elements across your storefront.

This feature is particularly valuable for managing dynamic content, such as promotional banners, seasonal messages, or time-sensitive announcements.

When you publish a section:

• The section becomes visible on all pages where it is used.
• This is ideal for displaying content like promotional banners, which you might want to appear across multiple pages at the same time.

To publish a section:

1. Navigate to Pack’s admin, then select Sections.
2. Click on the three dots next to the Section name you wish to publish.
3. Select Publish.

Hiding a Section

Hiding a section is useful when you want to temporarily remove a section from the live site without deleting it.

1. Navigate to Pack's Customizer to the page where the section is located.
2. Click on the three dots next to the Section name you wish to hide.
3. Select Hide Section.

Deleting a Section

1. Navigate to Pack’s admin > Sections.
2. Find the section you wish to delete and click on the three dots next to the section name.
3. Choose Delete and confirm.

Viewing all pages linked to a specific Section

You can verify which pages are currently using a specific section by following these steps:

1. Navigate to Pack’s admin > Sections.
2. Click on the particular Section.
3. Review the 'References' section which lists all pages the section is currently being used in.

Coding a new section

Sections are React components that have the capability to be rendered and interacted with via Customizer.

Sections allow you, as a developer, to create components that are editable by a Storefront editor and have a live preview of your component changing as you edit the Storefront. All your sections live in the /sections folder of your codebase.

You can create a new section by adding a new file to the /sections folder. The file should be a .tsx file that exports a React component.

export const MyFirstSection =  ({ cms }: any) => {
  // In this example cms would be { howdy: 'Howdy Label' }
  // defined by its Schema
  return (
    
 Hello, my name is {cms.howdy} 
  );
}

// Section Customizer Schema
MyFirstSection.Schema = {
  label: 'My First Section',
  key: 'myFirstSection',
  fields: [
    {
      name: 'howdy',
      component: 'text',
      label: 'Howdy Label',
    }
  ]
}

The cms prop on the component will match up with your components Schema fields. You can see there is a text component on the Schema field named howdy, which becomes an input text field in the Customizer where its value can now be rendered through your React component. See the full list of available components in the Section Schema API.

Registering your section

The final step to start using your component is to register it in the index.tsx of the /sections folder. This will allow your component to be available in the Customizer.

1. Import your section into /sections/index.tsx.
2. Add it to the registerSections function.
3. Refresh the Customizer.

import { MyFirstSection } from './MyFirstSection';

export function registerSections() {
  registerSection(MyFirstSection, { name: my-first-section' });
}