sf-b2b-experience
Build B2B Commerce storefronts using Salesforce Experience Builder (formerly Community Builder).
Before Writing Code
Fetch live docs BEFORE writing code:
Web-search the latest:
- "Salesforce Experience Builder documentation 2026"
- "Salesforce B2B Commerce storefront setup guide 2026"
- "Lightning Web Runtime LWR template 2026"
- "Salesforce Commerce standard components 2026"
- "Experience Builder SEO configuration 2026"
Web-fetch official sources:
developer.salesforce.com/docs/commerce/salesforce-commerce/guide/experience-builder.htmlhelp.salesforce.com/s/articleView?id=sf.b2b_comm_lightning_storefront_setup.htmdeveloper.salesforce.com/docs/platform/lwc/guide/lwr-get-started.html
Verify current LWR template structure, standard component catalog, page types, buyer group configuration, and SEO metadata options.
Conceptual Architecture
LWR vs Aura Comparison
| Feature |
LWR (Modern) |
Aura (Legacy) |
| Performance |
Faster, optimized rendering |
Slower, heavier framework |
| Standards |
Web standards (ES modules, Shadow DOM) |
Proprietary component model |
| Components |
LWC only |
Aura + LWC |
| SEO |
Better server-side rendering |
Limited |
| PWA support |
Progressive Web App capable |
No |
| Future |
Active development |
Maintenance mode |
Always use LWR templates for new B2B Commerce storefronts.
Page Types
| Page Type |
Purpose |
Key Components |
| Home |
Landing page |
Hero banner, featured products, category nav, search |
| Product Detail (PDP) |
Single product view |
Gallery, pricing, inventory, add-to-cart, variations |
| Product List (PLP) |
Category/search results |
Product grid, filters, sorting, pagination, breadcrumbs |
| Cart |
Shopping cart |
Line items, quantities, pricing summary, promo codes |
| Checkout |
Multi-step purchase flow |
Shipping, delivery, payment, review, submit |
| Order Confirmation |
Post-purchase |
Order number, details, shipping, continue shopping |
| Search Results |
Query results |
Product matches, filters, sorting, suggestions |
| Account Management |
Customer self-service |
Order history, addresses, payment methods, profile |
Template and Theme Structure
Theme Configuration
├── Company Settings (logo, favicon)
├── Color Palette (primary, secondary, text, bg)
├── Typography (headings, body, font families)
└── Custom CSS (advanced overrides)
Layout components: Header (logo, nav, search, cart, account), Footer (links, contact, social), Sidebar (filters, category tree), Grid System (responsive columns).
Responsive breakpoints: Desktop (1024px+), Tablet (768-1023px), Mobile (<768px). Component visibility can be configured per device type.
Buyer Groups and Entitlements
Buyer groups are collections of accounts that share product catalog visibility, pricing rules, entitlement policies, and payment terms.
| Concept |
Description |
| Product entitlements |
Which products each buyer group can see |
| Pricing rules |
Group-specific pricing (negotiated, volume, contract) |
| Payment terms |
Net 30, Net 60, credit limits per group |
| Guest browsing |
Limited catalog, list prices only, no checkout (configurable) |
Use cases: VIP customers, regional buyers, partner tiers (Gold/Silver/Bronze), contract-based pricing.
SEO Considerations
| Element |
Configuration |
| Page title |
<title> tag, 50-60 chars, set per page |
| Meta description |
Search snippet, 150-160 chars |
| URL slug |
User-friendly path (no random IDs) |
| Open Graph tags |
Social media sharing metadata |
| Canonical URL |
Prevent duplicate content |
| Structured data |
Schema.org (Product, Breadcrumb, Organization) |
| Sitemap |
Automatic XML generation; submit to Search Console |
Component Visibility Rules
Experience Builder supports conditional component visibility:
- Show/hide components per device type (desktop, tablet, mobile)
- Show/hide based on user authentication state (guest vs logged-in)
- Buyer group-specific component visibility
- Page-level access control (public vs authenticated)
Custom Components in Experience Builder
Custom LWC components are exposed to Experience Builder via js-meta.xml (see sf-b2b-lwc skill for development details):
- Set
isExposed: true and target lightningCommunity__Page / lightningCommunity__Default
- Define configurable properties (String, Integer, Boolean) visible in the builder property panel
- Components appear in the Components panel for drag-and-drop placement
Site Publishing Workflow
| Stage |
Description |
| Draft |
Build pages, add components, configure settings (not visible to visitors) |
| Preview |
Preview as different user types (guest, authenticated, buyer groups) |
| Publish |
One-click publish; changes go live immediately; version history for rollback |
| Activate/Deactivate |
Control site availability; set maintenance page when deactivated |
Best Practices
Component Strategy
- Use standard commerce components first (proven, maintained, optimized)
- Build custom components only for brand-specific or unique functionality
- Compose standard components creatively before building from scratch
User Experience
- Mobile-first design (many B2B buyers browse on mobile)
- Clear checkout flow with progress indication
- Intuitive category navigation and faceted search
- WCAG AA accessibility compliance
B2B Specific
- Respect buyer group entitlements for product visibility and pricing
- Support multi-user accounts (buyer, approver, admin roles)
- Enable bulk ordering (CSV upload, quick order forms)
- Provide reorder functionality from order history
- Display contract/negotiated pricing per account
Testing and Deployment
- Test with multiple buyer groups to verify entitlements and pricing
- Cross-browser testing (Chrome, Firefox, Safari, Edge)
- Build in sandbox, deploy via change sets or Metadata API
- Run Lighthouse and accessibility audits before go-live
Fetch Experience Builder docs, LWR template guide, and B2B Commerce setup documentation for exact page configuration, component catalog, and buyer group setup before implementing.
1---2name: sf-b2b-experience3description: Build B2B Commerce storefronts with Experience Builder — LWR templates, page types (Home, Product, Category, Cart, Checkout), standard and custom components, theme layouts, navigation, SEO configuration, and site publishing. Use when assembling B2B/D2C storefronts.4---56# sf-b2b-experience78Build B2B Commerce storefronts using Salesforce Experience Builder (formerly Community Builder).910## Before Writing Code1112**Fetch live docs BEFORE writing code:**13141. **Web-search** the latest:15 - "Salesforce Experience Builder documentation 2026"16 - "Salesforce B2B Commerce storefront setup guide 2026"17 - "Lightning Web Runtime LWR template 2026"18 - "Salesforce Commerce standard components 2026"19 - "Experience Builder SEO configuration 2026"20212. **Web-fetch** official sources:22 - `developer.salesforce.com/docs/commerce/salesforce-commerce/guide/experience-builder.html`23 - `help.salesforce.com/s/articleView?id=sf.b2b_comm_lightning_storefront_setup.htm`24 - `developer.salesforce.com/docs/platform/lwc/guide/lwr-get-started.html`25263. **Verify** current LWR template structure, standard component catalog, page types, buyer group configuration, and SEO metadata options.2728## Conceptual Architecture2930### LWR vs Aura Comparison3132| Feature | LWR (Modern) | Aura (Legacy) |33|---------|--------------|---------------|34| Performance | Faster, optimized rendering | Slower, heavier framework |35| Standards | Web standards (ES modules, Shadow DOM) | Proprietary component model |36| Components | LWC only | Aura + LWC |37| SEO | Better server-side rendering | Limited |38| PWA support | Progressive Web App capable | No |39| Future | Active development | Maintenance mode |4041Always use **LWR templates** for new B2B Commerce storefronts.4243### Page Types4445| Page Type | Purpose | Key Components |46|-----------|---------|---------------|47| **Home** | Landing page | Hero banner, featured products, category nav, search |48| **Product Detail (PDP)** | Single product view | Gallery, pricing, inventory, add-to-cart, variations |49| **Product List (PLP)** | Category/search results | Product grid, filters, sorting, pagination, breadcrumbs |50| **Cart** | Shopping cart | Line items, quantities, pricing summary, promo codes |51| **Checkout** | Multi-step purchase flow | Shipping, delivery, payment, review, submit |52| **Order Confirmation** | Post-purchase | Order number, details, shipping, continue shopping |53| **Search Results** | Query results | Product matches, filters, sorting, suggestions |54| **Account Management** | Customer self-service | Order history, addresses, payment methods, profile |5556### Template and Theme Structure5758```59Theme Configuration60├── Company Settings (logo, favicon)61├── Color Palette (primary, secondary, text, bg)62├── Typography (headings, body, font families)63└── Custom CSS (advanced overrides)64```6566**Layout components:** Header (logo, nav, search, cart, account), Footer (links, contact, social), Sidebar (filters, category tree), Grid System (responsive columns).6768**Responsive breakpoints:** Desktop (1024px+), Tablet (768-1023px), Mobile (<768px). Component visibility can be configured per device type.6970### Buyer Groups and Entitlements7172**Buyer groups** are collections of accounts that share product catalog visibility, pricing rules, entitlement policies, and payment terms.7374| Concept | Description |75|---------|-------------|76| **Product entitlements** | Which products each buyer group can see |77| **Pricing rules** | Group-specific pricing (negotiated, volume, contract) |78| **Payment terms** | Net 30, Net 60, credit limits per group |79| **Guest browsing** | Limited catalog, list prices only, no checkout (configurable) |8081Use cases: VIP customers, regional buyers, partner tiers (Gold/Silver/Bronze), contract-based pricing.8283### SEO Considerations8485| Element | Configuration |86|---------|--------------|87| Page title | `<title>` tag, 50-60 chars, set per page |88| Meta description | Search snippet, 150-160 chars |89| URL slug | User-friendly path (no random IDs) |90| Open Graph tags | Social media sharing metadata |91| Canonical URL | Prevent duplicate content |92| Structured data | Schema.org (Product, Breadcrumb, Organization) |93| Sitemap | Automatic XML generation; submit to Search Console |9495### Component Visibility Rules9697Experience Builder supports conditional component visibility:98- Show/hide components per device type (desktop, tablet, mobile)99- Show/hide based on user authentication state (guest vs logged-in)100- Buyer group-specific component visibility101- Page-level access control (public vs authenticated)102103### Custom Components in Experience Builder104105Custom LWC components are exposed to Experience Builder via `js-meta.xml` (see `sf-b2b-lwc` skill for development details):106- Set `isExposed: true` and target `lightningCommunity__Page` / `lightningCommunity__Default`107- Define configurable properties (String, Integer, Boolean) visible in the builder property panel108- Components appear in the Components panel for drag-and-drop placement109110### Site Publishing Workflow111112| Stage | Description |113|-------|-------------|114| **Draft** | Build pages, add components, configure settings (not visible to visitors) |115| **Preview** | Preview as different user types (guest, authenticated, buyer groups) |116| **Publish** | One-click publish; changes go live immediately; version history for rollback |117| **Activate/Deactivate** | Control site availability; set maintenance page when deactivated |118119## Best Practices120121### Component Strategy122- Use standard commerce components first (proven, maintained, optimized)123- Build custom components only for brand-specific or unique functionality124- Compose standard components creatively before building from scratch125126### User Experience127- Mobile-first design (many B2B buyers browse on mobile)128- Clear checkout flow with progress indication129- Intuitive category navigation and faceted search130- WCAG AA accessibility compliance131132### B2B Specific133- Respect buyer group entitlements for product visibility and pricing134- Support multi-user accounts (buyer, approver, admin roles)135- Enable bulk ordering (CSV upload, quick order forms)136- Provide reorder functionality from order history137- Display contract/negotiated pricing per account138139### Testing and Deployment140- Test with multiple buyer groups to verify entitlements and pricing141- Cross-browser testing (Chrome, Firefox, Safari, Edge)142- Build in sandbox, deploy via change sets or Metadata API143- Run Lighthouse and accessibility audits before go-live144145Fetch Experience Builder docs, LWR template guide, and B2B Commerce setup documentation for exact page configuration, component catalog, and buyer group setup before implementing.
OrcaQubits