Enabling the Customizer Overlay

The customizer overlay is a quick and easy way to focus in on the sections of your storefront. The overlay will highlight the currently selected section.

Enabling the overlay

To enable the overlay in the Customizer simply click the overlay toggle at the bottom right of the customizer.

1. Select Customizer in Pack's admin.
2. Find the overlay toggle at the bottom right of the customizer.
3. Should be able to hover over sections and see the overlay enabled now.

To disable the overlay, simply click the toggle again.

Overlay actions

Once you have clicked on a section, the overlay be highlighted in blue, and the section's form will appear on the left side of the screen.

The section overlay has a couple of quick actions you can take, found on the left side of the overlay:

• Move section up: This will move the section up in the order of sections on the page.
• Move section down: This will move the section down in the order of sections on the page.
• Duplicate section: This will duplicate the section, creating a copy of it.
• Toggle section visibility: This will toggle the visibility of the section, hiding it from the storefront.
• Remove section: This will remove the section from the page.

Customizer Section Field Hotspots

The customizer section field hotspots are a way to quickly access the fields of a section by clicking on the HTML elements that uses the field's value. This can help you quickly navigate to the content you want to edit without having to click through lots of menu.

Enabling the hotspots

The hotspots are enabled when the customizer overlay is enabled. However, to get the hotspots to show up, you need to add the data-pack-field-id attribute to the HTML element that uses the field's value. Here is an example below:

const MySection = (cms) => {
  return {
    <h3 data-pack-field-id={`title.heading`}>{cms.title.heading}</h3>
  }
}

MySection.Schema = {
  label: 'My Section',
  key: 'my-section',
  fields: [
    {
      label: 'Title',
      key: 'title',
      component: 'group',
      fields: [
        {
          label: 'Heading',
          key: 'heading',
          component: 'text',
        }
      ]
    }
  ]
}

Once enabled, you can click on the HTML element that uses the field's value, and the section's form will appear on the left side of the screen with the field focused.

Pack Field ID for array types

If you are using an array type field (group-list, list, blocks, you can use the data-pack-field-id attribute to target a specific field in the array. The data-pack-field-id should be set to the path of the field you are trying to target, with the index of the item in the array. Here is an example below:

const MyTileSection = (cms) => {
  return (
    <div>
      {cms.tiles.map((tile, index) => (
        <div key={index}>
          <p data-pack-field-id={`tiles.${index}.title`}>{tile.title}</p>
          <span data-pack-field-id={`tiles.${index}.subheading`}>
            {tile.subheading}
          </span>
        </div>
      ))}
    </div>
  )
}

MyTileSection.Schema = {
  label: 'My Tile Section',
  key: 'my-tile-section',
  fields: [
    {
      label: 'Tiles',
      key: 'tiles',
      component: 'group-list',
      fields: [
        {
          label: 'Title',
          key: 'title',
          component: 'text',
        },
        {
          label: 'Sub Heading',
          key: 'subheading',
          component: 'text',
        },
      ],
    },
  ],
}