Featured product widget

The Featured Product Widget showcases a single product with an enlarged image and concise text content, making it visually prominent on your website. On smaller screens, the widget adapts to display a standard product card that spans the full width of its section.

Key Features

Prominent Display Highlights a product with an enlarged image, ideal for drawing attention to specific offerings.
Responsive Design Automatically switches to a full-width product card on smaller screens for an optimized mobile experience.
Customizable Appearance Allows you to override default theme colors and create visually distinctive widgets.
Flexible Linking Enables you to customize the “Read more” button and image links, useful for linking to external or partner sites.

Widget in Action

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 catalog.

Example:

<bilberry-product-featured product-catalog-id="123"></bilberry-product-featured>

Property	Description	Default Value	Required
`product-catalog-id`	The ID of the product catalog to display in the product overview widget.	N/A	Yes
`background-color`	Overrides the default background color from the theme.	Theme default	No
`text-color`	Overrides the default text color from the theme.	Theme default	No
`primary-color`	Overrides the default primary color from the theme.	Theme default	No
`primary-text-color`	Overrides the default primary text color from the theme.	Theme default	No
`accent-color`	Overrides the default accent color from the theme.	Theme default	No
`accent-text-color`	Overrides the default accent text color from the theme.	Theme default	No
`product-catalog-url`	Custom link URL for the “Read more” button and image.	Default link	No
`lazy-load`	Set to `yes` to defer loading the widget content until it is visible in the viewport. Options: `yes`, `no`.	`no`	No

Customizing the Colors

The Featured Product Widget allows individual customization of its colors, enabling you to override the default theme colors. This feature is particularly useful when creating multiple Featured Product Widgets on the same page, ensuring each widget stands out.

Overriding the Product URL

You can customize the link URL of the “Read more” button and the product image. This is helpful for linking back to your site from external or partner websites, allowing the widget to integrate seamlessly into collaborative marketing efforts.

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/WixBilberryProductFeatured.js
- Tag Name: wix-bilberry-product-featured

Tips for Effective Integration

Select a Key Product: Use the widget to feature your most popular or high-value products.
Leverage Customization: Override colors to align with your page’s design or highlight specific products.
Optimize for Mobile: Ensure the widget’s responsive design provides a seamless experience on all devices.
Use External Links Thoughtfully: Customize the product-catalog-url for partner sites or promotional campaigns.

By integrating the Featured Product Widget, you can effectively spotlight individual products, capturing user attention and driving engagement.