Customizing Your Product Detail Page Layout

The Product Detail Page can be built using separate elements for each piece of product content. You can place product images, title, reviews, price, variants, quantity, Add to Cart, Buy Now, description, related products, and more wherever works best for your layout.

For example, you might move the title above the product image, bring reviews higher up the page, or display product details side by side. Each element also has its own settings for typography, colors, spacing, alignment, backgrounds, borders, corner radius, shadows, and device visibility.

Existing stores can continue using the classic Product Detail layout until you're ready to switch. When you do upgrade, Captivation Hub carries over your existing styling where supported.

Switch an Existing Store to the New Layout

Important: The upgrade is one-way. Once you switch, you cannot revert using the upgrade control. If needed, you can restore an older version of the page using Version History.

1. Open your store's Product Details Page in the builder.
2. Select the Product Detail element.
3. In the right panel, click Switch to new layout.

Custom CSS classes from the classic layout are not carried over during the upgrade. You can add custom classes to the individual elements after switching.

Update a Saved Store Template

If you want new stores created from a saved template to use the new layout, start by upgrading the Product Details Page in the store the template was originally created from.

After upgrading that page, refresh the saved template from the template library so it includes the updated layout. New stores created from the refreshed template will then use the new Product Details Page layout. Existing stores created from that template are not updated automatically and must be upgraded individually.