Product widget
Product Widget
The Product Widget combines the functionality of the Product Overview Widget and the Product Gallery Widget into a cohesive, predefined layout. This widget provides a comprehensive view of a product by displaying both its gallery and key details.
Key Features
-
Unified Display Integrates both the overview and gallery sections for a product into a single layout.
-
Dynamic Data Integration Automatically fetches product details and gallery images from Bilberry for accuracy and consistency.
-
Customizable Headers Offers extensive text customization for headers to align with your branding.
-
Enhanced User Experience Combines visuals and detailed information for a rich product display.
How to Use
Add the widget to your webpage using the HTML snippet below. Replace the product-catalog-id with the appropriate ID for your product.
Example:
<bilberry-product product-catalog-id="123"></bilberry-product>Widget Properties
| Property | Description | Default Value | Required |
|---|---|---|---|
product-catalog-id | ID of the product catalog to display. | N/A | Yes |
lazy-load | Set to yes to defer loading the widget content until it is visible in the viewport. Options: yes, no. | no | No |
Text Customization Properties
Customize the headers for different sections of the product overview within the widget using the following properties:
| Property | Description | Default Value |
|---|---|---|
about-the-trip-text-customization-key | Text for the “About the Trip” header. | Unset |
additional-info-text-customization-key | Text for the “Additional Info” header. | Unset |
prices-text-customization-key | Text for the “Prices” header. | Unset |
starting-time-text-customization-key | Text for the “Starting Time” header. | Unset |
departure-text-customization-key | Text for the “Departure” header. | Unset |
duration-text-customization-key | Text for the “Duration” header. | Unset |
difficulty-text-customization-key | Text for the “Difficulty” header. | Unset |
age-text-customization-key | Text for the “Age” header. | Unset |
prices-from-text-customization-key | Text for the “Prices From” header. | Unset |
Setting Up on Wix
If you’re using Wix as your website builder, follow these steps to configure the widget:
- Access the Configuration Guide: Refer to the relevant guide in these docs for general widget setup on Wix.
- Use the Following Values:
- Server URL:
https://bilberry-widgets.b-cdn.net/v4/wix-wrappers/WixBilberryProduct.js - Tag Name:
wix-bilberry-product
- Server URL:
Tips for Effective Integration
- Optimize Header Texts: Use the text customization properties to align the headers with your brand’s tone and style.
- Highlight Key Details: Place the widget prominently to ensure users can quickly access essential product information.
- Showcase Visuals: Ensure the product gallery contains high-quality images for maximum impact.
- Combine with Booking Widgets: Pair this widget with Booking Widget to enable seamless product selection and purchase.
By integrating the Product Widget, you can offer users a rich, all-in-one product experience that combines compelling visuals with detailed descriptions.