LyveCom Dashboard logo
LyveCom Dashboard logo
All articles

Embedding Carousels on Collection PagesUpdated 2 months ago

Platform: LyveCom

Intended Audience:Shopify Developers, Ecommerce Managers

Displaying Collection-Specific Carousels in Shopify

Create dynamic, personalized carousels that match each collection—no extra page builders required.

Step 1: Create a Collection Metafield in Shopify

  1. In your Shopify Admin, go to Settings → Custom Data → Collections.

  2. Click Add Definition to create a new metafield.

  3. Name it Lyvecom Carousel ID.

  4. Set the content type as Single line text.

  5. Save the metafield definition.

  1. In your Shopify theme files, create a new section file named lyvecom-carousel.liquid.

  2. Paste the following code into the new section:

1liquidCopyEdit<script data-lyvecom async src="https://dashboard.lyvecom.com/widget/widget.js"></script>
2<div class="lyvecom_carousel--component-new" data-lyvecom-id="{{ collection.metafields.lyvecom.carousel_id }}"></div>
3<script>
4    (() => {
5        const scriptElement = document.querySelector('script[data-lyvecom]');
6        const mountCarousel = () => {
7            LyveComWidget.mountCarouselComponentV2({
8                carouselID: '{{ collection.metafields.lyvecom.carousel_id }}',
9                carousel: true,
10                lng: 'en'
11            });
12        }
13

14        if (window.LyveComWidget) {
15            mountCarousel();
16        } else {
17            scriptElement.addEventListener('load', mountCarousel);
18        }
19    })()
20</script>
21

  1. In your collection.liquid or relevant template, add the section where you want the carousel to appear:

1liquidCopyEdit{% section 'lyvecom-carousel' %}
2

Placement Tip: Position the carousel below your collection banner or above the featured product grid for maximum visibility.

  1. In your Shopify Admin, navigate to Collections.

  2. Open a collection you’d like to feature a carousel on.

  3. Locate the LyveCom Carousel ID metafield you created.

  4. Paste the unique Carousel ID from your LyveCom dashboard into the metafield.

  5. Save your changes.

Once this setup is complete, each collection will dynamically display its corresponding shoppable video carousel—creating a tailored, interactive shopping experience for your customers.

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

Happy selling! ✨

Was this article helpful?
Yes
No