Summary
The Loudcrowd components come with standardized CSS variables to make it easier to have product cards and prices look and feel like the rest of your eCommerce store. Most styling on product cards can be done through CSS custom properties.
How CSS and styling is applied to product components
Each Loudcrowd component is implemented as a custom web component inside of its own shadow DOM. All style rules within the components will not bleed into the rest of the page. The components inherit CSS custom properties from their parent elements, allowing you to control their appearance through CSS variables.
Ways to customize product styling
Global Styles
Product cards are used in various parts of the Loudcrowd component ecosystem (storefront feed, ShopWith modal, Shoppable UGC modal, etc). For this reason, we recommend defining the CSS custom properties at the :root level to apply consistent styling across all components throughout the site.
:root {
/* Product card variables */
--lc-product-card-title-font-size: 16px;
--lc-product-sale-price-font-color: #ff0000;
/* ... other variables */
}
Component-Scoped Styles
To apply styles only within specific components (e.g., within an `ambassador-feed-block`), define the same variables under that component's selector:
ambassador-feed-block {
/* Product card variables */
--lc-product-card-title-font-size: 14px;
--lc-product-sale-price-font-color: #cc0000;
/* ... other variables */
}This allows product cards within different components to have unique appearances while maintaining consistency where needed.
Product Card CSS Variables
These variables control the appearance of product cards across all Loudcrowd components:
General Product Card Styling
:root {
/* Layout & Container */
--lc-product-card-padding: inherit;
--lc-product-card-box-shadow: inherit;
--lc-product-card-border-radius: 10px;
--lc-product-card-overlay-opacity: 0;
--lc-product-card-image-container-height: auto;
/* General Typography */
--lc-product-card-font-color: inherit;
--lc-product-card-font-size: 1rem;
--lc-product-card-font-weight: 400;
}
Product Title
:root {
/* Title Typography */
--lc-product-card-title-font-size: 1rem;
--lc-product-card-title-line-height: 1.3;
--lc-product-card-title-font-color: inherit;
--lc-product-card-title-font-weight: 600;
--lc-product-card-title-font-family: inherit;
--lc-product-card-title-padding: 0.5rem 0;
}
Brand Information
:root {
/* Brand Display */
--lc-product-card-brand-font-weight: 400;
--lc-product-card-brand-font-color: #666666;
--lc-product-card-brand-font-family: inherit;
--lc-product-card-brand-font-size: 0.875rem;
--lc-product-card-brand-padding: 0.25rem 0;
}
Interactive Elements
:root {
/* Actions & Icons */
--lc-product-card-share-display: block;
--lc-product-card-like-icon-color: #ff0000;
/* See Options Button */
--lc-product-card-see-options-display: block;
--lc-product-card-see-options-font-size: 0.875rem;
--lc-product-card-see-options-font-weight: 500;
--lc-product-card-see-options-padding: 0.5rem;
/* Add to Cart Button */
--lc-product-card-to-cart-button-border-width: 1px;
--lc-product-card-add-to-cart-button-border-color: #000000;
--lc-product-card-add-to-cart-button-font-size: 1rem;
--lc-product-card-add-to-cart-button-font-weight: 500;
}
Product Price CSS Variables
These variables specifically control how prices are displayed within product cards:
Base Price Styling
:root {
/* Default Price Display */
--lc-product-price-font-size: 1rem;
--lc-product-price-font-color: inherit;
}
Compare-at Price (Original Price)
If a sale price is available, the compare-at price is the original price displayed with a strikethrough.
:root {
/* Strikethrough/Original Price */
--lc-product-compare-at-price-font-color: #999999;
--lc-product-compare-at-price-font-size: 0.875rem;
--lc-product-compare-at-price-font-weight: 400;
}
Sale Price
:root {
/* Discounted Price */
--lc-product-sale-price-font-color: #ff0000;
--lc-product-sale-price-font-weight: 600;
--lc-product-sale-price-font-size: 1.125rem;
}
Promotional Price
Promotional price applies if you have additional promotions available. If this is the case these CSS variables will styles to different parts of the promotion price section.
:root {
/* Promotional Price Display */
--lc-product-promotional-price-font-color: #0066cc;
--lc-product-promotional-price-font-weight: 600;
--lc-product-promotional-price-font-size: 1.125rem;
/* Promotional Value */
--lc-product-promotional-price-value-font-color: #0066cc;
--lc-product-promotional-price-value-font-weight: 700;
--lc-product-promotional-price-value-font-size: 1.25rem;
--lc-product-promotional-price-value-line-height: 1.2;
/* Promotional Details (e.g., "with code") */
--lc-product-promotional-price-details-font-weight: 400;
--lc-product-promotional-price-details-font-size: 0.75rem;
/* Promotional Code Text */
--lc-product-promotional-price-code-font-weight: 600;
}
Best Practices
1. Start with :root variables: Define your base product styling at the `:root` level for consistency across your storefront.
2. Use inheritance: Many variables default to `inherit`, allowing them to pick up your site's existing typography settings.
3. Component-specific overrides: Only override variables at the component level when you need different styling for specific contexts.
4. Maintain hierarchy: Ensure visual hierarchy in your pricing (e.g., sale prices should be more prominent than compare-at prices).
5. Test across components: Verify your styling looks good in all contexts where products appear (feeds, modals, featured sections).