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
-
Log in to your Tapcart Builder
Navigate to Custom Blocks
Click Create New Custom Block
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
2<div id="lyvecom">
3 <div class="lyvecom_carousel--component"></div>
4</div>
5
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! ✨
Was this article helpful?