---
schema_version: "1"
id: 9707d9a6d1726bd89c713b948cf662c98b4cdd6cfe647647393574569be5d0e8
title: Page Designer Content Management for Merchants
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/sfnext/guides/sfnext-page-designer-customize-sf.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-page-designer-customize-sf.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: b2966b1becae69210a461af78e8984652f7fe5c48815f3a45e110448794228fd
products:
  - Composable Storefront
  - Salesforce APIs
---
# Page Designer Content Management for Merchants

Page Designer contains Storefront Next template pages that merchants can add and customize out of the box with new content and components. Merchants can connect Page Designer to a site's storefront, and then customize the storefront and publish live updates.

Storefront Next provides a Home Page, About Us Page, Product Detail Page (PDP), and Product Listing Page (PLP). These pages include layout components and other content components. After an administrator has set up the storefront in Business Manager, merchants select the site associated with the storefront to access and customize its pages in Page Designer.

**note:** There can be a delay between when you make changes in Page Designer in staging and when those changes appear in the storefront in production. See [Page Designer Change Deployment to Storefront Next](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-mrt-data-store.md#page-designer-change-deployment-to-storefront-next).

## Before You Begin

Create a storefront in Business Manager. See [Quick Start: Create Storefront Next](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-quick-start-choice.md). For existing storefronts created outside of Business Manager via the CLI or the MRT API, link them to Business Manager. See [Link an Existing Storefront to B2C Commerce](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-link-storefront.md).

## Customize the Storefront in Page Designer

To customize your storefront in Page Designer:

1. In Business Manager, click App Launcher ![App Launcher](https://developer.salesforce.com/docs/media/sfnext/shared/appLauncher.png) and then select **Merchant Tools**, select a site, then click **Content > Page Designer**.
   The selected site maps Page Designer to your storefront because each site can have only one storefront.

![Page Designer shows Storefront Next pages](https://developer.salesforce.com/docs/media/sfnext/sfnext-pd-page.png '{"class": "image-lg"}')

2. In Page Designer, click one of the listed pages to customize it.
3. To add a page, click **New** and select a page to add.
4. To add components, drag a component from the Components panel and set component properties.

![Page Designer shows Storefront Next pages](https://developer.salesforce.com/docs/media/sfnext/sfnext-pd-components.png '{"class": "image-lg"}')g

5. To preview the changes, click **Preview**, and then select the desired locale, device sizes, and resolution.
6. To publish the changes to the live site, click **Publish**.

## Target Campaigns and Promotions

See how the storefront looks when specific campaigns and promotions are applied.

### Prerequisites

- Make sure that shopper context is enabled. For storefronts created in Business Manager, shopper context is enabled. For other storefronts, enable shopper context. In Business Manager, select **Administration > Global Preferences > Feature Switches**, and select **Enable Shopper Context**. For more information, see [Shopper Context](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-shopper-context.md).
- (Optional) To target a customer group, enable the `effectiveDateTime`, `customerGroupIds`, `clientIp`, and `geoLocation` qualifiers in the [Shopper Context API](https://developer.salesforce.com/docs/commerce/commerce-api/references/shopper-context?meta=type%3AShopperContext). See [Qualifier Support](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/sfnext-shopper-context.md#qualifier-support) in the Shopper Context documentation.
- (Optional) To target campaigns and promotions, set up your site based on the functionality you want to validate in Storefront Preview. Examples:
  - Set up [custom qualifiers](https://help.salesforce.com/s/articleView?id=cc.b2c_using_session_custom_attributes.htm&type=5) and [customer group IDs](https://help.salesforce.com/s/articleView?id=cc.b2c_creating_a_customer_group.htm&type=5) using customer groups in Business Manager to apply rules for personalized pricing, products, or promotions.
  - To see a personalized shopper experience, set up source code that calls the [Shopper Context endpoints](https://developer.salesforce.com/docs/commerce/commerce-api/guide/shopper-context-api.html). This is required because Storefront Preview uses context information for personalization.
  - Set up the pricing that you want to offer on a particular date. That way your specified pricing appears when you select that date in Storefront Preview. See [Personalized Promotions, Shipping, and Payment Methods](https://developer.salesforce.com/docs/commerce/commerce-api/guide/shopper-context-api-personalized.html).

### Steps

1. In Page Designer, open a page, and then select a component.
   The properties panel appears.
2. In the properties panel, click **Settings**.
3. To apply a campaign, click **Add to Campaign** and select a preconfigured campaign.
4. To apply a promotion, click **Add to Promotion** and select a preconfigured promotion.
5. To apply custom targeting, click **Custom Targeting** and fill out the fields. This option requires that you set up a customer group. See the [Prerequisites](#prerequisites) section.

![Page Designer shows targeting options for campaigns and promotions](https://developer.salesforce.com/docs/media/sfnext/sfnext-pd-targeting.png '{"class": "image-lg"}')

## Locale Fallback

Locale fallback for Page Designer content follows the storefront's locale fallback chain. Typically: requested locale → parent locale → site default). The manifest carries content for every site locale, and the storefront picks the right one by using its own locale configuration. Verify that your storefront's locale settings produce the desired fallback path.