---
schema_version: "1"
id: 0e6c757ec69736ca54ad13b0b484eec8388d9c8a72077ab2d5c3c51383e75c79
title: Configure Product Display Page (PDP) Layout in Point of Sale CMS
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/commerce/264-0-0/rt_cms_layouts_templates_pdp.md
canonical_url: https://help.salesforce.com/s/articleView?id=commerce.rt_cms_layouts_templates_pdp.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 1895122ad651935fcc6ebdc018fc7a8c25b45ad74fe52408031183f7cada8efa
description: Create a Product Display Page (PDP) in the layout editor. Unlike the template-based PDP V1, this version lets you customize the page layout.
products:
  - Commerce
release: "264"
---
# Configure Product Display Page (PDP) Layout in Point of Sale CMS

Create a Product Display Page (PDP) in the layout editor. Unlike the template-based PDP V1, this version lets you customize the page layout.

- Point of Sale App Build: 5.0.0 or later
- Platform Support: iPhone, iPad
- Offline Support: Yes
- Technical Prerequisites: Configured product feed

## Create a PDP Layout From a Template

1. Go to **Layouts** | **Layout Templates** | **PDP**
2. Click **Add From Template**.

## Create a PDP Layout From Scratch

1. Go to **Layouts** | **Layout Templates** | **PDP**
2. Click **Add Blank Layout**.

The PDP layout uses the Layout Editor, so the same rules for rows and cells apply. Two dropdown menus in the toolbar let you add PDP components. Select a cell, then click an option from a dropdown menu.

## Product Fields

- Image
- Title
- Description
- Font Options
- Configure Field

Product fields correspond to the fields imported from the product feed. Any cell that contains a product field can have cell settings that apply styles like font and alignment.

![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_tip.png)

Tip To show the store's current inventory on the PDP, use the product attribute "Sellable Quantity" under Configure Field. Sellable Quantity represents the quantity of an item available for sale to a customer. This quantity differs from "Quantity Item on Hand," which refers to the physical quantity of items at that location. The app counts On Hand items regardless of their status.

## PDP Components

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
          <colgroup>
            <col>
            <col>
          </colgroup>
          <thead class="slds-text-title_caps ">
            <tr class="">
              <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d18804e186">Component</th>
              <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d18804e189">Description</th>
            </tr>
          </thead>
          <tbody>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Add On SKU</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">Lets customers add complementary items to their purchase as optional add-ons.</td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Barcode Generator</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">Generates a unique barcode for the product for inventory tracking.</td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Bundle Amount</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">Shows the total amount and cost savings for a product bundle.</td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Bundle Item Confirm</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">Prompts customers to confirm the items included in a bundle before purchase.</td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Clearance</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">Highlights products on sale or clearance.</td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Images</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">Shows product images from multiple angles.</td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Like Count</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">Shows how many customers liked the product.</td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Price</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">Shows the product's current price, including any discounts.</td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Product Recommendations</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">Suggests related or complementary products.</td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Product Set</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">Groups related products sold together as a set.</td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Promotions</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">Shows active promotions for the product, such as buy-one-get-one-free deals.</td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Quantity</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">
                <p>Select the product quantity to purchase in the cart page.</p>
                <p>Whether the PDP has a
                  quantity picker changes how the system adds items to the cart:</p>
                <ul>
                  <li>With a quantity picker, the <strong class="uicontrol">Add to Cart</strong> button sets the cart
                    quantity to the amount selected. Because the quantity is absolute, tapping the button
                    again with the same amount doesn't add more. To add more, raise the picker to the total
                    that you want and tap the button, or edit the quantity in the cart.</li>

                  <li>Without a quantity picker, the button adds a new cart row if the "Treat Each Item As
                    Separate Line Item (treatEachItemInCartAsSeparateLineItem)" flag is on, or increases the
                    existing item's quantity if it's off.</li>

                </ul>
              </td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Ratings Summary</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">Shows the product’s average rating and number of reviews.</td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Reviews</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">Shows customer reviews and ratings.</td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Variants</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">
                <p>Choose product variations, such as color, size, or style. </p>
                <div class="slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium">
                  <div class="slds-media slds-media_responsive">
                    <div class="slds-media__figure"><span class="slds-icon_container slds-icon_container_circle slds-icon-note-tip"><img style="margin-bottom:0;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_tip.png" alt="Tip"></span></div>
                    <div class="slds-media__body" style="padding-top:.5rem;padding-bottom:.5rem;"><span class="slds-text-title_caps">Tip</span> If the
                      size or color labels don’t appear on the PDP, make sure that <strong class="uicontrol">Hide the Selected
                        Size Value</strong> and <strong class="uicontrol">Hide the Selected Color Value</strong> are
                      off.</div>
                  </div>
                </div>
                <div class="slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium">
                  <div class="slds-media slds-media_responsive">
                    <div class="slds-media__figure"><span class="slds-icon_container slds-icon_container_circle slds-icon-note-note"><img style="margin-bottom:0;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_note.png" alt="Note"></span></div>
                    <div class="slds-media__body" style="padding-top:.5rem;padding-bottom:.5rem;"><span class="slds-text-title_caps">Note</span> The <strong class="uicontrol">Gray Out Unavailable Swatches</strong> setting applies only to
                      variant combinations that don’t exist. This setting doesn’t reflect inventory availability
                      because the system doesn’t overlay inventory data on variants.</div>
                  </div>
                </div>
              </td>

            </tr>
            <tr class="">
              <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e186 ">Wishlist</td>

              <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d18804e189 ">Lets customers save products to their wishlist.</td>

            </tr>
          </tbody>
        </table>

Product elements are widgets that you can drop on any cell in the layout.

![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_tip.png)

Tip Double-click any PDP component to edit it.

![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_tip.png)

Tip You can add videos to the images carousel if you map your product feeds to additional\_image\_link.

## Barcode Generator

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_note.png)

Note For apps earlier than 8.10.1, the system renders only the first barcode you configure.

## Components with Dynamic Height

Some PDP components like the product description have a dynamic height that you can't control in the CMS. When a row contains a component with dynamic height, the system disables the row resize functionality.

## Add to Cart CTA

On the PDP, add items to the cart with the "Add to Cart" CTA. It's preconfigured on all PDP layouts, whether you create them from a template or from scratch.

To customize the text, click the pencil icon to the right of the CTA. You can set separate text for online items, in-store items, and bundled products.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_note.png)

Note When you scan multiple quantities of a product and then add it to the cart from the PDP, the quantity picker resets. Select the quantity again.

## Configure the Price Check Button

Use the Price Check button to let store associates view promotional pricing on the PDP without adding items to the cart.

1. In CMS, go to **Layouts** | **Layout Templates**.
2. Edit a PDP layout.
3. Select a cell in your layout where you want the Price Check button to appear.
4. In the toolbar, go to **Cell Content** | **Form Element** | **Button**.
5. Configure the Price Check button action to show promotional pricing for all variants.
6. Save your changes.

Store associates can tap the Price Check button on the PDP to view the discounted price for any product variant without adding it to the cart.

## PDP Settings

Set PDP layout options in the Advanced tab of the layout editor toolbar.

Enable Bundle Selection As Default - When you turn on this setting and your layout contains a Bundle Item Confirm product element, the system selects the default state of that element (that is, on).

Skip EPC Scan For Instore Items - By default, this flag off. The system prompts the EPC scan when you add special items with a fulfillment type of "In Store." When enabled, the system doesn't prompt the EPC scan even when you add an item with a fulfillment type of "In Store."

## Offline Images

The POS app doesn't store product images locally for [offline](https://help.salesforce.com/s/articleView?id=commerce.rt_cms_store_settings_pos_offline_support.htm&release=264.0.0&type=5 "Continue operating the POS app if the device isn't connected to WiFi or Ethernet, or your internet service is down. Sync the POS app data after you're back online.") use, so the system uses default images to show products on the PDP. The system shows the same images as the receipt logo, which you can configure in your app config settings.

1. In CMS, go to **Apps** and edit an app config.
2. Go to **Modules** | **POS** | **Receipt**.
3. Click **Edit Receipt Configuration**.
4. Under **Logo**, upload a default image.

## Assign a PDP Layout to an App Config

After you create the layout, assign it to an app config.

1. In CMS, go to **App Config** | **Advanced** | **PDP Layouts** | **PDP Layout**.
2. Select the layout.
3. Save your changes.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-commerce-retail-264-0-0-production-enus/17d647fb-8988-49fb-9add-c4f4cc79c9e4/images/icon_note.png)

Note After you assign a PDP Layout to the app config, the system overrides PDP V1.

## Test the Layout

After you save changes to the app config or PDP Layout, the changes become visible when you relaunch the app. To test changes without affecting production, use a test app config that links to a test PDP Layout.

1. Save the app config or PDP Layout.
2. Relaunch the app.
3. Go to a product's PDP.

## Known Issues & Restrictions

- Accordion components support only one field configuration. If you configure multiple fields, the accordion becomes non-functional in the POS app and can't expand.