Linkfuse Linkfuse
Login

Customizing Product Displays with CSS

Linkfuse product displays embed seamlessly on your website and include a built-in theming system for customizing colors, fonts, and borders directly from your dashboard. For most use cases, these options are sufficient. However, if you need more granular control over individual elements—adjusting specific typography, adding custom hover effects, or matching complex brand guidelines—you can use CSS parts to style elements directly.

When to Use CSS vs. Built-in Theming

Use the built-in theming system when:

  • Adjusting primary colors, fonts, or border styles
  • Making global changes that apply to all displays
  • You want settings managed in one place (the Linkfuse dashboard)

Use CSS when:

  • You need to style specific elements (e.g., only the button, only the title)
  • Your site's design requires custom hover states or animations
  • You want to hide or resize individual components
  • Built-in options don't provide enough control

Understanding CSS Parts and Shadow DOM

Linkfuse product displays render inside a Shadow DOM—a browser feature that encapsulates the display's HTML and CSS from your page. This isolation prevents your site's styles from accidentally affecting the display, and vice versa.

However, this also means you cannot target elements inside the display using normal CSS selectors. Instead, the display exposes specific elements as CSS parts that you can style from outside.

Think of CSS parts as labeled "hooks" that let you reach into the Shadow DOM and style designated elements.

The ::part() Selector Syntax

To style a CSS part, use the ::part() pseudo-element selector:

.linkfuse-embed::part(partname) {
  /* your styles */
}

If you embed using a container with a specific ID, you can target it more precisely:

#my-product-display::part(partname) {
  /* your styles */
}

Important: The ::part() selector only works on the host element (the embed container). It cannot penetrate further into nested shadow trees.

Targeting Specific Displays on a Page

When you have multiple product displays on the same page, you can style them individually by targeting each container's unique ID. For example, if you have three product displays:

<div id="product-1"></div>
<div id="product-2"></div>
<div id="product-3"></div>

<script>
  LinkfuseEmbed.render("abc123", "#product-1");
  LinkfuseEmbed.render("def456", "#product-2");
  LinkfuseEmbed.render("ghi789", "#product-3");
</script>

You can style each one independently:

/* Style only the first product display */
#product-1::part(container) {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

#product-1::part(primary-button) {
  background-color: #e63946;
}

/* Style only the second product display */
#product-2::part(container) {
  border: 2px solid #2a9d8f;
}

#product-2::part(primary-button) {
  background-color: #2a9d8f;
}

This allows you to match different product displays to different sections of your page, or highlight a featured product with distinct styling.

Practical Examples

Example 1: Custom Button Styling

Override the default button appearance to match your brand:

.linkfuse-embed::part(primary-button) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50px;
  padding: 14px 32px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.linkfuse-embed::part(primary-button):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.linkfuse-embed::part(secondary-button) {
  background: transparent;
  border: 2px solid #667eea;
  color: #667eea;
}

Example 2: Hiding the Product Badge

If you don't want to display the badge (e.g., "Our pick"), hide it with CSS:

.linkfuse-embed::part(badge) {
  display: none;
}

Example 3: Custom Typography

Adjust the title and description to better fit your site's typography:

.linkfuse-embed::part(title) {
  font-family: 'Georgia', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.3;
}

.linkfuse-embed::part(description) {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #4a4a68;
  line-height: 1.6;
}

.linkfuse-embed::part(pros-label),
.linkfuse-embed::part(cons-label) {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

Example 4: Styling Pros and Cons

Customize the appearance of the pros/cons sections:

.linkfuse-embed::part(pros) {
  background-color: #f0fdf4;
  border-radius: 8px;
  padding: 16px;
}

.linkfuse-embed::part(cons) {
  background-color: #fef2f2;
  border-radius: 8px;
  padding: 16px;
}

.linkfuse-embed::part(pros-icon) {
  color: #22c55e;
  font-size: 1.1rem;
}

.linkfuse-embed::part(cons-icon) {
  color: #ef4444;
  font-size: 1.1rem;
}

Example 5: Custom Image Styling

Add rounded corners or a border to the product image:

.linkfuse-embed::part(image) {
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.linkfuse-embed::part(image):hover {
  transform: scale(1.02);
}

Complete CSS Parts Reference

Part Description
container Main product display wrapper
badge Product badge/label (e.g., "Our pick")
outer-wrapper Outer flex container
content Inner content wrapper
title Product title (h3 element)
description Product description text
pros Pros section container
pros-label "Pros" heading
pros-item Individual pro item row
pros-icon Checkmark icon
pros-text Pro item text
cons Cons section container
cons-label "Cons" heading
cons-item Individual con item row
cons-icon X icon
cons-text Con item text
buttons Buttons container
primary-button Primary CTA button
secondary-button Secondary button (if configured)
disclosure Affiliate disclosure text
image Product thumbnail image
error Error message container

Limitations and Considerations

Descendants Cannot Be Selected

The ::part() selector only targets the specific element with that part attribute. You cannot select descendants of a part. For example, this does not work:

/* This will NOT work */
.linkfuse-embed::part(content) span {
  color: red;
}

If you need to style nested elements, request additional parts by contacting support.

Pseudo-elements Have Limited Support

CSS pseudo-elements like ::before and ::after do not work reliably with ::part(). If you need decorative elements, consider using borders, box-shadows, or background gradients instead.

/* Pseudo-elements may not work as expected */
.linkfuse-embed::part(title)::before {
  /* Limited browser support */
}

Specificity Considerations

Styles applied via ::part() have the same specificity rules as normal CSS. If your styles aren't applying, ensure they're not being overridden by more specific selectors elsewhere on your page.

Browser Support

The ::part() selector is supported in all modern browsers (Chrome, Firefox, Safari, Edge). If you need to support older browsers, the built-in theming system is the safer choice.

Testing Your Customizations

After adding custom CSS:

  1. Clear your browser cache or use a hard refresh (Ctrl+Shift+R / Cmd+Shift+R)
  2. Test across different browsers to ensure consistency
  3. Check mobile responsiveness—use media queries if needed:
@media (max-width: 768px) {
  .linkfuse-embed::part(title) {
    font-size: 1.25rem;
  }

  .linkfuse-embed::part(primary-button) {
    width: 100%;
    padding: 12px 20px;
  }
}

Need Help?

If you need additional CSS parts exposed or have questions about customization, contact our support team. We're happy to help you achieve the exact look you need for your product displays.

Top