Tolstoy makes it easy to tailor your experience so it feels on-brand and seamless for your customers. Here's a quick guide on how to customize each element to match your brand's style and tone.
Logo
You can upload your brand's logo to make your Tolstoy experience instantly recognizable. Navigate to the design settings and upload a high-resolution version of your logo. Make sure the file is optimized for both desktop and mobile views.
Heading Font: This font will be used for titles and headers in your Tolstoy player. Pick a font that really represents your brand and is easy to read.
Body Font: This is for the general text and descriptions. Choose a clean and readable font to ensure your audience has the best experience across all devices.
Typography
Set your preferred fonts to match your brand's typography. Choose from system fonts or upload custom fonts to maintain consistency across your digital presence.
Heading Font: This is what shows up for titles and headers. Pick something bold and eye-catching that fits your style.
Body Font: This is used for the general text. Choose a font that’s clean, easy to read, and feels like your brand.
💡Note: If your desired font isn't available in the provided options, no worries! You can easily upload your own custom font to keep everything on-brand.
Language
Tolstoy allows you to adjust the language to ensure it speaks directly to your audience. Choose from multiple language options or customize your own translations for different interface elements.
Front-Facing Language: This refers to the language used for all system buttons, placeholders, and other user-facing content.
💡Note: If the language you'd like to use isn’t available in the list or if there are untranslated words, feel free to reach out to our support team for assistance!
Controls
Adjust the visibility and behavior of player controls like volume, play/pause, and skip. You can show or hide these based on your user experience preference.
Mute
Sound removed from videos by default: This setting ensures videos start with no sound.
Always start on mute: Enabling this will make sure videos always start muted when played.
Shopping Cart
Checkout & Shopping Bag: This allows users to view their shopping bag and proceed directly to checkout from within the Tolstoy player.
Feed Buttons
Border Radius: Adjusts the roundness of the button menu/options in the feed player. See image for reference:
Button Opacity: Controls the transparency of the button menu/options in the feed player. See image for reference:
Button Color: You can customize the button color to black or white for a sleek, minimalistic look.
Feed Behavior
Adjust how your product feed behaves within your Tolstoy player for an optimized viewing experience.
Text: Modify the text colors for headers and body content. See image for reference.
Header Color: Set the color for the header text.
Body Color: Choose the color for the body text.
Buttons Design: Customize the style of the buttons in your feed.
Fallback Primary
Corners Radius: Adjust the corner radius for buttons to create a rounded or sharp look.
Product Details Card: Personalize the product details card design.
Primary Button
Include Product Price: Display the product price within the product card.
Quantity Picker: Enable a quantity selector on your product card.
Product Images: Choose how the images are displayed:
Image Fit: Options for 'Fill' or 'Fit' to control the image layout.
Fit option
Fill option
Image Background: Choose between a solid or blurry background for product images.
Solid option
Blurry option
Stock: Control the visibility of products based on stock status.
Hide Out of Stock Products: Option to hide products that are out of stock.
Advanced: Hide specific product variants.
Variants to Hide: Specify the variant IDs to hide certain variants from the product card.
Product Subtitle: Display additional product details in the subtitle.
Metafield Namespace and Key: You'll need a metafield to add this to your videos. Provide the 'namespace' and 'key' of the product metafield.
Move to PDP on Product Click: Enable automatic redirection to the Product Detail Page (PDP) when a product is clicked.
Show Afterpay: Display the Afterpay payment option.
In-Video Product Card
Clip Product Title After: Limit the product title display to a set number of lines (1 or 2).
1 line option
2 line option
Clip Variant Subtitle After: Limit the variant subtitle display to a set number of lines (1 or 2).
Card Opacity: Adjust the opacity of the product card for a lighter or more solid effect.
Feed Product Card
Customize how your products appear within the feed. You can change the layout, product name visibility, pricing details, and CTA button styles to match your brand.
Product Name
Font: Choose the weight or thickness of your font to match your brand’s style.
Font Size: Adjust how large or small the product name appears.
Text Color: Set the color of the product name text.
Letter Case: Choose how letters are displayed (e.g., default, uppercase, lowercase or capitalize).
Product Price
Font: Choose the weight or thickness of your font to match your brand’s style.
Font Size: Adjust the size of the price text.
Text Color: Define the color of the standard price.
Sale Price
Text Color: Choose a specific color to make discounted prices stand out.
CTA Button
Customize the appearance of your Call-To-Action button:
Font: Choose the weight or thickness of your font to match your brand’s style.
Font Size: Adjust the size of the button text.
Text Color: Set the font color on the button.
Border Thickness: Define how thick the button border should be.
Border Color: Set the color of the button’s border.
Border Radius: Customize the roundness of the button corners. Negative values will create a sharp-cornered style.
Background Color: Choose a background color for the button.
Letter Case: Decide if the button text should be lowercase, uppercase, or default casing.
In-feed PDP
Modify the in-feed product display page (PDP) layout and styling. Ensure that product details like images, titles, and purchase buttons are aligned with your overall design theme.
Product Image Carousel
Open to Variant Image: means that when a customer clicks on or views a product in the carousel, the image shown by default will be the image of the selected variant (like a specific color, size, or style), rather than the default product image.
For example:
If you have a T-shirt with color variants (red, blue, green), and someone selects the blue option from the variant dropdown, the product image will immediately update to show the blue shirt, not just the default image (which might be red).
Available Options Only: setting ensures that only in-stock or selectable product variants appear in the dropdown or selection interface.
What it does:
Hides sold-out options like sizes or colors that are unavailable.
Prevents users from clicking or choosing a variant they can’t buy.
Simplifies the user experience by showing only what’s actually available for purchase.
Example:
If you sell shoes in sizes 6–10, but sizes 7 and 9 are sold out:
With this enabled, the dropdown or swatches will only show sizes 6, 8, and 10.
Without it, sizes 7 and 9 would still appear.
Product Name
Font:
Font Size:
Text Color:
Letter Case:
Product Price
Font:
Font Size:
Text Color: #e8ff00
Sale Price
Text Color:
Variant Title
Font:
Font Size:
Text Color:
Letter Case:
Variant Dropdown
Font:
Font Size:
Text Color:
Letter Case:
Primary CTA Button
Font:
Font Size:
Text Color:
Border: enable or disable border option
Disabled:
Enabled:
Border thickness:
Border Radius:
Background Color:
Letter Case:
Secondary Button
Font:
Font Size:
Text Color:
Border:
Border Radius:
Background Color:
Letter Case:
Description
Font:
Font Size:
Text Color:
Spotlight
Use the spotlight feature to highlight specific videos or content. Customize the spotlight color, shape, and position to drive attention without disrupting the user experience.
Product Name: Set how the product name appears on the card.
Open in New Tab: Choose whether product links open in a new browser tab.
Letter Case: Set text to default, uppercase, lowercase, or capitalize. Apply to all if needed.
Font: Pick a font style for the selected text
Font Size: Set the size of the text in pixels.
Line Spacing: Adjust the vertical spacing between lines of text.
Text Color: Choose a color for the text.
Text Above Product Card: Customize the appearance of the text displayed above product cards.
Product Price: Style the product price with font, size, and color settings.
Sale Price: Set a specific color to display discounted prices.
Arrow Color: Pick the color of arrows
Auto Load Videos (might be slower): Toggle this to load all videos automatically on page load. May affect performance.
Branching CTAs (For embeds and founder videos)
Tailor your branching call-to-actions to guide users through personalized experiences. Change button text, styling, and behavior to reflect your brand’s voice and drive better engagement.
Start Screen Text - Set the welcome message shown at the start of the widget. Only visible when Tolstoy is shared via link.
Border Radius - Control how rounded the buttons corners are.
Display Icons - Show or hide icons in the widget.
Icon Color - Choose the color of the icons.
Contact Form CTA Text - Edit the message that invites users to leave their details.
Contact Form Color - Set the background color of the contact form.