Here, you can manage where your videos will be displayed on your site once you have integrated the web component.
Video Demo | Display your Shoppable Videos
- Navigate to the Pages section - here you will also see an overview of all your pages which you have created in your Bam Hub or in the code and have the Web Component added to them.
- Click + Page in the upper right corner to add a new page to the overview.
- A pop-up will appear where you can search for pages on your site where the web component is already integrated or manually add a page where the web component is or will be integrated. Please note the page needs to have received at least one view to show up on the list.
- Click on the page you want to add to the overview or manually add and click DONE.
How to Create a Playlist | Pages Section
- In the Pages section, click the page where you’d like to place your playlist. Please note, you can only add videos to a playlist after you have uploaded them into the Bam Hub in the Videos section.
- When you’ve clicked on a page, you will see all your playlists on that page.
- You can either click on a playlist to manage it or click + Playlist to create a new one.
- Add videos manually in the Added by video field or by tags in the Added by tag field.
- Reorder your videos by dragging and dropping them to the desired position.
- Multiple playlists can be displayed on the same page. Ensure you match the correct playlist ID, which you can find under Settings, with the corresponding web component on your site.
Under settings, you can configure how you want the videos to be displayed on your site:
-
With or without a product card
- You can decide if you want to have the shoppable element on your video or not.
-
Play on hover or Autoplay
- Enable either videos to be played when hovering over or as soon as entering the site.
-
Loop
- Toggle if you want your videos to loop and be in constant replay mode.
-
Play as a carousel or as a single video when in full-screen mode
- You can decide if you want to showcase your videos in a carousel where the shopper easily swipes to the next video, or only showcase one video in full-screen.
-
Display in a row or grid view
- Enabled your videos to be displayed either in a single row or in multiple rows (grid).
Theming
You can fully customize the appearance of your videos using Theming options, giving you complete control over how your content is presented.
How to personalize the look and feel of your shoppable videos:
- In the Shoppable Video product, go to Settings from the left-hand menu.
- Select Theming.
- Customize the overall look and feel of your videos, including icons, product cards, button colors, UI, and typography.
- To modify the layout or styling for specific playlists, navigate to the desired playlist and select Settings.
Player & Playlist Settings
You can easily customize how your videos appear on your website directly from the Bam Hub. Simply go to the Pages section, select the playlist containing the videos you'd like to customize, and click Settings in the right-hand menu. You'll then see four options available for further customization.
Playlist Settings: Personalize video behavior within a playlist by enabling features like autoplay for seamless transitions between videos, or playback on hover for instant previews.
Preview Player Settings: Manage how videos are played in preview mode before being clicked, allowing for tailored viewing experiences.
Styling: Personalize the appearance of your videos.
Advanced Settings: Adjust video settings in alignment with your website’s code for greater control and seamless integration.
Playlist Settings
Autoplay
Play on hover allows videos on your website to start playing when a user hovers over them, while Autoplay automatically starts the videos as soon as the user lands on the page.
Layout
Changing the layout will modify how videos appear on your website. The Row layout displays videos in a single horizontal line, with users scrolling to view more if space is limited. The Grid layout stacks videos, creating additional rows when necessary. The FAB (Floating Action Button) layout places the video in a small overlay widget in the corner of the screen for convenient access.
Player fit
If your videos have varying sizes, you can choose from several options to standardize their appearance. Same Width resizes all videos to have equal width, while Same Height adjusts them to share the same height. The default size is set to a 9:16 format, with dimensions of 250px width and 444px height. Alternatively, you can specify custom sizes in the code or via the Player Width/Player Height settings. The Exact Size option maintains the size defined in the code or player settings, while Fill Parent ensures the video fills the entire container (referred to as div in the code).
Focus mode
Select how videos behave when a user taps on them. Options include Carousel, where the tapped video expands and display the entire playlist in a scrollable carousel (vertically on mobile, horizontally on desktop); Single Video, which enlarges and plays the video individually on a bigger screen; Click to Pause, where tapping only pauses the video without expanding it; and Disabled, allowing you to implement custom behaviors, such as directing users to another page, by adding your own code.
Zoom in on hover
Enable or disable the player zoom effect that activates when the mouse cursor hovers over it.
Player alignment
Set the alignment of videos within the playlist by choosing from Left, Center, or Right positioning.
Preview Player Settings
Product card in video
Your videos will be displayed with the shoppable product card by toggling this option.
Product card mode
If product cards are enabled for your videos, you can customize their appearance with the following options: Product Info and Thumbnail (Responsive), which displays both the product information and image but adjusts the content if space is limited; Thumbnail Only, which shows only the product image; and Always Show Product Info and Thumbnail, which ensures both the product information and image are always visible.
Landscape in portrait
When viewing a landscape video on a portrait screen, you can choose how the video should behave: Fit, where the video maintains its landscape orientation and may have black bars on the top and bottom, or Fill, where the video is cropped to fill the portrait frame.
Show video titles
Enable or disable the display of the video title on the video itself.
Wrap long titles
If the video title is long and you want it to be visible on the video, you can enable text wrapping to display the title on multiple lines.
Show poster when video is paused
When a video is paused, you can choose to display the poster image rather than the current frame.
Start muted
You can choose to have the videos start with the sound muted by default.
Loop
Enabling loop mode will make your videos play automatically in a continuous loop.
Styling
Corner radius
Adjust the corner radius in pixels. A higher number will create more rounded corners for your videos.
Player width
Specify the width of the preview player in pixels. This determines the size of the video preview on your website before user interaction.
Player height
Specify the height of the preview player in pixels. This affects the size of the video preview on your website before user interaction.
Player overlay font family
Choose the fonts to be displayed on the player.
Player overlay font weight
For the preview player, set the text boldness by specifying a value; a higher number results in bolder text.
Thumbnail size
Decide the size of the thumbnail on the product card: small, medium, or large.
Player placeholder color
Choose a placeholder color that will be displayed before the video or poster image appears..
Playlist gap
Set the amount of space between videos within the same playlist.
Playlist carousel corner radius
If the playlist is displayed as a carousel, adjust the corner radius of the carousel elements.
Advanced Settings
Bam Hub controlled
When this option is turned off, the web component will follow its own configuration settings.
Playlist Id
Update the playlist ID here. Ensure that any changes to the playlist ID are also reflected in the corresponding code.
Technical Support
If you have technical questions or need support, please email us at support@bambuser.com or click on "Contact Support" in the upper right corner of this page.
Next Step
Now that you’ve learned how to create, add products, and display your shoppable videos, head to the next section to explore all the powerful features that come with Shoppable Video.