AI Widget Prompt & Design Guide

Make your Tolstoy widgets look and work exactly how you want using simple AI prompts!
​

With Tolstoy's AI Widget Builder, you can customize your widget's design, layout, colors, fonts, video appearance, and functionality just by describing what you'd like to change in the AI chatbox. No coding experience is needed for basic customization.

Below are ready-to-use prompts you can copy, paste, and adjust to match your store's branding and preferences.
​

Tip: You can also upload screenshots or share a website URL as a design reference to help the AI understand the look you're trying to achieve.

Use these prompts to adjust your widget's overall appearance, dimensions, and positioning.
​

Make my widget smaller and more compact without affecting the video quality.

Make the widget take up 100% of the available page width on desktop.

Reduce the spacing between each video card to 8px.

Display 5 videos per row on desktop and 2 videos per row on mobile.

Center the widget horizontally on the page and keep the spacing equal on both sides.

Add 20px padding around the widget and maintain consistent spacing between all elements.

Align all video cards to the left instead of centering them.

Make all video cards have rounded corners with a border radius of 12px.

Match your Tolstoy widget to your store's visual identity.

Change the widget background color to white (#FFFFFF).

Make all buttons black with white text. When hovered, change the button background to dark gray.

Use Arial as the font family for all text inside the widget.

Make the widget heading 24px and the product descriptions 14px.

Make all headings black and descriptions dark gray.

Match my widget's fonts, colors, buttons, and overall styling to my website: [Insert your website URL].

Use the attached screenshot as a design reference. Match the video card size, spacing, colors, and overall layout as closely as possible.

Add a thin light-gray border around each product card.

Add a subtle shadow behind each video card to create a clean, modern appearance.

Customize how your videos look before shoppers click or interact with them.

Make all video thumbnails smaller while maintaining their original aspect ratio.

Change my video thumbnails from rectangular to circular.

Display all video cards in a 9:16 vertical aspect ratio.

Make sure video thumbnails fill their containers without stretching or distorting the content.

Make the play button smaller, white, and positioned in the center of each video.

Remove the video titles underneath each thumbnail.

Limit video captions to a maximum of 2 lines and truncate longer text with an ellipsis.

When a shopper hovers over a video thumbnail, slightly enlarge the thumbnail with a smooth transition.

Create a responsive experience that looks great on any device.

Display 2 video cards per row on mobile while keeping 5 cards visible on desktop.

Make video thumbnails smaller on mobile screens without changing their desktop size.

Reduce the spacing between video cards on mobile to 6px.

Optimize my widget for mobile devices. Make sure all videos, buttons, and text fit properly without horizontal overflow.

Reduce the widget heading font size to 18px on mobile while keeping it 28px on desktop.

Hide the widget heading on mobile devices but keep it visible on desktop.

On mobile, display video cards in a horizontally scrollable carousel instead of stacking them vertically.

Customize how your Homepage Carousel or other carousel widgets display videos.

Add left and right navigation arrows to my carousel.

Make the carousel navigation arrows circular with a white background and black icons.

Automatically move to the next video in the carousel every 5 seconds. Pause when the shopper interacts with it.

Make the carousel loop continuously so shoppers can keep browsing videos.

Reduce the gap between carousel videos to 10px.

Change the carousel heading to "Shop Our Favorites" and center it above the videos.

Hide the navigation arrows on mobile and allow shoppers to swipe through videos instead.

Customize the appearance and behavior of video stories on product pages.

Make the PDP Story thumbnails 60px in diameter on mobile and 80px on desktop.

Change the PDP Story thumbnails from circles to rounded squares.

Add a 2px black border around each story thumbnail.

Add 12px spacing between each story thumbnail.

Display short labels beneath each PDP Story thumbnail using a 12px font.

Remove the text labels underneath my PDP Story thumbnails.

Position the PDP Stories below the product title and above the product price.

Change the border color of watched stories to light gray while keeping unwatched stories black.

Control what shoppers see when they open and watch videos.

Make the video player occupy 80% of the screen width on desktop.

When shoppers click a video thumbnail, open the video in a full-screen player.

Make the video player's close button larger and position it in the top-right corner.

Change the background behind the video player to black.

Show the play, pause, mute, and unmute controls in the video player.

Automatically play the first video when the video player opens.

Start all autoplay videos muted and allow shoppers to turn on the sound manually.

Close the video player when a shopper clicks outside the video area.

Customize the shopping experience inside your videos.

Change the Add to Cart button background to black, with white text and rounded corners.

Replace the "Add to Cart" button text with "Shop Now".

Display the product image on the left and the product title, price, and Add to Cart button on the right.

Make product prices bold and use a 16px font size.

Hide product descriptions and display only the product name, price, and Add to Cart button.

Make the Add to Cart button fill the entire width of the product card.

When a product is out of stock, disable the Add to Cart button and display "Sold Out".

Control where and when your widgets appear.

Show this widget only on collection pages and hide it from the homepage and product pages.

Show the widget only after a shopper scrolls halfway down the page.

Hide this widget on mobile devices but keep it visible on desktop.

Display this widget only on mobile devices.

Display the widget 3 seconds after the page finishes loading.

Position the floating widget in the bottom-right corner of the screen with 20px spacing from the edges.

Make sure my floating widget does not overlap the website's chat button or other important elements.

You can also ask the AI Widget Builder to help customize how shoppers interact with your videos and store.

These examples may require theme-specific functions, custom events, or additional configuration. Replace the sample names with the functions and events used by your website.

When a shopper clicks Add to Cart, add the item using my theme's cart functionality and automatically open the cart drawer. My theme uses window.theme.cart.addItem(variantId, quantity) and window.theme.cart.open().

When a shopper clicks a product inside my widget, open my store's quick view instead of navigating to the product page. My quick view uses a "quickview" event with the product URL in its detail.

On product pages, open the Tolstoy video player in full screen when a shopper clicks my "Watch Videos" button with the ID "watch-videos".

Automatically close the full-screen video player when my store's cart drawer opens so shoppers can view their cart.

Push events to my Google Tag Manager dataLayer when a shopper plays a video, clicks a product, or adds a product to the cart. Use the event names tolstoy_video_play, tolstoy_product_click, and tolstoy_add_to_cart.

Make sure my widget works with my store's existing cart drawer and product quick view without replacing or breaking their functionality.

For the best results: