How to Add Collection-Specific Shoppable Video Carousels Using Collection Metafields

Purpose:

The purpose of this article is to guide users on how to add collection-specific shoppable video carousels to collection pages using collection metafields, enabling seamless integration of LyveCom video carousels into your custom collection templates.

Intended Audience:

E-commerce Managers, Marketing Managers

In order to add collection-specific video carousels, you'll first need to configure collection metafields in Shopify and connect them with LyveCom.

Jump into your Metaobject or Custom Data section in your Shopify admin.

Select a Collection Metafield from the metafield section.

Create a new collection metafield.

You’ll need to create a metafield specifically for the LyveCom Carousel:

LyveCom Carousel ID

Set this metafield as a single-line text type.

Open the collection template in your theme files to add the LyveCom Carousel section to your collection page layout.

Recommendation for Carousel Placement: Position the carousel below your collection banner or above your featured products section for maximum visibility.

Within your theme files, create a new section file, e.g., lyvecom-carousel.liquid, and paste the following code to load the LyveCom Carousel:

<script data-lyvecom async src="https://dashboard.lyvecom.com/widget/widget.js"></script>
<div class="lyvecom_carousel--component-new" data-lyvecom-id="{{ collection.metafields.lyvecom.carousel_id }}"></div>
<script>
    (() => {
        const scriptElement = document.querySelector('script[data-lyvecom]');
        const mountCarousel = () => {
            LyveComWidget.mountCarouselComponentV2({
                carouselID: '{{ collection.metafields.lyvecom.carousel_id }}',
                carousel: true,
                lng: 'en'
            });
        }

        if (window.LyveComWidget) {
            mountCarousel();
        } else {
            scriptElement.addEventListener('load', mountCarousel);
        }
    })()
</script>

Add this new section to your collection template by including {% section 'lyvecom-carousel' %} in the desired location.

Assign the Collection Metafields to the carousel. In the Shopify admin, navigate to your collections, and for each collection where you want the carousel to appear, enter the specific LyveCom Carousel ID into the metafield.

Delete any placeholder text and replace it with the actual carousel ID in the collection metafield.

When setting up the carousel, copy and paste the Carousel ID from the LyveCom dashboard into the associated metafield on your collection page.

By following these steps, you’ll be able to seamlessly integrate shoppable video carousels tailored to each collection, providing a dynamic and engaging shopping experience for your customers.

Updated on: 28/10/2024