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.
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.
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 URLProduct 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.
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 |
| Ambassador ID to filter videos
Enter the LoudCrowd ambassador ID whose videos you want to display. This is the ID located after | Yes |
|
| Auto-detect product from page URL | No* |
|
| Specific product handle | No* |
|
| Platform product ID | No* |
|
| Title above carousel | No |
|
*One product identification method is required: either use-url-product, product-handle, or product-id
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>
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
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