Value card product item cards widget

The Value Card Product Item Cards Widget displays a list of cards, each representing a value card product. Examples include “Klippekort m/ 25 klipp” or “Klippekort m/ 10 klipp.”

To link the cards to specific product pages, you must provide corresponding URLs and images for each product ID specified.

Key Features

Dynamic Product Display Showcase multiple value card products with individual links and images.
Responsive Layout Options Configure the widget to scroll or wrap elements based on available viewport space.
Customizable Card Layouts Adjust the number of cards per row for different screen sizes.

How to Use

Add the widget to your webpage using the HTML snippet below. Replace the attributes with your specific values.

Example Usage:

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

Property	Description	Default Value	Required
`value-card-product-ids`	Comma-separated list of value card product IDs found in Bilberry.	N/A	Yes
`value-card-product-urls`	Comma-separated list of URLs to the “Product Detail” page for each value card.	N/A	Yes
`value-card-product-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:

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/WixBilberryValueCardProductItemCards.js
- Tag Name: wix-bilberry-value-card-product-item-cards

Tips for Effective Integration

Enhance Product Navigation Use this widget to create an intuitive interface linking to detailed value card product pages.
Enhance User Navigation: Provide clear links and images for each value card to improve user understanding.
Optimize for Mobile Users Set the number of cards per row to ensure a seamless experience on all devices.

By integrating the Value Card Product Item Cards Widget, you can effectively present your value card products in an engaging and user-friendly format.