Shopping from a video
The product card, the quick add panel, and what happens when a shopper adds to cart from a video.
Every clip with a tagged product is shoppable. Here's what shoppers can do, and which settings change it.
The product card
At the bottom of the video in the player:
- The product's image, its title, and its price. The price is the lowest price across its variants, shown in the shopper's currency.
- The star rating, when Show review score from products is on. It reads like a star followed by 4.6 (128): the score out of 5, and how many reviews.
- A round + button.
The card's colours follow the widget's Card style. See On the thumbnails. Stories and Pop up widgets always use the dark style.
| Shopper taps | What happens |
|---|---|
| The card | Opens the quick add panel, or goes to the product page if Buy button action is Link to the product page. |
| The + button | For a product with one variant in stock, adds it straight away and turns into a green tick. Otherwise it opens the quick add panel. If the add fails, the shopper is taken to the product page. It works this way whatever Buy button action is set to. |
On Carousel and Grid cards, the small product chip works as a shortcut: tapping it opens the player on that clip, where the full card is.
The quick add panel
A white panel that slides up over the video. It has:
- The product's image, title, and the price of the selected variant.
- One dropdown with all the product's variants, if it has more than one. The first available variant is picked for them.
- Quantity, with minus and plus buttons, from 1 to 99.
- Add to cart, in your button colours. It shows Adding… while it works. With Go to cart, it shows Added ✓ as the cart page opens. With Quick add, the panel closes and a message confirms the add.
- View full details, which goes to the product page.
Tapping outside the panel closes it, and so does the ✕ in its corner, or moving to another clip. If the panel can't load the product, the shopper is taken to the product page instead.
If Shopify can't add the item, for example because there isn't enough stock, the panel shows Shopify's message so the shopper can pick another option.
After adding to cart
It depends on Add to cart action in Settings → Products:
- Go to cart (default): the shopper is taken to your cart page.
- Quick add: a short added to cart message appears and the video keeps playing.
Cart drawers and cart counts
Adding from a video doesn't open your theme's cart drawer or refresh the cart count in your header. With Quick add, the count updates on the next page the shopper opens. If your store relies on a cart drawer, Go to cart gives shoppers the clearest confirmation.
Sold-out products
A product counts as sold out when none of its variants can be bought.
- With Hide out of stock products and variants on: sold-out products lose their card, and their chip on Carousel and Grid cards. Sold-out variants aren't listed in the panel.
- With it off: sold-out products keep their card, with Sold out in place of the + button. On chips, a Sold out label shows. In the panel, sold-out variants are listed as — sold out and can't be picked. When everything is sold out, the button reads Sold out.
Stock is checked after the video opens, so a sold-out card can appear for a moment before it's removed or labelled.
Good to know
- One product per clip. Each clip shows one product: the first one tagged.
- Active products only. Draft and archived products never show. A product that's active but not available on your Online Store, or in the shopper's market, may still show a card, but the quick add panel can't load it and the shopper is sent to the product page instead, where they may see a page not found. Tag products that are for sale online.
- Changes show on their own. Tagging, untagging, or changing a product's status shows on your storefront within a minute or two. You don't need to save your widgets again.
- Prices and currency. On stores that sell in more than one currency, the card, chip, and panel all show the shopper's currency. The card and chip show the product's lowest price, and the panel shows the price of the variant picked, so those two can still differ.
- Not supported: compare-at prices, subscriptions and selling plans, a Buy now button in the player, and extra details a product asks for, such as engraving text or an uploaded file. The panel only sends the variant and quantity, so shoppers need View full details to reach the product page for products like that.
- Sales are credited to the clip and widget when the shopper adds to cart from the video, or goes to the product page from it and buys there. See How sales are credited.