Rating badge small / minimized compact rating widget

Customize your Google Reviews small/minimized compact rating widget with CSS. Change colors, fonts, layout, arrows, and more to match your website design.

Remove widget elements

/* remove logo */
.reputon-google-reviews-widget .reputon-small .reputon-image {
display: none;}

/* remove rating count */
.reputon-google-reviews-widget .reputon-small .reputon-rating-count {display: none;}

/* remove rating stars */
.reputon-google-reviews-widget .reputon-small .reputon-rating-stars {display: none;}

/* remove reviews count */
.reputon-google-reviews-widget .reputon-small .reputon-reviews-count {display: none;}

---

Change rating counter color

.reputon-google-reviews-widget .reputon-small .reputon-rating-count {color: red;}

---

Change rating stars color

.reputon-google-reviews-widget .reputon-small .reputon-rating-stars {color: red;}

---

Change widget reviews count color

.reputon-google-reviews-widget .reputon-small .reputon-reviews-count {color: red;}

---

Apply black-and-white filter

.reputon-google-reviews-widget .reputon-small {filter: grayscale(100%);}

---

Change background color

/* change widget background */
.reputon-google-reviews-widget .reputon-small .reputon-container {background: antiquewhite;}

/* change close button */
.reputon-google-reviews-widget .reputon-small .reputon-bt-close {background: antiquewhite;}

/* change color when hover at element */
.reputon-google-reviews-widget .reputon-small .reputon-container:hover {background: wheat;}

/* To change the background color of the widget section, add this code to your theme.liquid file. */
<style> 
	section:has(.reputon-google-reviews-widget .reputon-small) {background: bisque;}
</style> 

---

Move widget

/* move to the start of the block */
.reputon-google-reviews-widget {justify-content: flex-start !important;}
.reputon-google-reviews-widget .reputon-small {margin: 0 !important;}

/* move to the end of the block */
.reputon-google-reviews-widget {justify-content: flex-end !important;}
.reputon-google-reviews-widget .reputon-small {margin: 0 !important;}

/* center on mobile devices */
@media (max-width: 640px) {
  .reputon-google-reviews-widget .reputon-small .reputon-badge {transform-origin: center;}}

---

Hide widget on mobile

@media (max-width: 460px) { 
	.reputon-google-reviews-widget .reputon-small.reputon-reviews-holder {display: none; }}

---

Have questions or need help with CSS? We're here to help: [e-mail] or live chat