> For the complete documentation index, see [llms.txt](https://shopvid.gitbook.io/shopvid-shoppable-video-reels/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shopvid.gitbook.io/shopvid-shoppable-video-reels/manage-widget/setting-up-widgets.md). # Setting up widgets ### **General** Widget ID /Widget snippet: * After completing all the neccessary settings and clicking **Save**, the Widget ID and Widget snippet will be generated and you can either copy Widget ID or Widget snippet to paste into your theme. * For older theme: you must use the snippet to manually place the app's code in yopur theme files. * For modern theme: you should be able to Add Block and paste the Widget ID. {% hint style="info" %} Mind you that, in the first time you set up a widget, an instruction modal will pop up and guide you through the theme editing! {% endhint %} Status: * Make sure to select Active for widget that you want to display on the storefront Widget name: * Name the widget for the ease of management * Widget name is a required field Font: * Choose a suitable font for all text within the widget here Block Title: * Block Title is displayed in the middle, above videos. * Input a descriptive Block Title to get more customers' attention Title color: * Choose a suitable color for the Block Title Title size: * Adjust the font side using the slider Video: * Based on your selection of display page, the setting of videos may differ. * For Product pages: * Click **Add products** * Browse your product or use search to find specific videos * Select products by clicking the checkbox * Click **Done** and view added products on the left side of the editor You can attach/detach videos by clicking `...` button > Edit attached videos * For Other pages: * Click **Video or Browse** * Browse your video library or use search to find specific videos * Select videos by clicking the checkbox on each thumbnail * Click **Done** and view added videos on the left side of the editor #### Auto Match Theme **Auto match theme** aligns your widget's colors with your live Shopify theme — no manual color picking needed. Found in **Manage widget** → open a widget → **General** tab. ### Step 1: Request unlock Click **Check my theme**. This sends a message to the support team to unlock the feature for your store. {/\* screenshot: General tab showing Auto match theme section with Check my theme button (locked state) \*/} ### Step 2: Sync your theme colors Once the support team unlocks the feature, the **Sync theme** button appears. Click it to apply your theme's color scheme to the widget. Click **Sync theme** multiple times to cycle through different color schemes from your live theme, then save when you find the right one. ### **Gallery View** Column number: * Adjust the number of column displayed {% hint style="info" %} Click Increase column range to contact us so we can add more column for you {% endhint %} Border radius: * Adjust border radius of the video frame using the slider Column Spacing: * Choose your prefered spacing options: * Extra small * Small * Medium * Large Title: * Adjust the Title size using the slider * Choose the maximum number of line to display title * Choose Title alignment To edit the title: * Go to Video section in General tab * Click `...` button >> Edit display title * Input the new title of your liking Product card: * By switching it on, you can choose a suitable template: * Overlay: Product card is displayed overlay the video * Icon: Same as Overlay, but a clickable icon button is also displayed * Text button: Same as Overlay, but a clickable, customizable text button is also displayed * Card outside video: Product card with icon button is displayed under the video frame * For templates with button, you can also customize: * For Icon button, Card outside video template: * Button background color * Button icon color * For Text button: * Button background color * Button text * Button text color Play Video: * None: Videos play only when clicked * Autoplay: Videos start playing when customers scroll to videos * Autoplay on Hover: Videos start playing when customers hover over them (this feature is not available on mobile) {% embed url="" %} {% hint style="info" %} **Enable sound while playing** {% endhint %} {% hint style="warning" %} On iOS Operating System, sound cannot play on the initial load in Preview mode. The video will play silently, and audio will start when navigating to the next video. {% endhint %} ### **Full Screen** Scroll type: * Horizontal: Customers can scroll left and right * Vertical: Customer can scroll up and down Replay Control: * On: Videos automatically restart after finishing * Off: Videos only play once Seek Control: * On: Customers can skip to different parts of the video * Off: Videos play from start to finish only Mute Control: * On: Shows mute/unmute button for audio control * Off: No audio control available to customers Like: * By switching it on, you can see how many customers like your videos * You can choose from 2 like icons Share: * By switching it on, you enable customers to share videos via multiple social platforms * You can choose from 3 share icons #### Full-Screen Layout Options Shopvid supports two full-screen video layouts for desktop. Go to **Manage widget** → open a widget → **Full Screen** tab → **Style** → **Fullscreen video layout**.
LayoutDescription
Video with product panelDefault. Product panel shown alongside the video.
Video onlyNew. Full-screen video without product panel. Clicking Add to cart opens a product detail sidebar on the right instead.
**Video only** has its own product card style settings — configure them below the layout selector before saving. ### **Product Settings** CTA Button * Button action: * Add to cart: Only add product to cart when customers click button * Open product detail page: Redirect customers to product detail page when clicking button * Add to cart and open cart page: Add product to cart and open cart page when customers click button * Button text: Adjust the text you want to appear on the button (e.g., "Shop now"). * Button text color: Choose color of your liking for the button Style * Layout: Choose how products are displayed, 2 options available: * Grid: Display 2 products displayed per row * List: Display 1 product per row * Heading text: Customize the title that appears above your products (e.g., "Product seen in the video"). Product Card * Product name: Adjust the font size of the product titles * Product name color: Select a suitable color for product title text * Price: By switching this on, your product price is displayed * Price display: Choose whether to show the current price only, or both the current and "Compare-at" price. * Styling: Customize the size and color for both the current price and the compare-at price (usually used to highlight discounts). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://shopvid.gitbook.io/shopvid-shoppable-video-reels/manage-widget/setting-up-widgets.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.