How to Manage a Playlist | Pages Section
- Integrate Bambuser Playlist on your website according to technical documentation here.
- Within the BamHub, navigate to the Pages section. You will see an overview of all the pages where you’ve embedded Bambuser Playlists code. Note: a page will only appear in the BamHub if it 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 automatically 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 the playlist you would like to work with and click on “Take control of this playlist” button.
- You can add videos manually in the Selected videos section or by tags in the Auto-selected by tags section.
- Reorder videos by dragging and dropping them to the desired position. Note: you can't re-order videos in the Auto-selected by tags section (these videos are ordered by recency).
- Multiple playlists can be displayed on the same page. Make sure to match the correct Playlist ID (found in Settings > Advanced Settings) with the corresponding playlist on your site. For more information about this read here.
Theming
The player can be themed and configured to showcase your unique brand identity. You are able, but not limited to configuring your logo, colors, icons, typography, UI, product cards, and images.
You can find extensive information about what and how you can configure the player by going here.
To access theming follow these steps:
- In the Shoppable Video product, go to Settings from the left-hand menu.
- Select Theming.
Note: to modify the layout or settings for specific playlists, navigate to the desired playlist and select Settings. For detailed information about this see the section below.
Player & Playlist Settings
You can easily customize how your shoppable videos appear on your website directly from the BamHub. For inspiration and examples of different layouts and settings please explore our demo website by going here.
Follow these steps:
- Go to the Pages section.
- Select the playlist containing the videos you'd like to customize
- Click on Settings in the right-hand menu. You'll then see four sections available for further customization.
Section 1: 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 B (Floating Action Button) layout places the video in a small overlay widget in the corner of the screen for convenient access. The Story layout places videos in a social media style stories bubble, its a popular layout for all types of pages, especially Product Detailed Pages.
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.
Soft limit: Determine the maximum amount of players that are shown in the playlist before it is expanded by the user.
Preview Player Settings
Show action card: Determine if you want to display Action Cards on your preview player.
Product card in video: Your videos will be displayed with the shoppable product card. You can choose the amount of cards that are displayed.
Product card layout: 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: 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.
Closed captions: Select this option so the closed captions for the selected video are visible when viewed within this specific configured playlist. To find out more about closed captions please read this article here.
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.
Title font size: If the video contains a title you can configure its size in the preview player.
Title line height: If the video contains a title you can configure its height in the preview player.
Product card padding: When the product card is shown, this parameter adjusts the distance from the edge of the product card to inner elements of the product cards (such as thumbnail and title).
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 distributed. 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 the Shoppable Video product.