b2c-page-designer

Design Salesforce B2C Commerce Page Designer pages and components.

51|16|Updated Oct 31, 2025
One-click install
npx skills add https://github.com/SalesforceCommerceCloud/b2c-developer-tooling --skill b2c-page-designer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: b2c-page-designer
Source: https://github.com/SalesforceCommerceCloud/b2c-developer-tooling/tree/main/skills/b2c/skills/b2c-page-designer
Command: npx skills add https://github.com/SalesforceCommerceCloud/b2c-developer-tooling --skill b2c-page-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The Page Designer skill helps teams design and manage Page Designer pages and components for Salesforce B2C Commerce, enabling merchants to visually author storefront content and ensure consistent experiences across pages.

Core Features & Use Cases

  • Define Page Types with regions to structure storefront pages.
  • Create reusable Component Types with attribute definitions for modular content.
  • Use region definitions to assemble homepages, product detail pages, and marketing pages with a consistent editorial workflow.

Quick Start

Define at least one Page Type (e.g., homepage.json) in cartridge/experience/pages and a matching Component Type (e.g., banner.json) in cartridge/experience/components, then run your local development environment to preview the editor.

Frequently Asked Questions about b2c-page-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I define page types and component types for Salesforce B2C Commerce Page Designer?

To define page types and component types for Page Designer, create JSON files like homepage.json in cartridge/experience/pages and banner.json in cartridge/experience/components, then configure regions and attributes to meet the schema requirements for storefront content.

What is a region definition in B2C Commerce Page Designer and when do I need it?

A region definition in Page Designer structures storefront pages by assembling component types into editable areas. You need region configurations when building homepages, product detail pages, or marketing pages to ensure a consistent editorial workflow for merchants.

How do I create reusable components with attribute definitions for Page Designer?

To create reusable Page Designer components, define a Component Type JSON file in cartridge/experience/components with attribute groupings for modular content. This allows merchants to visually author and reuse content elements across different storefront pages.

Can I use Page Designer to build a storefront homepage with multiple marketing components?

Yes, you can use Page Designer to build a storefront homepage by defining a Page Type with multiple regions, then assembling marketing component types into those regions to create a visually authored, consistent experience across your B2C Commerce site.

Does the Page Designer schema require meta definitions for every page and component type?

Yes, the Page Designer schema requires meta definitions for every page and component type. These definitions include region configurations and attribute groupings that satisfy the structural requirements for the experience editor to render content correctly.

What's the best way to preview Page Designer pages during local development?

The best way to preview Page Designer pages is to define your page and component JSON files in the experience directories, then run your local B2C Commerce development environment to launch the experience editor and visually inspect the storefront content.