Product Cards

Product cards display products from your configured feeds inside Videobot slides. This guide covers creating, configuring filters, ordering, timing, and customizing product cards.

Creating a Product Card

1. Open your Videobot in the Builder
2. Navigate to the Content tab
3. Select a slide or click Add Product Card

When creating a product card:

• Name: Give the card a descriptive name (e.g., "Featured Running Shoes")
• Product Feed: Select from your configured feeds
• Product Count: How many products to display (1–10)
• Card Size: Choose Small, Medium, or Large

Card Sizes

Small

Compact horizontal banner without a CTA button. Best for subtle product suggestions, overlay on video content, or space-constrained layouts.

Medium (Default)

Horizontal card with thumbnail and CTA button. Best for standard product recommendations and most use cases.

Large

Vertical card with full-width CTA, no image. Best for maximum product focus, text-heavy descriptions, or single product highlights.

NOTE

The CTA button is not shown on Small size cards.

Product Filters

Filters control which products from the feed appear on the card. All filters combine with AND logic — a product must match every filter to be shown.

To add a filter:

1. Click Add Filter in the Product Filters section
2. Select a Field from the dropdown (fields are defined in your feed's Filterable & Sortable Fields configuration, which controls which fields appear in both the filter and sort dropdowns)
3. Choose an Operator (equals, contains, greater than, exists, etc.)
4. Enter a Value where applicable

Available operators:

Operator	Description
equals / not equals	Exact match
contains / not contains	Substring match
in / not in	Comma-separated list of values
exists / not exists	Field is present or absent
greater than / less than	Numeric comparison
matches regex	Regular expression

A product count matching the current filters is shown below the filter list so you can verify the result set before saving.

NOTE

Filterable fields are configured per feed in Account Settings → Product Feeds. Only fields marked as filterable there will appear in the filter dropdown.

Product Order

Control the order in which products appear in the carousel. Choose a mode from the Order dropdown:

Feed default

Products appear in the order returned by the feed. No client-side sorting is applied.

By field

Sort products by a field configured as sortable for the feed:

• Sort by: Select the field to sort on from the sortable fields configured for the feed (e.g., price, title, availability)
• Direction: Ascending or Descending

Numeric sortable fields are sorted numerically; text sortable fields are sorted alphabetically.

NOTE

Sortable fields are configured per feed in Account Settings → Product Feeds. Only fields marked as sortable there will appear in the sort dropdown.

Custom order

Manually select and arrange which products fill each slot:

1. Click Choose Products to open the selection modal
2. Search products by name using the search field
3. Select up to the configured product count — only products matching your active filters are shown
4. Click Add to Slots to confirm
5. Use the ▲ / ▼ arrows on each slot to reorder

The slot preview updates to reflect your selection and order. Custom order persists across sessions.

Appearance

Style Source

Choose between Custom (configure styles per card) or Account Template (inherit styles from a shared template defined in Account Settings).

When using an Account Template, individual style groups (Size, Colors, CTA, Content Templates) can be selectively overridden per card using the Override toggle.

Colors

Setting	Description	Default (Small/Medium)	Default (Large)
Background	Card background color	Dark (#1a1a1a)	White (#ffffff)
Text	Product title and description	White (#ffffff)	Dark gray (#1f2937)
CTA	Button color	Purple (#8b5cf6)	Purple (#8b5cf6)

CTA Text

Customize the call-to-action button text (e.g., "Shop Now", "View Product", "Learn More").

Content Templates

Control how product title and description are rendered:

• Feed value: Use the field value from the feed as-is
• Template override: Use syntax to compose custom strings (e.g., — )
• Price only / Hidden: Available for the description field

Available variables are shown beneath the template inputs, pulled from the first product in the selected feed.

Custom CSS

Add scoped CSS targeting product card elements. Available class names:

Class	Target
.vb-product-card	Card container
.vb-product-card--small/medium/large	Size variant
.vb-product-card__image	Product image wrapper
.vb-product-card__title	Product title
.vb-product-card__description	Price / description
.vb-product-card__cta	CTA button
.vb-product-card__content	Content wrapper

Navigation Arrows

Show or hide previous/next arrows on the product carousel, independently for desktop and mobile.

Product Timing

Product timing is configured per slide from the slide editor, not from the product card itself. This means the same product card can have different timing on different slides.

To configure timing:

1. Open a slide in the Builder
2. In the slide's options panel, select Product Cards, then click Configure product timing
3. The Product Timing panel opens, showing the slide video and a timeline

Timeline

The timeline divides the video duration into segments — one segment per product slot. Drag the boundary handles to adjust when each product becomes visible. You can also edit start/end times directly for each slot.

For a card with N products, there are N-1 boundaries:

• Start time: when the first product slot becomes active
• End time: when the last product slot stops
• Transition times: the timestamps at which the carousel advances to the next slot

Auto-advance

Auto-advance (autoswipe) can be enabled independently for desktop and mobile. When enabled, the carousel advances automatically every N seconds regardless of the video position.

IMPORTANT

Auto-advance takes priority over timing. When auto-advance is enabled for a device, the video-synced transition times are ignored for that device and the carousel advances by the configured interval instead.

Setting	Description
Auto-swipe on desktop	Enable timer-based advancement on desktop
Auto-swipe on mobile	Enable timer-based advancement on mobile
Seconds per product	How many seconds each product is shown (1–60, default 5)

After configuring timing or auto-advance, click Save in the Product Timing panel footer, then click Save on the slide panel to persist the changes to the bot.

Multiple Product Cards

You can add multiple product cards to a Videobot:

• Different cards for different slides
• Multiple feeds for varied recommendations
• Each slide can have its own timing and auto-advance settings for the same card

Best Practices

• Configure filterable fields in the feed: Only fields defined as filterable at the feed level are available as filter options — set these up first in Account Settings → Product Feeds
• Use filters to keep it relevant: Combine filters (e.g., availability equals in_stock AND brand equals Rowico) to narrow down the product set before choosing display order
• Custom order for curated selections: Use Custom order mode when you want full control over which specific products appear in which slots
• Match timing to your video: Use the Product Timing editor to align product visibility with what is shown on screen at each moment
• Use auto-advance for passive viewing: Enable auto-swipe on mobile for viewers who are watching without interacting — it ensures all products are seen
• Match your brand: Customize colors or apply an Account Template for consistent branding across cards
• Test on mobile: Verify the horizontal scroll experience and auto-advance behavior on a real device