How to use custom CSS to style Klaviyo Reviews widgets

You will learn

Learn about custom CSS for Klaviyo Reviews, including how to implement some basic use cases. For more advanced use cases, head to our developer resource on custom CSS for Klaviyo Reviews. Most widget customization can be implemented using drag and drop editors; CSS is only required for advanced use cases.

About custom CSS for Klaviyo Reviews

Klaviyo Reviews provides a wide range of CSS class selectors, which can be used to write custom CSS and apply advanced styling options to your reviews widgets. For more information, head to our complete dictionary of Klaviyo Reviews CSS classes.

How to apply custom CSS

You can apply custom CSS to Klaviyo Reviews in the same manner you’d apply any other custom CSS:

• Add custom CSS to your site’s main CSS stylesheet.
• Insert <style> tags within a single page’s code to apply CSS to that page.
• Apply inline styles to an individual HTML element using its style attribute. Inline styles do not apply the selector-based CSS snippets below to the widget’s contents.
• Use your ecommerce platform’s custom CSS editor. See the Shopify and WooCommerce guidance below.

We’ll focus on the last option here, because it is the simplest to implement.

Note that Klaviyo Reviews, including the default styles, generally load after CSS from your ecommerce platform. This means it’s important to use precise selectors, so your custom CSS isn’t overwritten by the defaults.

Apply custom CSS for Shopify

It’s not recommended to make edits to your current theme while it is live, as these edits may appear to site visitors before you can review the changes and troubleshoot any issues.

1. Create an unpublished copy of your current theme using Shopify’s instructions for duplicating themes.

2. Open the copied theme for editing and follow Shopify’s instructions for adding theme-wide custom CSS.

3. Add your custom CSS. Shopify’s theme-wide Custom CSS field has a 1,500-character limit. If your CSS exceeds that limit, use a stylesheet in your theme instead.

1. Preview a page where your reviews widgets appear, such as a product page, and review the changes.
2. Save your changes. When you’re ready to make them live, follow Shopify’s instructions for publishing the copied theme, including the publish confirmation.

Add custom CSS for WooCommerce

To apply CSS only to a specific WordPress page, prefix the widget selector with .page-id-YOUR_PAGE_ID, replacing the placeholder with your page’s ID. Learn how to find a page ID. For other page types, such as individual products, inspect the page’s body classes to choose the correct selector. Omit the page selector to apply the styles wherever the matching widget appears.

1. Open your site’s custom CSS editor. For a block theme on WordPress 6.2 or later, follow WordPress’s site-wide custom CSS instructions. For a classic theme, use Additional CSS in the WordPress Customizer.

2. Add your custom CSS.
   

1. Preview the changes on a page with reviews widgets, then save them using the instructions for your editor. The Site Editor uses Save; the Customizer uses Publish.

Custom CSS use cases

The CSS snippets below target the product reviews widget, including its review summary and review list. They do not change the standalone star rating, featured review carousel, or SEO / All reviews widgets. More advanced customization requires developer support. If you don't have a developer on your team and are not comfortable writing code yourself, consider reaching out to a Klaviyo Partner for assistance.

#klaviyo-product-reviews-wrapper {
  .kl_reviews__star,
  .kl_reviews__circle {
    display: none;
  }
  .kl_reviews__full_star {
    background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/full-moon.png?v=1705073898"); 
    background-size: cover;
  }
  .kl_reviews__partial_star {
    background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/last-quarter-moon.png?v=1705073898");
    background-size: cover;
  }
  .kl_reviews__empty_star {
    background-image: url("https://cdn.shopify.com/s/files/1/0284/3128/6351/files/new-moon.png?v=1705073898");
    background-size: cover; 
  }
}

#klaviyo-product-reviews-wrapper .kl_reviews__button_bar > .kl_reviews__button:nth-child(2) {
   color: blue;
   box-shadow: 0 0 15px #9ecaed;
}  

#klaviyo-product-reviews-wrapper .kl_reviews__button_bar > .kl_reviews__button:nth-child(1) {
   color: blue;
   box-shadow: 0 0 15px #9ecaed;
}

Additional resources