Overview

The Video UGC Carousel is a web component that displays shoppable video content on your eCommerce pages, including Product Detail, Collection, Home and other product landing pages. This guide covers installation for both Shopify stores and custom eCommerce sites.

It runs in one of two modes: Product mode shows videos tagged to a product (the default); Selected Videos mode shows a set of videos you hand-pick into a named selection.

Prerequisites

Before installing the Video UGC Carousel, ensure:

LoudCrowd is installed on your eCommerce store, including:
- LoudCrowd SDK installed on all target eCommerce pages (or base page template, which includes all)
- LoudCrowd App connected to your eCommerce site
You have selected a dedicated Storefront page that contains the video content you want to show on your eCommerce page(s). You can add video content to this page from a social media account or directly uploading to the page.
Your video content has been tagged with the products that you want to make shoppable from video UGC.
For Selected Videos mode, curate a named selection of videos in managed mode (see "Curating a selection" below) instead — product tagging isn't required.

Shopify Installation

Step 1: Add the App Block

From your Shopify admin, go to Online Store > Themes
Click Customize on your current theme
Navigate to a page template (example: product page)
Click Add block in the section where you want the carousel
Search for "LoudCrowd Video UGC Carousel" under Apps
Select the block to add it to your page

Step 2: Configure the Block

After adding the block, configure these required settings:

Ambassador ID: Enter the LoudCrowd ambassador ID whose videos you want to display. This is the ID located after lc_ambassador_id= in your Storefront URL
Product Selection: Choose one option:
- Enable "Auto-detect product from URL" (for product detail pages only). This automatically detects the product shown on a product detail page.
- OR manually select a specific product. You can pick any product from your catalog to include all video UGC tagged with that product.

Selected Videos mode (optional): to show a hand-picked set instead of product-tagged videos, check Show only selected videos and enter your selection's name in Selection name. This replaces the product selection above.

Step 3: Customize Display Settings

Optional settings to match your store's design:

Carousel Title: Add a heading above the videos (default: "See It In Action")
Title Font Size: Adjust from 10-48px (default: 16px)
Video Thumbnail Size: Set width from 80-300px (default: 140px)

Step 4: Save and Publish

Click Save in the theme editor to apply your changes.

Custom eCommerce Installation

Step 1: Add the Web Component to your Target eCommerce Page(s)

Place the component where you want the carousel to appear:

<shopwith-video-carousel-block lc-ambassador-id="YOUR_AMBASSADOR_ID" use-url-product="true"> </shopwith-video-carousel-block>

Step 2: Configuration Options

The component accepts these attributes:

Attribute	Description	Required	Example
`lc-ambassador-id`	Ambassador ID to filter videos Enter the LoudCrowd ambassador ID whose videos you want to display. This is the ID located after `lc_ambassador_id=` in your Storefront URL	Yes	`"123456"`
`use-url-product`	Auto-detect product from page URL	No*	`"true"`
`product-handle`	Specific product handle	No*	`"blue-shirt"`
`product-id`	Platform product ID	No*	`"7654321"`
`header-text`	Title above carousel	No	`"Customer Videos"`
`selected-videos-mode`	Show only your hand-picked selection (ignores product matching)	No*	`selected-videos-mode`
`selection-name`	Name of the selection to display (required with selected-videos-mode)	No*	`"Homepage"`

*A product identifier (use-url-product, product-handle, or product-id) is required unless you use selected-videos-mode, in which case provide selection-name instead.

Example Implementations

<!-- Auto-detect product from URL --> 
<shopwith-video-carousel-block 
  lc-ambassador-id="123456" 
  use-url-product="true" 
  header-text="See it in action"> 
</shopwith-video-carousel-block> 

<!-- Specific product handle --> 
<shopwith-video-carousel-block 
  lc-ambassador-id="123456" 
  product-handle="blue-cotton-shirt" 
  header-text="Customer Reviews"> 
</shopwith-video-carousel-block>

Curating a selection (managed mode)

Selected Videos mode shows the videos in a named selection. Curate that selection on the creator's storefront in managed mode:

Open the creator's storefront via Manage Page.
On any video, open the ⋯ menu and choose Carousel.
Check videos into a list, or type a name under New carousel (e.g. "Homepage") to create one. Use the pencil to rename or delete a list.

The block's Selection name must match the list's name (case-insensitive). Videos display in the order added (newest first).

Responsive Behavior

The carousel automatically maintains video aspect ratios and adjusts layout for different screen sizes.

The carousel adapts to different devices:

Desktop: Shows navigation arrows and larger thumbnails
Tablet: Reduced thumbnail size, maintains arrows
Mobile: Touch-friendly scrolling, arrows hidden

CSS Styling Guide

For advanced customization, use CSS custom properties to style the component.

Container and Layout

shopwith-video-carousel-block { 
  /* Container padding */ 
  --shopwith-container-padding: 20px 0; 

  /* Gap between videos */ 
  --shopwith-video-gap: 16px; 
}

Header Styling

shopwith-video-carousel-block { 
  /* Header typography */ 
  --shopwith-header-font-size: 24px; 
  --shopwith-header-font-weight: 600; 
  --shopwith-header-font-family: 'Your Font', sans-serif; 
  --shopwith-header-line-height: 1.3; 

/* Header spacing and color */ 
  --shopwith-header-color: #333333; 
  --shopwith-header-margin: 0 0 20px 0; 
}

Video Thumbnail Styling

shopwith-video-carousel-block { 
  /* Video dimensions */ 
  --shopwith-video-item-width: 160px; 
  --shopwith-video-item-height: 213px; 
  --shopwith-video-aspect-ratio: 9/16; 

  /* Video appearance */ 
  --shopwith-video-border-radius: 8px; 
  --shopwith-video-object-fit: cover; 
  --shopwith-video-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 

  /* Hover effects */ 
  --shopwith-video-transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

Navigation Arrow Styling

shopwith-video-carousel-block { 
  /* Arrow appearance */ 
  --shopwith-carousel-arrow-color: #000000; 
  --shopwith-carousel-arrow-size: 8px; 
  --shopwith-carousel-arrow-background: rgba(255, 255, 255, 0.9); 
  --shopwith-carousel-arrow-border-radius: 50%; 
}

Loading State Styling

shopwith-video-carousel-block { 
  /* Skeleton loader appearance */ 
  --shopwith-skeleton-background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); 
  --shopwith-skeleton-border-radius: 4px;
}

Complete Styling Example

/* Custom branded carousel */ 
shopwith-video-carousel-block { 
  /* Brand colors and spacing */ 
  --shopwith-container-padding: 40px 0; 
  --shopwith-header-color: #1a1a1a; 
  --shopwith-header-font-family: 'Montserrat', sans-serif; 
  --shopwith-header-font-size: 28px; 
  --shopwith-header-margin: 0 0 24px 0; 

  /* Modern video cards */ 
  --shopwith-video-item-width: 180px; 
  --shopwith-video-border-radius: 12px; 
  --shopwith-video-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); 
  --shopwith-video-gap: 20px; 

  /* Subtle navigation */ 
  --shopwith-carousel-arrow-color: #666; 
  --shopwith-carousel-arrow-background: rgba(255, 255, 255, 0.95); 
  --shopwith-carousel-arrow-size: 10px; 
 } 

  /* Hover state enhancement */ 
  shopwith-video-carousel-block loudcrowd-media:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); 
  }

Available CSS Variables Reference

Container Variables

--shopwith-container-padding: Padding around the entire component

Header Variables

--shopwith-header-font-size: Title text size
--shopwith-header-font-weight: Title font weight
--shopwith-header-color: Title text color
--shopwith-header-margin: Title spacing
--shopwith-header-line-height: Title line height
--shopwith-header-font-family: Title font family

Video Variables

--shopwith-video-item-width: Thumbnail width
--shopwith-video-item-height: Thumbnail height
--shopwith-video-gap: Space between videos
--shopwith-video-border-radius: Corner rounding
--shopwith-video-aspect-ratio: Video aspect ratio
--shopwith-video-object-fit: How video fills container
--shopwith-video-transition: Hover transition effects
--shopwith-video-box-shadow: Video shadow effect

Navigation Variables

--shopwith-carousel-arrow-color: Arrow icon color
--shopwith-carousel-arrow-size: Arrow icon size
--shopwith-carousel-arrow-background: Arrow button background
--shopwith-carousel-arrow-border-radius: Arrow button shape

Loading State Variables

--shopwith-skeleton-background: Loading skeleton gradient
--shopwith-skeleton-border-radius: Loading skeleton corners

Troubleshooting

Videos Not Appearing

Verify the ambassador ID is correct
Check that the ambassador has video content
Ensure videos are tagged to the specified product
Confirm the LoudCrowd SDK is loaded

Selected videos not appearing

Confirm Show only selected videos is enabled on the block.
Confirm the Selection name matches your list's name (case-insensitive).
Confirm the selection actually contains videos.

Styling Not Applied

Check CSS specificity - you may need to increase selector specificity
Verify CSS custom property names are spelled correctly
Ensure styles are loaded after the component

Component Not Rendering

Check browser console for errors
Verify all required attributes are provided
Ensure JavaScript is enabled
Confirm the SDK initialization event has fired

Install Video UGC Carousel