The Bambuser player can be themed and configured to showcase your unique brand colors, logo, and images. 

The information below applies to you if you’re getting started with Bambuser or if you are currently using the new player. 

If you are an existing customer and looking to change your theming for the old player, please contact your Customer Success Manager directly. 

Player Design Process

Design your player following these short steps:

1. Explore the Bambuser Theming Guide Book below
2. You can efficiently make changes to your theming directly in your Bam Hub. In the Bam Hub, go to Settings and Theming to make changes. Effortlessly preview your theme adjustments by using the Preview button before finalizing and publishing the changes.

Explore the Bambuser Theming Guide Book - Theming_guide_book_2023_version_1.2.pdf

Multiple Theming

This feature is exclusively available for the Bam Player. Still on the Standard Player? Read this guide on how to easily switch.

You also have the power to seamlessly switch between different themes for your shows, giving you the flexibility to tailor each experience to your specific needs or audience. Whether it's showcasing different products, running specific campaigns, or adapting to seasonal changes, you have the flexibility to tailor your theming accordingly. This enhancement is designed to elevate viewer engagement and provide a more personalized experience than ever before.

How to Get Started

1. Click Theming under Settings in the left menu
2. Click NEW THEME in the upper right corner
3. Assign a name to your theme
4. Click CREATE THEME to proceed
5. This will open up Self-Serve Theming - follow the instructions to create a theme

How to Enable Themes

1. Go to show setup of a show
2. Open Player theme dropdown
3. Select the theming you to choose for your show

Theming Settings

You can effortlessly adjust the appearance of your shows or videos in your Workspace to match your brand identity. To do this, go to the Settings option on the left-hand menu, select Theming, and choose your current theme. 

Here, you can modify your settings, and any changes you make will be applied immediately to the way your products are displayed. On the right side of the Settings page, a demo video will show, providing a preview of how the options you choose will appear in the player.

See the settings you can adjust below, along with detailed information on each.

Assets

Logo

In the upper left corner of the stream, you can display your brand icon. Simply click Upload Image to upload your logo. Please note that the frame dimensions are 48x48 pixels and the maximum file size is 1.5 MB.

Icons

The icons that the shoppers can click on to interact with the show, such as the like button, add to cart, etc., can easily be replaced with your own brand icons. Simply click Upload Image and upload your own icons, which will then be visible in your shows. Please note that the icon should be 24x24 px and, for best results, upload white icons in SVG format. The maximum file size is 1.5 MB. 

Button

In the Button section, you can customize the appearance of all buttons that shoppers interact with in the player, including button color, text color, border color, border width, and border radius.

Curtain

The curtain serves as the image placeholder that is visible to viewers before or after the show. You can also add a curtain to display during the show, which appears if the show is paused, for example, due to a technical issue. 

Colors

You can update the background color of the curtain. If you add an image to the curtain, it will cover the top half of the screen, leaving the background color visible on the lower half. You can also customize the text color and error message here.

Logo

You can add your own logo to the curtain image. We recommend a logo size of 80x50 pixels. The maximum file size is 1.5 MB.

Image before

This image will be displayed before the show begins. For best results, use a 3:2 landscape ratio. The image center won't be cropped. The maximum file size is 1.5 MB.

Image pause

This image will be displayed during the show if it is paused for any reason. For best results, use a 3:2 landscape ratio. The image center won't be cropped. The maximum file size is 1.5 MB.

Image end

This image will be displayed after the show has ended. For best results, use a 3:2 landscape ratio. The image center won't be cropped. The maximum file size is 1.5 MB.

Colors

Here, you can customize all the colors visible in your player.

Typography

In the Typography section, you can customize the font, size, and other text settings for your shows and videos.

Player Settings 

Mobile highlight 

Placement

You can choose where on the screen your product highlight appears - either at the top or bottom. This feature helps ensure that product highlights don't obstruct products that are typically positioned higher or lower in the frame.

Style

Select whether your product highlights should appear in solid white or blurred grey. This choice allows you to control how much attention the product highlight draws.

Hide pricing

In your product highlights, you can choose whether or not to display your products’ price.

Show highlights as thumbnails only

On mobile, you can enable product highlights to be displayed as thumbnails only. This allows you to showcase more products simultaneously, increasing upsell and conversion opportunities.

Chat

Chat style

Decide whether chat messages should appear directly on the stream or within separate chat bubbles.

Style for moderator messages

Check this box if you want your messages to stand out from the viewers' chat messages. This option is helpful for ensuring that your company's messages are easily identifiable and for allowing moderators to track questions in a busy chat.

Background color of moderator messages

In addition to differentiating your messages from the ones sent by viewers, you can also select a specific color for your messages to align with your brand identity.

Product image

Image aspect ratio

Image sizing

Based on the size and format of your product images, you can adjust the way they display in the product highlights by modifying the image aspect ratio and sizing.

Misc 

Corner style

In the product highlights, you can choose whether the product image should have rounded or straight corners.

Highlight text alignment

If there's enough space in your product highlight - such as when pricing is hidden - you can choose to align the product text either in the center or at the top of the highlight.

Color swatch shape

For products available in multiple colors, shoppers can select their preferred color from the product information that appears when they click on the product highlight. Depending on your product hydration setting, color options may be shown as text or as round or square swatches. If you choose swatches, you can select their shape here.

Disable font feature settings

If your chosen font has variations you wish to exclude, simply check this box to make the adjustments.

Highlight display style

On desktop or wide-layout devices, highlights appear on the right side of the screen. You can choose whether the highlighted products should be displayed as a list or as separate product cards.

Cart button style (Wide layout only)

For desktop or wide-layout devices, you can customize the appearance of the cart button. It can be displayed as an icon or as written text within a button.

Always show sticky panel in product view 

When a shopper clicks on a product and its information appears, you can choose to keep the shopping panel sticky - so it remains visible while scrolling - or have it disappear after a while. 

Timestamp link icon style

Hide timestamp link border

When adding a show to a product detail page (PDP) that will appear as recorded, a timestamp will be shown in the product information. You can customize the play button's appearance, choosing between a filled or outlined style, as well as adjusting the border style.

Translations

The language visible within your player can also be customized directly in Settings from your Bambuser web app. 

How to add, edit and set default languages for the player:

1. To manage translations, go to Translations under Settings in the left-hand menu of your Bambuser web app. 
2. There will be one default language. To add more languages, click + Language in the top right corner and select as many as you wish to offer your shoppers.
3. To set a default language, click the three dots next to the desired language and select Set as Default. 
4. You can view and customize the text for each language by clicking on it within the list, allowing you to tailor the translations as needed.

Additional information

• Default language: When you set a default language, it will be used across your products, but you can choose different languages for your shows, videos and calls. You can only choose one default language per product, but you can add any additional languages of your choosing to your list of available translations. 
• Personalized experience: If a shopper's browser is set to one of the available languages (or locale), their video commerce experience will be personalized accordingly. If their browser is set to a language that is not on your list, the default language will be shown.
• Save & Publish: For Digital Clienteling, saved edits will appear in the product immediately. For Social Commerce, it may take up to an hour for changes to be visible.
• Screenshots: When customizing translations, clicking on the key you want to translate will display screenshots that help you visualize where the text appears in the product.