Product Page - Review Widget Example

Customer Reviews

🔧 Integration Instructions

To integrate this review system into your Shopify product page, follow these steps:

Step 1: Add the widget container to your product template

<!-- Add this to your product.liquid template -->
<div id="shopify-reviews" 
     data-api-url="https://your-domain.com/api" 
     data-api-key="YOUR_STORE_API_KEY" 
     data-product-id="{{ product.id }}">
</div>
                

Step 2: Include the CSS and JavaScript files

<!-- Add to the <head> section -->
<link rel="stylesheet" href="https://your-domain.com/widget/review-widget.css">

<!-- Add before closing </body> tag -->
<script src="https://your-domain.com/widget/review-widget.js"></script>
                

Step 3: Configure your API settings

Replace your-domain.com with your actual domain and YOUR_STORE_API_KEY with the API key from your admin panel.

📝 Review Widget Will Load Here

Once you configure the API settings and upload the files to your server, the interactive review widget will appear in this location.

Widget Features:

✅ Customer review submission form
✅ Display of approved reviews
✅ Star ratings and review statistics
✅ Pagination for multiple reviews
✅ Responsive design for mobile devices
✅ Real-time form validation

Note: This is a demonstration page. The actual widget requires server setup and configuration.

🚀 Advanced Integration Options

Manual Widget Initialization

For more control over the widget behavior, you can initialize it manually:

<script>
// Manual initialization with custom options
const reviewWidget = new ShopifyReviewWidget({
    container: '#shopify-reviews',
    apiUrl: 'https://your-domain.com/api',
    apiKey: 'YOUR_STORE_API_KEY',
    productId: '{{ product.id }}',
    
    // Customization options
    showForm: true,
    showStats: true,
    reviewsPerPage: 5,
    theme: 'light',
    
    // Custom labels
    labels: {
        submitButton: 'Submit My Review',
        nameLabel: 'Your Name',
        emailLabel: 'Email Address'
    }
});
</script>
            

Multiple Widgets on Same Page

You can have multiple review widgets for different products:

<!-- Widget for Product A -->
<div class="reviews-widget" 
     data-api-url="https://your-domain.com/api" 
     data-api-key="YOUR_API_KEY" 
     data-product-id="{{ product_a.id }}">
</div>

<!-- Widget for Product B -->
<div class="reviews-widget" 
     data-api-url="https://your-domain.com/api" 
     data-api-key="YOUR_API_KEY" 
     data-product-id="{{ product_b.id }}">
</div>
            

Custom Styling

Override the default styles to match your theme:

<style>
/* Custom review widget styles */
.shopify-reviews-widget {
    font-family: 'Your Theme Font';
}

.review-item {
    border: 1px solid #your-brand-color;
    border-radius: 10px;
}

.submit-review-btn {
    background: #your-brand-color;
}
</style>
            

Sample Product Name