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.

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!

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.

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

Click Increase column range to contact us so we can add more column for you

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)

Enable sound while playing

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.

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.

Layout	Description
Video with product panel	Default. Product panel shown alongside the video.
Video only	New. 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).