Showcase products with shoppable video tiles, driving sales directly from your collection or landing pages. This feature allows you to replace static images with dynamic, engaging videos, helping customers interact with your products more effectively and making it easier for them to make purchasing decisions.
What can you achieve with Product Tile Videos?
Display Shoppable Product Videos: Turn your product tiles into interactive video showcases that lead directly to purchases.
Increase Customer Engagement: Provide a more engaging shopping experience with video content that captures attention.
Feature Popular or New Products: Highlight best-selling or newly launched items through visually appealing videos.
Enhance Shopping Experience: Help customers make quicker, more informed decisions by showcasing your products in action.
Content Guide and Best Practices
Use High-Quality Videos: Make sure your videos are clear, well-lit, and have high resolution for a professional look.
Keep Videos Short and Sweet: Aim for videos that are under 30 seconds to maintain customer interest and engagement.
Focus on Product Features: Highlight the product’s key benefits and features in your videos to help customers understand what they’re purchasing.
Incorporate Calls-to-Action: Use overlay text and buttons to encourage purchases directly from the video.
Optimize for Mobile: Ensure that your video content displays properly across all devices, especially on mobile.
Steps on how to create your product tile
Go to Onsite click create Tolstoy
2. Choose Product tile and click start creating
3. Select your product under content subsection
4. Select or search for the videos you want to use
Guide on How to Design and Customize your Product Tile videos
Go to the Design subsection
Video
Auto-play: Toggle to automatically play the video or manually start it.
Loop: Toggle to loop the video or play it once.
Auto Scroll: Toggle to enable or disable auto-scrolling of the video.
Scaling: Choose between "Fit" to fit the video within the frame or "Fill" to cover the entire frame.
Mute Button: Option to mute or unmute the video sound.
Show: Toggle to display or hide video controls.
Background: Toggle to show or hide the video background.
Background Color: Customize the background color behind the video.
Opacity: Adjust the transparency of the video or background.
Stories
Enable Stories: Toggle to activate or deactivate stories on your page.
Motion: Add motion effects to enhance the user experience.
Size: Adjust the size of the element to fit your design needs.
Border Radius: Customize the rounded corners of the element.
Spacing: Control the space between elements for proper alignment.
Border: Add or remove borders around the element.
Border Width: Set the thickness of the border.
Border Color: Choose the color of the border for customization.
Product Content
Name
Enable: Toggle to activate or deactivate the name display.
Color: Set the color of the name text.
Font
Size: Adjust the font size.
Letter Spacing: Customize the space between letters.
Subtitle
Enable: Toggle to activate or deactivate the subtitle.
Color: Set the color of the subtitle text.
Font
Size: Adjust the font size.
Letter Spacing: Customize the space between letters.
Variant
Enable: Toggle to activate or deactivate the variant.
Color: Set the color of the variant text.
Font: Choose the font for the variant.
Size: Adjust the font size.
Letter Spacing: Customize the space between letters.
Layout
Alignment: Set the alignment (left, center, right).
Spacing: Control the space between layout elements.
Padding: Adjust the padding around elements for proper spacing.
CTA
Variant Selection
Enable: Toggle to activate or deactivate the variant selection.
Background Color: Set the background color for the variant selection.
Text Color: Allows to add text.
Border Color: Set the border color around the variant.
Font:
Font Size: Adjust the font size of the variant text.
Border Radius: Customize the border radius for rounded corners.
Font Vertical Offset: Adjust the vertical positioning of the font.
Text Box: Allows to add text.
Letter Spacing: Set the space between letters in the variant text.
Primary CTA (Call to Action)
Enable: Toggle to activate or deactivate the CTA button.
Action: Choose the CTA action (e.g., "Add to Cart," "Buy Now," "View Product").
Background Color: Set the background color of the CTA button.
Text Color: Allows to add text.
Border Color: Set the border color around the CTA button.
Font:
Font Size: Adjust the font size of the CTA text.
Border Radius: Customize the border radius for rounded corners of the CTA button.
Font Vertical Offset: Adjust the vertical positioning of the CTA font.
Text Box: Allows to add text.
Letter Spacing: Set the space between letters in the CTA text.
Product Card
Buttons
Primary Button
Enable Primary Button: Toggle to activate or deactivate the primary button.
Button Type: Choose the button action (e.g., Add to Cart, Buy Now, Learn More, Custom Link).
Button Text: Set the text that appears on the primary button.
Open in New Tab: Toggle to open the link in a new tab when clicked.
Secondary Button
Enable Secondary Button: Toggle to activate or deactivate the secondary button.
Button Type: Choose the button action (e.g., Add to Cart, Buy Now, Learn More, Custom Link).
Button Text: Set the text that appears on the secondary button.
Open in New Tab: Toggle to open the link in a new tab when clicked.
Back Button
Icon: Choose an icon for the back button.
Alignment: Set the alignment (left, center, right).
Color: Choose the color of the back button.
Sales Badge
Enable Sales Badge: Toggle to activate or deactivate the sales badge.
Text: Set the text that will appear on the sales badge.
Text Color: Choose the color of the text on the sales badge.
Background Color: Set the background color for the sales badge.
Shipping
Enable Shipping: Toggle to activate or deactivate the shipping option.
Stock
Enable Stock: Toggle to activate or deactivate stock display.
In Stock Color: Choose the color to display when the item is in stock.
Out of Stock Color: Choose the color to display when the item is out of stock.
Recommended Products
Enable Shipping: Toggle to activate or deactivate the shipping option
Title: Set the title for the recommended products section.
Show Product Names: Toggle to display or hide product names.
Show Product Prices: Toggle to display or hide product prices.
Description
Description Collapsed by Default: Toggle to set the description to be collapsed by default.
Always Show Full Description: Toggle to always display the full description without collapsing.
Checkout
Show Shopping Bag: Toggle to enable or disable the display of the shopping bag during checkout.
Step on How to Publish your Product Tile videos:
1. Click the publish button and copy the publish ID
2. Go to your Shopify theme and add the product tile block to your desired spot.
3. Paste the publish ID and select product (one of the selected products from your project)
That's it! 🥳
