How to Manage a Playlist | Pages Section
- Integrate Bambuser Playlist on your website according to technical documentation HERE.
-
Within BamHub, navigate to the Pages section. You will see an overview of all the pages where you’ve embedded Bambuser Playlists code.
Note that a page will only appear in BamHub if it has had at least one visitor after embedding the Bambuser Playlist. - In the Pages section, click on the page where you want to modify your playlists.
- The page will display as many playlists as you’ve added on your page.
- Videos can either be distributed manually or, for PDPs specifically, distributed automatically. Read more about automatic video distribution here.
- To add videos manually, click on “Take control of the playlist” button.
- Add videos manually in the Added by video field or by tags in the Added by tag field.
- Reorder videos by dragging and dropping them to the desired position.
- Multiple playlists can be displayed on the same page. Make sure to match the correct Playlist ID (found under Settings) with the corresponding playlist on your site. Read more HERE.
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.
Product card behavior
Choose the behaviour when a shopper clicks on a product card in the preview player.
Choose between the following options:
No action: Nothing happens when the shopper clicks the product card in the preview player
Open player: Player opens without showing product details
Open player and product (default): The player maximizes and product details are shown
Open product in a pop-up modal: Product details will appear as a pop-up modal
Open product in a drawer: Product details will appear in a drawer from the side
Open product in a new tab: The Product Detail Page (PDP) opens up to the product in a new tab
Open product in the current tab: The Product Detail Page (PDP) opens up to the product in the current tab
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 Bambuser playlist will be automatically distrubuted. Read more here.
Playlist Id
Update the playlist ID here. Ensure that any changes to the playlist ID are also reflected in the corresponding code.
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.