Creating Custom Product Detail Pages

What Are Custom Product Detail Pages?

Custom Product Detail Pages (PDPs) are unique, branded pages you create for individual products in your online store. Instead of using a single, standard template for all products, you can build a dedicated page for specific items. This allows for richer storytelling with tailored content, custom layouts, and enhanced media, all while maintaining your store's overall navigation and structure.

Key Benefits

Using Custom PDPs offers several advantages for your store's performance and management:

• Tailored Storytelling: Craft unique narratives for each product, highlighting specific benefits, use cases, testimonials, or FAQs.
• Brand Consistency: Design pages that perfectly match your brand's visual identity and tone for specific high-value products.
• Automatic Routing: When configured, any click on a product from a main product listing, a featured section, or a direct link will automatically send the customer to its Custom PDP.
• Simple Management: Each product can only be assigned to one Custom PDP at a time. Reassigning a product updates the link automatically.
• Safe Fallback: If you delete a Custom PDP, any products linked to it will automatically revert to using the store's default product detail page.

How to Set Up a Custom Product Detail Page

Follow these steps to create and publish your first Custom PDP.

Prerequisites

• You must have at least one product created and available in your online store.
• You need access to the Site/Store Builder for your specific store location.

Setup Steps

1. Navigate to Sites → Stores, select your store, and click Add New Page.
2. Enable the option for Custom Product Details Page.
3. A modal window will appear. Search for and select the specific product(s) you want to assign to this new custom page.
4. Begin editing your page. When you first create a Custom PDP, it starts as a copy of your store's default product detail page layout. This gives you a foundation with existing sections, product elements (like images, title, price, and add-to-cart button), and styling to modify.
5. Use the editor to build your custom layout. You can add, remove, or rearrange elements. Key components like product media, details, and call-to-action buttons are available to drag and drop.
6. Once your design is complete, click Save and Publish.

Note: The initial copy from the default PDP is a one-time event. Subsequent changes made to the default product page template will not update your existing Custom PDPs.

Assigning and Reassigning Products

Managing which product links to which page is straightforward.

• Initial Assignment: You assign products during the creation of the Custom PDP using the modal window.
• Reassigning Later: To change a product's assigned page, open the Custom PDP in the builder. Select the main product details element or access the page settings. In the settings panel, you can update the linked product.
• Single Association Rule: A product can only be linked to one Custom PDP. Assigning it to a new page will automatically remove it from the previous one.

Customizing the Product Details Element

Within the Product Details element on your custom page, you can adjust the layout for desktop views. These controls help you design how product images and information are displayed together. You can customize settings such as the media width, its position on the page, and the overall media layout.

Frequently Asked Questions

Can one product be on multiple Custom PDPs?

No. A product can only be assigned to one Custom Product Detail Page at a time.

What happens if I delete a Custom PDP?

All products that were linked to that deleted page will automatically fall back to using the store's default product detail page.

Do links from product listings go to the Custom PDP?

Yes. If a product has a Custom PDP assigned, any click from a main product list or a featured section will route the customer to that custom page. If no custom page is assigned, the link goes to the default page.

How do I switch a product to a different Custom PDP?

Open the new Custom PDP you want to use in the builder and assign the product to it using the settings panel. This will automatically remove its association from the old page.