Player Deck / Grid
Player Deck is a shoppable embed presentation that surfaces a video and its product card together, so shoppers can browse content and reach the relevant product detail page in fewer clicks. Player Deck is derived from the Embed Feed layout: each tile pairs an autoplaying video thumbnail with a product card directly beneath it, and many Embed Feed and Player attributes apply.
Player Deck supports two presentations:
Player Deck Player Deck Grid
Player Deck — a horizontally scrollable row of video + product tiles. Best for product discovery surfaces, category pages, and content rows on a homepage.
Player Deck Grid — the same tile, arranged as a multi-column responsive grid. Best for dedicated browse pages or PLP-style discovery pages where the deck is the primary unit on the page.
Integration
Place the script tags either in the <head>, the <body>, or directly above the Firework component you are adding. Replace {BUSINESS_ID}, {CHANNEL}, and {PLAYLIST_ID} with your own values — the Advanced Embed builder in the Business Portal fills these in for you automatically.
Player Deck
Player Deck Grid
Attributes
In addition to the attributes below, Player Deck inherits Player Attributes (which control player behavior) and Feed Attributes (which decide what content is displayed). You can configure any Embed Feed attribute on Player Deck as well.
mode
row or grid. Selects Player Deck (row) or Player Deck Grid (grid). Grid supports a single-column layout as a special case.
row
channel
Source channel identifier for the feed.
—
playlist
Optional playlist ID. Works in conjunction with channel.
—
playlist_collection
Optional playlist collection ID. Works in conjunction with channel.
—
max_videos
Limits the number of videos loaded. In grid mode the grid is loaded in chunks but capped at this value.
—
paginate_by
Used in grid mode to paginate the next chunk of rows behind a Load more button. The value is fuzzy to avoid orphan or incomplete rows.
—
autoplay
true or false. Whether the first visible thumbnail autoplays.
true
captions
true or false. Show captions (titles) for autoplayed thumbnails.
true
open_in
Where a thumbnail click opens the player. default opens the modal player when possible, falling back to _blank. Other values: _self, _blank.
default
shopping_quick_add
Boolean. Enables the quick-add (single-variant) button on the product card. Currently only used on Player Deck. Only appears for eligible products hydrated by the shopping integration.
false
shopping_quick_view
Boolean. Enables the quick-view (multi-variant) button on the product card. Currently only used on Player Deck. Only appears for eligible products on supported themes.
false
product_tag_placement
top, bottom, or false. Positions or hides the product tag on a thumbnail.
top
thumbnail_cta
Render CTAs inside the carousel thumbnail.
false
thumbnail_product_card
Display the product card inside the thumbnail in addition to the deck slot.
false
size
Thumbnail size. Adjusts thumbnail size in row mode. Does not apply to grid.
large
title
Title rendered above the unit in grid mode. Defaults to a localized Stories and Short Videos.
—
Shopping behavior
Player Deck supports two shopping interactions on the product card:
Quick Add — appears for single-variant products that are available and in stock. Clicking the button adds one unit of that product to the cart. Cart UI is updated automatically on supported themes; otherwise a custom integration is required.
Quick View — appears for multi-variant products on supported themes (e.g. Shopify Dawn). Clicking the button opens the theme's variant picker so the shopper can choose their preferred option before adding to cart.
A product must be available, in stock, and hydrated by the shopping integration for either button to render. Setting shopping_quick_add or shopping_quick_view enables the UI, but it will not appear for ineligible products.
Events
Player Deck emits the following custom events on the document. Listen to them to integrate with cart drawers, analytics, or theme-specific flows.
fw:shopping:player-deck-add-to-cart-click
{ product: Api_Product, product_id: string }
The add-to-cart button is clicked on a Player Deck product card. If you are integrating a custom Quick Add modal, listen here and check product.product_units.length > 1 to open the theme's modal with the given product.
fw:shopping:cart-updated
{ product: Api_Product, product_id: string }
The add-to-cart button is clicked on a single-variant product and the item is successfully added to the cart.
Styling
Player Deck is themed using the same CSS variables as Embed Feed. A few that are commonly customized on Player Deck:
--fw-thumbnail-gap
Gap between tiles. Increase to add whitespace between videos in the deck.
Set these on the embedding page's root element or on the fw-player-deck element itself.
Last updated
Was this helpful?