Product Gallery widget

Product Gallery Widget

The Product Gallery Widget showcases all the images from a product’s gallery in a visually appealing carousel. This widget is ideal for highlighting your product’s features through engaging visuals.

Key Features

1. Interactive Image Carousel Displays all images associated with a product in a responsive and interactive carousel.

2. Customizable Layout Configure the number of images visible per screen size and adjust alignment for a seamless design.

3. Enhanced Visual Appeal Provides a dynamic way to showcase your product’s gallery, improving user engagement.

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-gallery product-catalog-id="123"></bilberry-product-gallery>

Widget Properties

Property	Description	Default Value	Required
product-catalog-id	ID of the product catalog whose images 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
num-xs	Number of images to show on small screens (mobile).	1	No
num-sm	Number of images to show on medium screens (tablets).	2	No
num-md	Number of images to show on large screens (desktop).	3	No
num-lg	Number of images to show on extra-large screens (large desktop).	3	No
align	Determines how to handle image alignment if there are fewer images than screen width allows. Options: scale, left, center, right.	scale	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/WixBilberryProductGallery.js
   • Tag Name: wix-bilberry-product-gallery

Tips for Effective Integration

1. Highlight Key Images: Ensure your product gallery contains high-quality images to maximize user interest.
2. Optimize Layout: Configure the num-* properties to display an appropriate number of images for each screen size.
3. Alignment Matters: Use the align property to ensure the gallery layout complements your page design.
4. Test Responsiveness: Verify that the widget adapts correctly to various screen sizes and devices.

By integrating the Product Gallery Widget, you can create a visually engaging experience that highlights your product’s features, encouraging users to explore further and make informed decisions.