Skip to main content
Solved

Customising Review Carousel


Forum|alt.badge.img

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

View original
Did this topic or the replies in the thread help you find an answer to your question?

5 replies

MANSIR2094
Problem Solver IV
Forum|alt.badge.img+13
  • Problem Solver IV
  • 174 replies
  • 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.

 


Forum|alt.badge.img
  • Author
  • Contributor I
  • 1 reply
  • January 9, 2025

Hey I messaged you on Whatsapp cheers.


Byrne C
Community Manager
Forum|alt.badge.img+10
  • Community Manager
  • 67 replies
  • Answer
  • 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
Forum|alt.badge.img+12

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
Forum|alt.badge.img+5
  • Problem Solver III
  • 47 replies
  • 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