Goal of Tapcart PDP Stories and 'For You' Feed on React
Tapcart PDP Stories
Boost your app’s revenue and drive higher conversions by adding eye-catching, vertical videos on your product detail pages. These stories give shoppers a smooth and engaging mobile shopping experience—just like what they’re used to on social media.
Tapcart 'For You' Feed
Let your customers discover and shop your products through a smart, AI-powered video feed. It’s tailored to each user’s behavior and interests, all inside your Tapcart app.
Best Ways to Use Tapcart PDP Stories and 'For You' Feed on React
Use short, punchy videos that highlight the product’s benefits and fit. Keep it natural, mobile-first, and authentic. For best results:
Feature real customers or influencers using the product
Keep videos vertical, short (under 15 seconds), and sound-on optional
Highlight unique selling points visually
Example A:
On a PDP for a dress, use a quick try-on video showing fit, fabric, and movement.
Example B:
In the 'For You' feed, include fun, TikTok-style clips showcasing trending products, how-tos, or styling tips.
Content Guide and Best Practices
Use models wearing the actual garment
Focus on the product’s use, fit, and lifestyle context
Avoid using unrelated or overly generic content
How to Create Tapcart PDP Stories
On the Tolstoy admin, click Surfaces
Click Email & App -> Choose Tapcart PDP stories and Click Create Surface
How to Design & Customize Tapcart PDP Stories
This guide walks you through all the available design and layout settings for Tapcart PDP Stories, so you can fully customize how your product videos look and behave on product detail pages.
1. Widget Basics
Minimum number of videos
Set the minimum number of videos required for the PDP Stories widget to appear.
Example:
1means the widget will show as long as at least one video is available.
Color swatch on video
Enable this if you want color swatches to appear on videos.
Click Set up to configure swatch behavior.
Title
Toggle on if you want to display a title above the widget.
2. Spotlight Settings (Mobile vs Desktop)
You can configure layouts separately for Mobile and Desktop.
Video plays in
Choose how videos are positioned:
Center tile – the active video appears centered
Left to Right – videos flow horizontally
Autoscroll to next video
Automatically moves to the next video after one finishes.
Card header text
Controls what appears at the top of the product card:
Product
Video name
None
Card subheader text
Controls the secondary text:
Price
Text
None
3. Sizing Mode
Responsive
Automatically adjusts size based on screen width.
Fixed
Lets you define exact dimensions for tiles.
Fixed settings
Main tile width / height – size of the primary video tile
Other tiles width / height – size of secondary tiles
Spacing between tiles – gap between video tiles
4. Layout Settings
Horizontal padding
Adds space on the left and right of the widget.
Border radius
Controls how rounded the video tiles are.
Display arrows
Shows left/right navigation arrows.
Display progress bar
Shows video playback progress.
Product tile height
Controls the height of the product card below the video.
Fallback text
Text shown if no videos are available.
Autoplay
Automatically plays videos when the widget loads.
Gap between video tile and card
Controls spacing between the video and the product card.
Background color & opacity
Customize the widget background color and transparency.
5. Video Captions
Toggle Video Captions on or off to display captions during playback.
6. Product Card Styling
Product name
Customize how the product name appears:
Open in new tab (toggle)
Letter case
Font size
Line height
Font color
Font weight
Text above product card
Optional text displayed above the product card, with customizable:
Font size
Font color
Font weight
Product price
Style the product price:
Font size
Font color
Font weight
Sale price
Set a separate color for sale prices (commonly red).
7. Arrow Styling
Arrow color
Customize the color of navigation arrows.
8. Performance Settings
Auto load videos
Enable to preload videos automatically for smoother playback.
Best Practices
Use Responsive mode for most stores unless strict sizing is required.
Keep border radius consistent with your PDP design.
Enable Autoplay and Center tile for higher engagement.
Limit text clutter—Product name + price is usually enough.
How to Create Tapcart 'For You' Feed
On the Tolstoy admin, click Surfaces
Click Email & App -> Choose Tapcart PDP stories
How to Design/Customize Tapcart 'For You' Feed
Head over to the Design tab to customize your Video Feed, Product Card, and Branding sections the way you like.
Video feed
Behaviour
Make videos shoppable – Lets viewers tap products in the video to shop directly.
Auto play – Videos play automatically as users scroll.
Auto scroll to next video – Moves to the next video on its own once one finishes.
Auto-Display Video Description – When enabled, videos sourced from social media without product tags will automatically display their original post description.
Display creator handle – Shows the creator’s username on the video.
Open link to creator's profile – Links the creator’s handle to their profile when tapped.
Always start on mute – Videos will always play without sound unless unmuted.
Enable video captions – Turns on automatic subtitles for videos.
Disable multi-product view – In mobile view, skip multi-product view.
Sale products
Only show sale products – Displays only products that are currently on sale.
Product Card
Product price – Shows the price of the product directly on the video or product card.
Mini CTA – When turned on, you can choose between showing just 'Text' or 'Text and price'. If you go with 'Text and price', you'll also be able to set the 'Alignment' to Left, Center, or Right.
Branding
Check this full article about branding for details.
Tapcart Integration Block Instructions
Ensure Tolstoy integration is set up in Tapcart (one-time).
Set up Tolstoy integration by going to Tapcart Integrations page.
Look for Tolstoy.
Click the 'Connect Integration' button.
Add your Tolstoy app key. Save & Enable.
Tolstoy appkey can be found within the Tolstoy Settings → Workspace
Add Tolstoy block to Page/Screen
Navigate to “Design Blocks” → Scroll to “Integration” and add “Tolstoy - Discover”. Hover over the block and click “Edit”.
Add the Tolstoy project's Publish ID to the input box on the right-hand side and press “Save”.
a. Tolstoy Publish ID can be found after you click publish and it will be found on the Custom Block
b. Tapcart Admin: