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
😇
Best answer by Byrne C
Hey
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
+19Hello
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.
+27Hey
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
+15Hi
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
+6Hello
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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
