Creating a 'For You' PageUpdated 2 months ago

Platform: Tapcart

Purpose: Use this guide to embed an interactive, endlessly scrolling “For You” video carousel in your Tapcart app, driving engagement with personalized content.

Intended Audience: Ecommerce Managers, CSMs

Create an Endless Scroll “For You” Page in Tapcart

Before you begin:
Make sure your Tapcart plan supports Custom Blocks. If you're not sure, refer to Tapcart’s Custom Blocks Introduction.

Step 1: Create a New Custom Block

1. Open the Tapcart Builder.

2. Navigate to Custom Blocks.

3. Click Create New Custom Block.

4. Open the Custom Block Code Editor for your new block.

Step 2: Insert Code into the Editor Tabs

The editor has three tabs: HTML, CSS, and JavaScript. Follow these instructions carefully.

HTML Tab

Paste this code into the HTML section:

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

CSS Tab

Paste the following CSS into the CSS section to style your carousel container:

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 JavaScript to inject and mount your endless scroll carousel:

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 ID',
8            parentElement: '.lyvecom_carousel--component',
9            carousel: true,
10            openedByDefault: true,
11            lng: 'en'
12        });
13    };
14
15    window.document.addEventListener('FullLyveComOpen', () => {
16        document.getElementById('lyvecom').style.height =
17            `calc(${Tapcart.variables.device.windowHeight || 750}px - 80px)`;
18    });
19
20    window.document.addEventListener('FullLyveComClosed', () => {
21        document.getElementById('lyvecom').style.height = 'auto';
22    });
23
24    document.head.appendChild(scriptElement);
25}
26
27// Call the function to inject the script
28injectLyveComWidgetScript();
29

|| Replace 'CAROUSEL ID' with your actual playlist ID from the LyveCom Dashboard when publishing your playlist.

Step 3: Publish & Add Your Custom Block Screen

• Save your custom block.

• Add the block as a new screen or section in your Tapcart app using the builder.

You’re all set! Your endless scroll “For You” page is ready to engage your customers with shoppable video content.

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

Happy selling! ✨