> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-for-developers/web/integration-guide/components/player-deck-grid.md). # 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 ``, the ``, 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 ```html ``` #### Player Deck Grid ```html ``` ### 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. | Name | Description | Default | | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | | `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. | Event | Payload | Fires when | | ------------------------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `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: | CSS variable | Description | | -------------------- | ------------------------------------------------------------------------- | | `--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.