Manage Content for Site-Wide Regions in Storefront Next with Content Blocks (Beta)

Manage content for headers and announcement banners consistently across your entire storefront by creating content blocks in site-wide regions. Instead of recreating content that appears across your entire storefront for each individual page, create the content once and apply it everywhere. Maintain brand consistency and save time when updating promotional messages or navigation elements that appear site-wide. Preview your changes directly from Page Designer without switching user interfaces.

Site-Wide Regions for Content Blocks is a pilot or beta service that is subject to the Beta Services Terms at Agreements - Salesforce.com or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the Product Terms Directory. Use of this pilot or beta service is at the Customer’s sole discretion.

Site-Wide Regions for Content Blocks isn’t available for SFRA and PWA Kit storefronts. Also, with this feature, the workaround for migrating content slots from SFRA as documented in Migrate Content Slots from SFRA to Storefront Next is no longer needed.

To enable the site-wide regions for content blocks beta feature, first turn on a feature switch. Next, update the Storefront Next template to include new fields, and generate and deploy the cartridge containing the Page Designer metadata to your B2C Commerce instance.

  1. In Business Manager, click App Launcher, and then select Administration > Feature Switches.
  2. Under Enable Content Blocks, click Enable Embedded Content Blocks.

The Site-Wide Regions for Content Blocks feature requires Storefront Next template v1.1 or later, which include new fields that this feature uses. If you built your storefront with v1.1 or later of the template, your storefront contains the new fields. Otherwise, add the new fields manually.

The new fields are:

  • embedded: This field indicates whether the header component can contain a content block.
  • component_id: This field identifies the header and is required for calling the getComponent B2C Commerce API (SCAPI) call to get the content block from the header of a page that’s not in Page Designer—a page that’s not a product detail or listing, about us, or home page. The get Component API endpoint is: GET /experience/shopper-experience/v1/organizations/{organizationId}/components/{componentId}. See Shopper Experience endpoints.
  • @RegionDefinition([{ id: 'announcement', name: 'Announcement' }]): This decorator enables the addition of a content block inside the announcement banner.

If you built with a version prior to v1.1 of Storefront Next template, add the new fields manually to the storefront.

  1. In /src/components/header/index.tsx, add the embedded and component_id field to the header component. Also, add the @RegionDefinition decorator below the header component, as follows.

  2. After you add the new fields, generate the cartridge for the Page Designer metadata. See Generate Cartridges.

  3. Deploy the cartridge to your B2C Commerce instance. See Deploy Cartridges.

Add a content block in site-wide regions on a temporary page that won’t be published. The site-wide regions available for the beta are the header and the announcement banner. To create a content block and assign it to a site-wide region:

  1. In Business Manager, click App Launcher and then select Merchant Tools > Your Site > Content > Page Designer.
  2. Create a temporary page to try out this beta feature and access content blocks on a visual canvas. Don’t publish this page.
  3. Drag and drop the announcement banner component to the page. Based on the component type, you see which site-wide regions are available for assignment.
  4. Author the content, and save as a content block.
  5. In the component’s settings, click Set Site-Wide Region to assign the content block to a site-wide region, such as a header or announcement banner.

This example shows a content block for an announcement banner. It contains the Set Site-Wide Region button that provides the site-wide region locations where to place the content block.

Content block contains the Set Site-Wide Region button that places it in a site-wide region

The Set Site-Wide Region button opens a popup that contains the regions to select for this component.

The Set Site-Wide Region button opens a popup that contains the regions to select for this component

The announcement banner component is now added in the header for all pages.

The announcement banner component is now added in the header for all pages