Product Details Page Template for Astro

This template combines the ProductDetails and Reviews components to create a visually compelling, content-rich page for your products. See the free product page template for a simpler layout. This layout adds the following additional functionalities:

Key Features

• Breadcrumbs: Easily create breadcrumbs for clear navigation using the breadcrumbs prop that accepts a Breadcrumb component configuration.
• StickyCTA: Configure a sticky CTA that appears after the first CTA leaves the viewport. It gets automatically configured with data from the page, but you can also use the stickyCta prop to configure it yourself.
• Pricing: Provide pricing and pricing details to your user using the ProductDetails component.
• Reviews: Showcase and summarize customer reviews and testimonies to help users make the right purchasing decisions.
• Recommendations: Add a list of recommended products at the end of your page using the recommended prop.

Inside the template, you’re free to add any HTML or component.

Easy to Setup

---
import ProductDetailsPage from '@templates/ProductDetailsPage.astro'

const layout = {
    seo: { ... } // Your SEO configuration
    menu: { ... } // Menu configuration
    footer: { ... } // Footer configuration
}
---

<ProductDetailsPage
    layout={layout}
    reviewSection={{ ... }} {/* Customer reviews */}
    breadcrumbs={{ ... }} {/* Breadcrumb configuration */}
    recommended={{ ... }} {/* Recommended items */}
    details={{ ... }} {/* ProductDetails props */}
    stickyCta={{ ... }} {/* Sticky CTA configuration */}
    showStickyCta={true}
>
    <span>Your main content</span>
</ProductDetailsPage>

For a detailed data structure, please see the example template in our GitHub repository.

Documentation

We've collected the following documentations for you that can help you get the most out of this template: