Shoppable Video Overview TapcartUpdated 2 months ago

Intended Audience: Ecommerce Managers, Developers, Content Managers using Tapcart

Purpose: This guide walks you through how to embed shoppable video carousels and educational video bubbles from LyveCom into your Tapcart mobile app using Custom Blocks — so you can increase engagement, enhance product storytelling, and boost conversions.

Why Shoppable Videos with Tapcart Matter

Integrating LyveCom videos into your Tapcart storefront helps create a dynamic, on-brand shopping experience. Whether you’re showcasing a collection or adding helpful product context, these videos drive discovery and sales.

Before You Begin

✅ Make sure your Tapcart plan supports Custom Blocks.
🔍 Not sure? Check out Tapcart’s Custom Blocks article here!

Step 1: Create a Custom Block in Tapcart

1. Log in to your Tapcart Builder

2. Navigate to Custom Blocks

3. Click Create New Custom Block

4. Open the Custom Block Code Editor

Step 2: Add Code in the HTML, CSS & JavaScript Tabs

🔧 HTML Tab

Paste this into the HTML tab:

1htmlCopyEdit<!-- HTML -->
2<div id="lyvecom">
3  <div class="lyvecom_carousel--component"></div>
4</div>
5<!-- END HTML -->
6

🎨 CSS Tab

Paste this into the CSS tab:

1cssCopyEdit* {
2  box-sizing: border-box;
3  padding: 0;
4  margin: 0;
5  font-family: Helvetica;
6}
7
8h1 {
9  margin: 10px 0px;
10}
11
12.container {
13  display: flex;
14  flex-direction: column;
15  justify-content: center;
16  align-items: center;
17  aspect-ratio: 1;
18  margin-top: 20px;
19}
20

⚙️ JavaScript Tab

Paste this into the JavaScript tab:

1javascriptCopyEditfunction injectLyveComWidgetScript() {
2  var scriptElement = document.createElement('script');
3  scriptElement.src = 'https://dashboard.lyvecom.com/widget/widget.js';
4
5  scriptElement.onload = function() {
6    LyveComWidget.mountCarouselComponent({
7      carouselID: 'CAROUSEL OR BUBBLE ID', // ← Replace with your actual Playlist ID
8      parentElement: '.lyvecom_carousel--component',
9      carousel: true,
10      lng: 'en'
11    });
12  };
13
14  window.document.addEventListener('FullLyveComOpen', () => {
15    document.getElementById('lyvecom').style.height =
16      `calc(${Tapcart.variables.device.windowHeight || 750}px - 80px)`;
17    Tapcart.actions.scrollToBlockTop();
18  });
19
20  window.document.addEventListener('FullLyveComClosed', () => {
21    document.getElementById('lyvecom').style.height = 'auto';
22  });
23
24  document.head.appendChild(scriptElement);
25}
26
27injectLyveComWidgetScript();
28

🔁 Don’t forget:

• Replace 'CAROUSEL OR BUBBLE ID' with the actual Playlist ID from your LyveCom Dashboard.

• Use the “Copy ID” button when publishing your playlist to grab it easily.

Step 3: Add the Custom Block to Tapcart Pages

📱 For Carousels:
Add the custom block to Home, Collection, or any promotional screen.

📦 For Bubbles:
Add the custom block to Product Pages to showcase short-form, educational videos next to products.

Have more questions? Reach out to our support team - we’re happy to help!

Happy selling! ✨