Set Up a Product Display Page (PDP) Layout

Because the PDP layout uses the Layout Editor, the same basic rules for rows and cells apply. There are 2 new dropdown menus in the toolbar that allow you to add PDP components to the layout. Select a cell then click one of the options from the new dropdown menus. The new components should be familiar if you have used PDP V1.

• Image
• Title
• Description
• Font Options
• Configure Field

The product fields correspond to the fields that get imported from product feed. In the field mappings screen these are the target fields on the right hand side of the screen. Any cell that contains a product field can have cell settings that apply styles like font and alignment.

Tip To display 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 is different from "Quantity Item on Hand," as it refers to the physical quantity of items at that location. The On Hand items are counted regardless of their status (for example, promised to a customer, available for sale, being transferred to another store, and so on).

Component	Description
Add On SKU	Allows customers to add complementary or additional items to their purchase, often displayed as optional add-ons.
Barcode Generator	Generates a unique barcode for the product, useful for inventory management and tracking.
Bundle Amount	Displays the total amount for a product bundle, helping customers understand the cost savings.
Bundle Item Confirm	Shows a confirmation prompt to ensure customers are aware of the items included in a bundle before finalizing their purchase.
Clearance	Highlights products that are on sale or clearance, often with special pricing or discounts.
Images	Displays high-quality images of the product from various angles, helping customers visualize the item.
Like Count	Shows the number of times the product has been liked or favorited by other customers.
Price	Displays the current price of the product, including any discounts or special offers.
Product Recommendations	Suggests related or complementary products that customers might be interested in, enhancing the shopping experience.
Product Set	Groups related products together, often sold as a set, to encourage bulk purchases.
Promotions	Displays any active promotions or special offers for the product, such as buy-one-get-one-free deals.
Quantity	Allows customers to select the quantity of the product they wish to purchase. Note The presence of a quantity picker on the PDP changes how items are added to the cart. With Quantity Picker: When "Add to Cart" is tapped, it replaces the current product in the cart with the selected quantity. Without Quantity Picker: When "Add to Cart" is tapped, if the "Treat Each Item As Separate Line Item (treatEachItemInCartAsSeparateLineItem)" flag is enabled, it adds a new row to the cart. If the flag is disabled, it increments the quantity of the existing item in the cart.
Ratings Summary	Provides a quick overview of the product’s average rating and the number of reviews.
Reviews	Displays detailed customer reviews and ratings, helping potential buyers make informed decisions.
Variants	Allows customers to choose different variations of the product, such as color, size, or style. Tip If the size or color labels don’t appear on the PDP, make sure that Hide the Selected Size Value and Hide the Selected Color Value are disabled. Note The Gray Out Unavailable Swatches setting only applies to variant combinations that don’t exist. This setting doesn’t reflect inventory availability, because inventory data isn’t overlaid on variants.
Wishlist	Enables customers to save products to their wishlist for future consideration or purchase.

Product elements are widgets that can be dropped on any cell in the layout.

Tip Double-click any PDP component to edit it.

Tip One can add videos on the images carousel if they map their product feeds to additional_image_link

For app builds 8.10.1 and above, you can configure multiple bar codes using the Barcode Generator. This change is backward-compatible so that ‌store associates won't have to re-set their existing barcodes.

Note For apps below 8.10.1, only the first barcode configured will be rendered.

Some PDP components like the product description have a dynamic height that is not controlled in the CMS. When a row contains a component with dynamic height, the row resize functionality is disabled.

On the PDP, items can be added to the cart by using the "Add to Cart" CTA. This functionality comes preconfigured on all PDP layouts, whether they are created from a template or built from scratch.

If you wish to personalize the text, you can do so by clicking the pencil icon located to the right of the CTA. This customization allows you to adjust the text for online items, in-store items, and bundled products.

Note When scanning multiple quantities of a product and then adding it from the PDP to the cart, the quantity picker will reset. This means the previously selected quantity will be cleared, and the user will need to adjust it again.

Various settings for your PDP layouts can be set in the Advanced Tab of the layout editor toolbar.

Enable Bundle Selection As Default - When this setting is enabled and your layout contains a Bundle Item Confirm product element, the default state of that element will be selected (that is, on)

Skip EPC Scan For Instore Items - By default, this flag will always be disabled. When this setting is disabled, the EPC scan will be prompted when special items are added with a fulfillment type as "In Store". However, when enabled, even though an item is added with a fulfillment type as "In Store", it will not prompt the EPC scan.

As the POS app doesn't store product images locally for offline use, default images are used instead to display products on the PDP. The images shown will be the same as the receipt logo, which can be configured in your app config settings.

After creating the layout, assign it to an app config.

After saving changes to the app config or PDP Layout, the changes are visible after relaunching the app. To test changes without affecting production, use a test app config that is linked to a test PDP Layout.