The Product Page Stories (PDP Stories) feature enables you to enhance your product detail pages by adding immersive, short-form video content. These stories engage customers through an Instagram-like, shoppable experience that builds product trust, educates shoppers, and increases conversion rates.
📍IMPORTANT: There are two types of implementation: Automated and Manual.
We highly recommend and encourage using the Automated Tolstoy implementation. This is a dynamic setup that only requires you to implement it once on your site, and then the correct videos will automatically appear on each product page based on the product tags. There's no need to create multiple projects.
What are the Best Ways to Use Product Page Stories?
PDP Stories can feature a variety of video types that help customers make confident buying decisions. These short, mobile-friendly clips enhance the visual appeal of your PDP and help replace the need for long descriptions or extra clicks.
Example A: Use a series of videos to showcase different angles of a product in use (e.g., someone wearing or demonstrating the item).
Example B: Add authentic customer reviews or user-generated content to build trust and drive engagement.
Content Guide and Best Practices
Recommended Content Types:
Reviews: Customer testimonials and UGC clips build trust.
Unboxing: Reveal packaging and first impressions.
How it looks: Show different angles or people using/wearing the product.
How to use: Quick usage demos or tutorials.
Product specification: Highlight key details or features visually.
Best Practices
Add Stories Above the Fold: Place them high on the page so users see them instantly.
Use 3 or More Videos: Keep users engaged by offering more than one story.
Avoid Small Sizes: Ensure your story widget is large enough to be easily tappable.
Use the Expanded Widget: This improves engagement and makes the stories more prominent.
Add Titles and Story Names: Providing context helps guide users and improves clarity.
Example: Title: “Real Customer Reviews” | Story name: “First Impressions”
Steps on how to create Product Page Stories
From the Tolstoy Dashboard, go to the Onsite tab.
Click Create Tolstoy.
Choose Product Page Stories and click Start Creating.
If you want to publish stories on a different page, you can follow the steps below:
1. Click on Create from scratch and select Stories.
2. Choose where you want to display your stories. You have the option to display them on Home pages, Product pages, Collection pages, or Other pages. Pick the option that best fits your needs.
How to Design/Customize Product Page Stories
Widget
Border Radius: Customize the roundness of story containers
Alignment: Align the story widget to the left, center, or right of the product page section.
Motion: Determines how your story thumbnails behave visually on the product page.
Static: Thumbnails appear as still images with no animation or movement.
Dynamic: Thumbnails are animated or autoplay as videos/gifs immediatel.
Layout
The Minimum Number of Videos setting controls how many videos must be available (and properly tagged) before the story widget appears on the product page.
If the number of tagged videos is less than the minimum you set, the widget will not display.
If the number of tagged videos meets or exceeds the minimum, the widget will be visible to users.
Items size
Responsive: The story items automatically adjust their size based on the screen width
Fixed: The story items are set to a specific size in pixels (e.g., 104px). This means they’ll remain the same size regardless of the device or screen width.
Item shape
Rectangle: The story items will appear as rectangular images or videos.
Circle: The story items will be displayed as circular thumbnails.
Size: controls the dimensions of the story thumbnails on your product page. You can adjust the size based on your layout needs and design preferences.
Spacing: controls the amount of space between each of the story thumbnails in the widget. This helps to maintain a clean and organized layout, ensuring the stories don’t feel cramped or cluttered.
Border
Toggle Border On/Off: This setting allows you to enable or disable the border around the story thumbnails.
Border Thickness: Adjust the width of the border line in pixels. For example, you might set it to 1px for a subtle border or 3px for a more prominent look.
Border Color: You can set the color of the border around the thumbnails by choosing a hex code (e.g., #DD6089). This allows you to match the border to your branding or design color scheme.
Border Type:
Solid: A continuous, unbroken line around the thumbnail.
Dashed: A line consisting of short segments, adding a more playful, informal style.
Opacity: Adjust the transparency of the border. A value of 1 means the border is fully visible, while a lower opacity (e.g., 0.5) makes it more subtle and see-through.
Title
Toggle Title On/Off:
This setting allows you to enable or disable the title above the widget. You can toggle it on for visibility or off if you prefer a cleaner layout without text.
Title Text: This is where you enter the text for the title (e.g., "See it in Action"). The title can guide users and provide context about the content they’re about to see.
Title Text Size: Set the font size for the title, typically in pixels (e.g., 16px). Adjust this for better readability and to match your design aesthetic.
Mobile Title Text Size: Set the font size for mobile devices, ensuring that the title is appropriately scaled for smaller screens (e.g., 14px).
Text weight: Allows you to customize the appearance of text displayed on your product page stories, ensuring it aligns with your design and branding.
Text color: Allows you to choose the color of the text
Play button
Toggle Play Button On/Off: Allows you to enable or disable the play button for the video stories.
On: The play button is visible and clickable.
Off: The play button is hidden, and videos may autoplay (depending on other settings like AutoPlay).
Size: Adjust the size of the play button.
Color: This sets the color of the play button itself.
Background: Customize the background color of the play button.
Toggle Border On/Off:
This setting controls whether the play button will have a visible border around it.
On: The play button will have a border around it, which you can customize in terms of color, thickness, and opacity.
Off: The play button will not have a border, offering a cleaner, minimalist look.
Border Color: You can choose a color for the border around the play button.
Border Opacity: The opacity controls the transparency of the border.
A setting of 1 makes the border fully visible (no transparency).
A setting of 0.5 or lower creates a more subtle, see-through effect.
Story name
Provides additional context or a title to your stories, helping users understand what the video or content is about.
Toggle Story Name On/Off: allows you to enable or disable the story name.
On: The story name will be visible above or on top of the video, giving users context about the content.
Off: The story name will be hidden, offering a cleaner design without text.
Position: Choose where the story name will appear relative to the video thumbnail.
Below: The story name will appear under the thumbnail, making it a great option if you want the video content to take the primary focus.
Overlay: The story name will overlay directly on top of the thumbnail or video, providing a more integrated look. Make sure the text is legible on top of the video.
Text Weight: This controls how bold the story name text appears.
Text Size: Adjust the size of the story name text to ensure it fits well with your overall layout.
Text Color: Choose the color for the story name text.
Video feed
Behaviour
Make Videos Shoppable: Ability to add product card to make the videos shoppable.
Auto Play: The video starts automatically when the page loads, no need for the viewer to click "play."
View Feed in Fullscreen: Allows users to expand the video feed to fill the entire screen for a more immersive experience.
Auto Scroll to Next Video: The video feed moves to the next video automatically when the current one finishes, keeping the viewer engaged.
Auto-Display Video Description: The video description (like product details) automatically appears when the video plays, helping viewers understand the content.
Display Creator Handle: Shows the creator’s social media handle on the video, helping viewers identify the content creator.
Open Link to Creator's Profile: Viewers can click to open a direct link to the creator’s profile, allowing them to follow or learn more.
Always Start on Mute: Videos start with the sound muted. Viewers can unmute if they wish to hear the audio.
Enable Video Captions: Provides subtitles for the video, making it more accessible, especially for those with hearing impairments or in noise-sensitive situations.
Disable Multi-Product View: Focuses the viewer's attention on a single product by disabling the display of multiple products in the video.
Sale Products
Only Show Sale Products: Filters the video or page to display only products that are currently on sale.
Multi-Product Page Features
Title: The heading or name of the page or section, used to introduce the content (e.g., "Featured Products").
Divider: A visual element that separates sections of content, like a line, helping to organize the page.
Divider Title: The text or heading placed above a divider to label the section that follows.
Text: Written content on the page, such as product descriptions or promotional messages, to guide and inform the user.
Product Card
Feed Product Card
Product Price: Displays the product’s price.
Mini CTA (Call to Action): Small button or link to encourage actions like "View More."
Button: A button for actions like adding to cart or viewing details.
Text: Basic text like the product name or short description.
Expander Arrow: Arrow icon to show more details when clicked.
Text (Expander): More information shown when the expander is clicked.
Shop: Button or link to direct users to the store or other products.
In Feed PDP (Product Detail Page)
Primary Action (Add to Cart): Main button to add the product to the cart.
Secondary Action (Buy Now): Button to buy the product immediately.
Product Price: Displays the product price.
Description: Shows product details.
Collapsed by Default: Description is hidden initially, expandable when clicked.
Always Show Full Description: Description is always visible.
Checkout & Shopping Bag: Icons for viewing the cart and checking out.
Sales Badge: Label that shows the product is on sale.
Text - Sale: Text indicating the product is on sale.
Text Customization
Text Color: Color of the text (e.g., white or black).
Background Color: Color behind the product card or section.
Border:
Thickness: The thickness of the border around the product.
Color: The color of the border.
Shipping
Shipping Text: Shows shipping info, like “Free Shipping Over $100.”
Text Color (Shipping): Color of the shipping text.
Font Weight: Adjusts the boldness of the shipping text (Light, Regular, Bold).
Product Availability
In Stock / Out of Stock: Shows whether the product is available.
In Stock Color: Color for in-stock products.
Out of Stock Color: Color for out-of-stock products.
Recommended Products
Section Title: Title of the recommended products section.
You May Also Like: Shows related products to encourage more shopping.
Product Information
Product Name: The name of the product.
Price: The price of the product.
Step on How to Publish your Product pages stories:
Click the publish button:
2. Copy the publish ID and Add block to your PDP template then click on added block in Shopify theme, paste publish ID, and click save
