Skip to main content
Contributor I
January 9, 2025
Solved

Customising Review Carousel

  • January 9, 2025
  • 5 replies
  • 492 views

I'm struggling to to edit my review carousel to look certain way I have seen a style I really like on someones website but I cannot change the stars to have a block of background color behind them and also personalise the verified badge so it appears at the top. Any suggestions ? I could really do with the help, I will attach below the review carousel that I like the look of. 

Please help

My Current Review Carousel

😇

The Review Carousel with the style I really like

 

    Best answer by Byrne C

    Hey ​@EdenF5!

    Just wanted to check and see if you figured this out yet! We have an article on review widget customization that goes over how to customize the Featured reviews carousel.

    To accomplish your goal, you’d visit the Layout section of the featured reviews carousel style settings. From there, you’d edit the Card items to display the verification badge.

    Next, in the Style section, you’d edit the Filled color and Border in the Rating style settings. 

    Let me know if I can answer any additional questions regarding this, and have a great weekend.

    -Byrne

    5 replies

    MANSIR2094
    Expert Problem Solver IV
    Expert Problem Solver IV
    January 9, 2025

    Hello ​@EdenF5 

     

    To achieve the desired look for your review carousel, you will need to customize the CSS and possibly modify the HTML structure depending on your current setup. Here’s a professional approach:

     

    1. Background Color for Stars: Use CSS to wrap the stars in a container or apply a background directly. For example:

     

    .review-stars {

        background-color: #f0f0f0; /* Replace with your desired color */

        padding: 5px; /* Adjust for spacing */

        border-radius: 4px; /* Optional for rounded edges */

        display: inline-block; /* Ensure the stars align neatly */

    }

     

    2. Verified Badge Positioning: To move the verified badge to the top, modify its position in your HTML structure or use CSS positioning. For example:

     

    .verified-badge {

        position: absolute;

        top: -10px; /* Adjust as needed */

        left: 50%; /* Center horizontally if required */

        transform: translateX(-50%);

    }

    .review-container {

        position: relative; /* Ensure proper positioning context */

    }

     

    3. Responsive Adjustments: Ensure the carousel remains responsive by testing the changes across various devices and screen sizes.

     

    If the implementation feels overwhelming, feel free to reach out, and I’d be happy to assist with setting this

    up for your specific carousel.

     

    Mansir Digital Portfolio
    EdenF5Author
    Contributor I
    January 9, 2025

    Hey I messaged you on Whatsapp cheers.

    Byrne C
    Community Manager
    Byrne CAnswer
    Community Manager
    January 10, 2025

    Hey ​@EdenF5!

    Just wanted to check and see if you figured this out yet! We have an article on review widget customization that goes over how to customize the Featured reviews carousel.

    To accomplish your goal, you’d visit the Layout section of the featured reviews carousel style settings. From there, you’d edit the Card items to display the verification badge.

    Next, in the Style section, you’d edit the Filled color and Border in the Rating style settings. 

    Let me know if I can answer any additional questions regarding this, and have a great weekend.

    -Byrne

    Christiannoerbjerg
    Expert Problem Solver II
    2025 Champion
    January 12, 2025

    Hi ​@EdenF5 

    Thank you for posting in the Community!

    Have you got this issue solved? :-) 

    Christian Nørbjerg Enger
    Partner & CPO
    Web: Segmento.dk
    LinkedIn: @christianfromsegmento
    Voldbjergvej 22b, 8240 Risskov

    Amos Peace
    Problem Solver III
    Problem Solver III
    January 13, 2025

    Hello ​@EdenF5,

     

    If you are yet to solve this issue, try these:

     

    1. Use browser tools to examine the HTML and CSS of the desired style.

    2. Add CSS to change star background color (e.g., `background-color: gold;`).

       Badge: Use CSS `position` to move the verified badge (e.g., `position: absolute; top: -5px; left: 0;`).

    3. If using a library, check for customization options within the component settings.

     

    If you're still stuck, provide more details about your setup for more specific guidance.

     

    Best Regards,

    Peace Amos.

    +2348110490971

    Peace - Turning Emails Into Opportunities 💼 Email Marketing Specialist | 🚀 Klaviyo Expert 📧 amosfolashade2@email.com WhatsApp -+2349023453575 “Delivering the right message, to the right person, at the right time.”