Product Details widget

Product Details Widget

This widget will allow you to only display a single chunk of information from the parent component Product Overview Widget, effectively breaking the parent component up into smaller pieces. This will give you more flexibility to spread chunks across your website instead of using the more static parent component.

Key Features

1. Small product chunks Showcases single chunks of information from a product.

2. Enhanced User Experience Designed to integrate seamlessly into your website, offering a clean and organized layout.

3. Dynamic Content Automatically fetches and displays product details based on the provided product catalog ID.

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-details product-catalog-id="123" detail="duration"></bilberry-product-details>
<bilberry-product-details product-catalog-id="123" detail="difficulty"></bilberry-product-details>
<bilberry-product-details product-catalog-id="123" detail="age-limit"></bilberry-product-details>
<bilberry-product-details product-catalog-id="123" detail="price-from"></bilberry-product-details>
<bilberry-product-details product-catalog-id="123" detail="icons"></bilberry-product-details>
<bilberry-product-details product-catalog-id="123" detail="prices"></bilberry-product-details>
<bilberry-product-details product-catalog-id="123" detail="start-time"></bilberry-product-details>
<bilberry-product-details product-catalog-id="123" detail="departure"></bilberry-product-details>
<bilberry-product-details product-catalog-id="123" detail="terms"></bilberry-product-details>
<bilberry-product-details product-catalog-id="123" detail="description"></bilberry-product-details>

Widget Properties

Property	Description	Default Value	Required
product-catalog-id	ID of the product catalog to display details for.	N/A	Yes
detail	The name of the chunk you want to display. Available values: description, duration, difficulty, age-limit, price-from, icons, prices, start-time, departure, terms	description	No
text-customization-key	The name of the translation-key to use for descriptive-text in the detail you want to display. Only visible if the detail-chunk has text.	N/A	No
lazy-load	Set to yes to defer loading the widget content until it is visible in the viewport. Options: yes, no.	no	No

Setting Up on Wix

If you’re using Wix as your website builder, follow these steps to configure the widget:

1. Access the Configuration Guide: Refer to the relevant guide in these docs for general widget setup on Wix.
2. Use the Following Values:
   • Server URL: https://bilberry-widgets.b-cdn.net/v4/wix-wrappers/WixBilberryProductDetails.js
   • Tag Name: wix-bilberry-product-details

Tips for Effective Integration

1. Highlight Key Features: Use this widget to showcase unique product features and benefits.
2. Optimize Layout: Ensure the widget is placed in a prominent location for maximum visibility.
3. Test for Accuracy: Verify that the correct product ID is configured to display the intended details.
4. Mobile Optimization: Test the widget on various devices to ensure a seamless user experience.

By integrating the Product Details Widget, you can provide users with a clear and detailed view of your product offerings, encouraging engagement and conversions.