How to create a widget and embed it on your store – Videowise

This guide walks through creating a widget exactly in the order you see it happen in Videowise, from start to finish.

It applies to all widget types, using Quickshop Carousel as a concrete example.

Create and Choose a Widget Type

In the left navigation, go to Shoppable → On-site widgets

Click New widget (top right)

Select the widget type you want to build (in this example we’ll be using the Quickshop carousel)

Confirm you’re creating the correct widget type

What this step defines:

The layout structure of your widget (carousel, grid, pop-up, stories, etc.)

Which design and player options will be available later

Choose Where You Want to Use the Widget

A modal appears asking: Where do you want to use this widget?

You must choose one of the following:

Home & Other Pages

Choose this if:

The widget will live on the homepage

The widget will live on collection pages

The widget will be embedded on custom pages

How it works:

You manually choose which videos appear

The same set of videos shows wherever the widget is embedded

Best for discovery, inspiration, and merchandising

Use cases:

Homepage carousels

Editorial or campaign sections

Landing pages

Product Pages (PDP)

Choose this if:

The widget should appear on product detail pages

You want videos to automatically change per product

How it works:

The widget is automated

Videos are shown based on which videos are linked to which products

Each product page displays only the videos tied to that product

You do not manually select videos per page. Videowise automatically pulls the right videos based on product associations.

Use cases:

PDP conversion widgets

“See it in action” product videos

UGC and reviews on product pages

Choose a Playlist Type

This step defines how Videowise selects which videos appear in your widget.

Before anything else, we recommend choosing one playlist type.

The playlist type determines whether you manually add videos or let Videowise select them automatically based on product-video associations.

When setting up the widget, you can choose between:

Simple playlist

Advanced playlist

Simple Playlist

Choose Simple playlist if you want full manual control over which videos appear.

How Simple Playlist Works

You manually select videos from your library

The widget shows exactly the same videos everywhere

The playlist is static

What You Do in This Mode

Videowise opens your video library

You select the videos you want in the widget

You can:

Reorder videos

Add or remove videos at any time

Best Use Cases

Homepage widgets

Campaign or editorial sections

Curated video collections

Landing pages

In Simple playlist mode, videos are chosen manually and never change automatically.

Advanced Playlist

Choose Advanced playlist if you want an automated widget, usually for product pages.

How Advanced Playlist Works

Videowise automatically selects videos based on product–video associations

Each product page shows only the videos linked to that product

In Advanced playlist mode, videos are never added to the widget directly. Video selection is entirely driven by product mapping.

What You See in Advanced Playlist Mode

Instead of a video picker, you see a product–video mapping view.

This view lets you:

Search for products or SKUs

See which videos are linked to each product

Add or remove videos at the product level

What You Do in This Mode

Search for a product or SKU

For that product, choose which videos are associated with it

Repeat for other products as needed

What Videowise Does

On each product page:

Videowise checks which videos are linked to that product

Only those videos are shown in the widget

The widget updates automatically as product–video links change

Example:

Product A → shows videos

Product B → shows videos

Product C → shows no videos (widget does not appear)

Best Use Cases

Product detail pages (PDPs)

Large catalogs

“See it in action” sections

UGC and review-driven shopping

Advanced playlists scale automatically and require no per-page setup.

Widget Design

You are now inside the widget editor. In the left sidebar, click Widget design.

This section controls what shoppers see before they open any video (carousel layout, buttons, thumbnails, etc.).

Buy Button (Widget-level)

Open Widget design → Buy button

Switch between Desktop and Mobile (configure both)

You can edit:

Buy button style

Icon button (small + button style)

Text button (e.g., “Add to cart”)

Colors and shape

Icon/text color

Background color

Corner radius (roundedness)

Border on/off

Buy button behaviour

Choose what happens when shoppers click the buy button:

Open product details (keeps the shopper inside the experience)

Go to product page

Go to checkout (fastest path, use carefully)

Click Save when finished.

Navigation Arrows

Open Widget design → Arrows

Switch between Desktop and Mobile

You can edit:

Toggle Navigation arrows ON/OFF

Arrow style (icon and container style)

Arrow color

Arrow position (e.g. bottom center)

Arrow background color and opacity

Click Save when finished.

Use this when:

Your widget contains multiple videos

You want clearer navigation on desktop

You want to guide users through carousel content

Heading Text

Open Widget design → Heading text

Switch between Desktop and Mobile

You can edit:

Toggle Include heading text ON/OFF

Toggle Include subheading text ON/OFF

Alignment (left / center / right)

Font sizes (heading/subheading sizing controls)

Click Done when finished.

Use this when:

You want a clear title like “Shop best sellers”, “Seen on TikTok”, “Customer favorites”

You want the widget to feel like a structured section of the page

Thumbnails

Open Widget design → Thumbnails

Switch between Desktop and Mobile

You can edit:

Thumbnail type

First video frame

Custom thumbnail

Corner radius (rounded vs sharp edges)

Border ON/OFF

Click Done when finished.

Use this when:

You want control over how videos look before they’re opened

You want consistent visual styling across widgets

You’re running curated or campaign-based content

Settings (Layout + Positioning)

Open Widget design → Settings

Switch between Desktop and Mobile

You can edit:

Widget background

Auto background (inherits site/theme behavior)

(If available) choose a custom background style

Product position

Under the thumbnail

Best for clean layouts and clear product association

Over the thumbnail

Best when you want product info to feel “overlay / shoppable feed”

Spacing

Padding/margin-style spacing controls (per side)

Gap between items (for carousels/grids)

Carousel autoscroll

OFF for user-controlled browsing

ON when you want a more “animated” discovery feel

Display social creator name

OFF for brand-only presentation

ON for UGC-style content (shows creator attribution where available)

Click Save when finished.

Player Design

Click Player design in the left sidebar.

This section controls the in-video shopping experience, including add to cart, product details, ratings, and purchase behavior.

If you see “Preview not available until you add products to your first video,” make sure at least one video has a product linked.

Buy Button (Player-level)

Open Player design → Buy button

You can edit:

Buy button behaviour

Direct to cart

Other available options depending on widget/player

Button text and icon

Text label (e.g. “Add to cart”)

Icon style

Quantity selector

ON: shopper can choose quantity in the player

OFF: default single-quantity behavior

Primary button

Toggle ON/OFF

Customize text color, background color, border, and corner radius

Secondary button

Toggle ON/OFF (use sparingly for secondary actions)

Click Done when finished.

Use this when:

You want to control how quickly shoppers can purchase

You want to optimize the in-video add-to-cart experience

Product Details

Open Player design → Product details

You can edit:

Product details colors

Product name color

Price color

Pricing display

Hide old price (compare-at price)

Ratings

Toggle Display product ratings ON/OFF

(requires a review app integration)

Stock info

Toggle Include product stock info ON/OFF

Customize colors for in-stock and out-of-stock states

Shipping info

Toggle ON/OFF (if supported by your setup)

Recommended products

Toggle ON/OFF

Exclude products by ID (e.g. bundles or irrelevant SKUs)

Display product details

Toggle ON/OFF (shows or hides the entire product info block)

Click Done when finished.

Use this when:

You want to control how much product detail is shown in-video

You want to balance clarity with a clean, distraction-free player

You want to reinforce trust with ratings and availability info

Subscriptions

Open Player design → Subscriptions

Toggle Enable subscription payments ON/OFF

You can edit:

Include one time purchase (show one-time purchase alongside subscription)

Section label (e.g. “Frequency”)

Subscription title (e.g. “Subscribe & Save”)

Discount

Discount label (e.g. “SAVE”)

Text color

Background color

Secondary text

Supporting line (e.g. “Skip, modify or cancel any time.”)

Text style (weight) and color

Click Save when finished.

Use this when:

You sell subscription products and want shoppers to subscribe directly from videos

You want to control subscription messaging, trust text, and discount styling inside the player

Player Settings

Open Player design → Player

You can edit:

Video sound

Toggle Mute sound when video starts ON/OFF

Shoppable product button

Button label (e.g. “View products”)

Text/icon color

Background color

Corner radius

Border ON/OFF (and border color/width)

Click Done when finished.

A/B Testing

Click A/B testing in the left sidebar.

This section helps measure performance with Videowise vs without Videowise.

Click Turn A/B testing on.

Didn't find what you were looking for? Talk to our support team via email.