The Shop the Look widget lets you pair a background video with product cards to highlight outfits, collections, or any curated look, all in a stunning full-width layout.
Create a Shop The Look widget
To get started, head over to the Videowise dashboard > Video Commerce > Widgets. Click on Create widget on the top right to open the list of Videowise widgets available.
On the left sidebar, under "Single Widgets", locate our "Shop the Look" widget, and click on "Use this widget".
The configuration is fairly simple and broken down into 3 parts:
Video background
Products
Widget design
Let's dive into it.
Add a video background
This is the main part of our widget, where you will be able to display an autoplay background video. Click on "Add video background" to browse through your video library and choose the video of your choice.
The chosen video will automatically fit to the width, whether you are choosing a vertical or a landscape format video.
Select products to feature on Shop The Look
The next step is to display products, whether it's for an outfit or to showcase a collection.
To publish the widget, you will need to choose a minimum of 2 products to be featured.
On the left sidebar, click on Products, and then click on "Add products". This will open a modal with your Shopify products, where you'll be able to select the ones you want to feature.
Click on "Done" once happy with your choice.
We will display a preview of the discount/highlighted color that you can set up at the next step. Rest assured that this is just a preview and will depend on what has been set up in your Shopify admin. If you have no discounts set up, this won't be displayed.
Design your widget
The Shop the Look widget will let you:
Add a background color: this will be displayed behind your product cards, with a transparent gradient (from right to left). Select from a tooltip or copy and paste your brand colors directly.
Set a highlight color: this will be used for any special offers/discounts on your products (set on the Shopify admin).
Set a border radius for the product cards displayed.
Set a main title: it can be turned on and off, and you can control its size, color, and style. It can also be customized with custom CSS classes.
Set a subtitle: it can also be turned on and off, and you can control its size, color, and style. It can also be customized with custom CSS classes.
The read more button will start displaying once the description goes above 64 characters.
Publish a Shop the Look Widget on your store
If all looks good, hit "Publish on site" on the top right of the page, and copy the Videowise code to paste it into the Shopify theme editor.
This is how it should look once you publish it on your store. All the product cards are clickable and link to the product directly.
