Migrate Content Slots from SFRA to Storefront Next

In Storefront Next, React components replace ISML templates. If you’re migrating from Salesforce Storefront Reference Architecture (SFRA) and rely on content slots, use this workaround until the planned Embedded Content feature becomes available.

This workaround lets you manage reusable HTML content, such as shipping policies, disclaimers, or promotional blocks, in Page Designer and embed it across your storefront. It provides:

• A “Content Slot Page” page type with a single content region.
• A “Markup Content” component type with a markup attribute for HTML.
• A React component that renders the markup using the HtmlFragment component.

Create the markup content in src/components/markup-content/index.tsx.

Create the content slot page. Add the contentSlotPage.json file in cartridges/app_storefrontnext_base/cartridge/experience/pages/ and add this content.

Content slot pages need a preview route to be editable in Page Designer’s design mode. Create the _app.content-slot.tsx file in src/routes/_app.content-slot.tsx and add this content.

Use these commands to generate and deploy the metadata.

1. Create a content slot page in Merchant Tools > Content > Page Designer > New Page.
2. Select Content Slot Page as the page type.
3. Add Markup Content components to the “content” region.
4. Configure markup by entering HTML directly or by using data binding to bind to Content Assets.
5. Assign a page ID (for example, shipping-policy or legal-disclaimer). You reference this ID when fetching the page.

You can populate content in two ways.

Enter HTML directly in the Markup field of a Markup Content component. This approach is best for content that is specific to your Storefront Next storefront.

Bind the Markup field to a content asset’s HTML attribute. This approach is best for content that must be shared across multiple storefront technologies (SFRA and Storefront Next). Content assets are platform-agnostic, so you can update content once and have it reflected across all storefronts.

Use fetchPageWithComponentData and the Region component to load and render content slot page data anywhere in your storefront.

Content updates in Business Manager are reflected immediately without code changes.

• No dedicated APIs for content slot management—uses the same fetchPageWithComponentData as regular pages.
• No caching or CDN strategies specific to embedded content.
• Merchants must navigate to Page Designer to edit content—no inline editing where it’s embedded.
• You must create a “page” in Business Manager for content that isn’t actually a full page.

When the “Embedded Content” feature ships, migrate your content slot pages to the new system and update component references to the new API.

• @Component decorator with id, name, group, description
• @AttributeDefinition for each configurable prop
• @RegionDefinition if component contains nested regions
• export function fallback() - lightweight loading state
• export default - main component
• export const loader - if data loading needed

• @PageType decorator with name, description, supportedAspectTypes
• @RegionDefinition for each region in the page
• export class [Name]Metadata {} - metadata class
• <Region> components with matching regionId