Value card product cards widget

Value Card Product Cards Widget

The Value Card Product Cards Widget displays a list of cards, each representing a value card product type, such as “Membership,” “Punch card,” etc. This widget provides a visually engaging way to showcase value card options.

To link the cards to specific product pages, you must provide a corresponding list of URLs and images for each type ID you specify.

Key Features

1. Flexible Layout Options Configure the list to scroll or wrap based on available viewport space.

2. Customizable Display Set the number of cards displayed per row for various screen sizes.

3. Dynamic Linking Easily connect value card types to detailed product pages with URLs and images.

How to Use

Add the widget to your webpage using the HTML snippet below. Replace the attributes with the appropriate values for your setup.

Example Usage:

<bilberry-value-card-product-cards
    value-card-type-ids="1,2"
    value-card-type-urls="https://test.com,https://test2.com"
    value-card-type-image-urls="https://test.com/image,https://test2.com/image"
></bilberry-value-card-product-cards>

Widget Properties

Property	Description	Default Value	Required
value-card-type-ids	Comma-separated list of value card type IDs found in Bilberry.	N/A	Yes
value-card-type-urls	Comma-separated list of URLs to the “Product Detail” page for each value card.	N/A	Yes
value-card-type-image-urls	Comma-separated list of image URLs for each value card.	N/A	Yes
scroll	Determines if cards scroll (yes) or wrap (no).	no	No
lazy-load	Set to yes to defer loading the widget content until it is visible in the viewport. Options: yes, no.	no	No
orientation	Orientation of the product cards. Options: portrait or landscape.	portrait	No
num-xs	Number of cards visible per row on extra small screens (mobile).	1	No
num-sm	Number of cards visible per row on small screens (tablets).	2	No
num-md	Number of cards visible per row on medium screens (small desktop screens).	2	No
num-lg	Number of cards visible per row on large screens (large desktop screens).	3	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/WixBilberryValueCardProductCards.js
   • Tag Name: wix-bilberry-value-card-product-cards

Tips for Effective Integration

1. Highlight Value Cards: Use this widget to prominently showcase available memberships or punch cards.
2. Enhance User Navigation: Provide clear links and images for each value card to improve user understanding.
3. Optimize for Mobile: Adjust the number of cards per row to ensure a great user experience across devices.

By integrating the Value Card Product Cards Widget, you can effectively present your value card options in a visually appealing and functional layout.