Sticky slider widget
Change rating color
.reputon-google-reviews-widget .reputon-basic-slide .reputon-rating-stars {color: #2fd45d;}


Change business name color
.reputon-google-reviews-widget .reputon-basic-slide .reputon-name {color: #2fd45d;}

Change reviews counter color
.reputon-google-reviews-widget .reputon-basic-slide .reputon-reviews-count {color: #2fd45d;}

Change reviewer name color
.reputon-google-reviews-widget .reputon-basic-slide .reputon-rating-text {color: #2fd45d;}

Change date color
.reputon-google-reviews-widget .reputon-basic-slide .reputon-date {color: #2fd45d;}

Change widget font
.reputon-google-reviews-widget .reputon-basic-slide.reputon-reviews-holder {font-family: Comic Sans MS;}

Center content
.reputon-google-reviews-widget .reputon-basic-slide .reputon-content {align-items: center;}

Hide reviews counter
.reputon-google-reviews-widget .reputon-basic-slide .reputon-reviews-count {display: none;}
Hide rating
.reputon-google-reviews-widget .reputon-basic-slide .reputon-rating-stars {display: none;}

Hide date
.reputon-google-reviews-widget .reputon-basic-slide .reputon-date {display: none;}

Hide business name
.reputon-google-reviews-widget .reputon-basic-slide .reputon-name {display: none;}

Hide reviewer name
.reputon-google-reviews-widget .reputon-basic-slide .reputon-rating-text {display: none;}

Apply black-and-white filter
.reputon-google-reviews-widget .reputon-basic-slide {filter: grayscale(100%);}

Change background color
.reputon-google-reviews-widget .reputon-basic-slide .reputon-single-review,
.reputon-google-reviews-widget .reputon-basic-slide .reputon-info {background: antiquewhite;}
/* close button */
.reputon-google-reviews-widget .reputon-basic-slide .reputon-bt-close {background: antiquewhite;}
/* change color when hover at element */
.reputon-google-reviews-widget .reputon-basic-slide:hover .reputon-single-review ,
.reputon-google-reviews-widget .reputon-basic-slide:hover .reputon-info {background: wheat;}
/* If you want to change the color of the entire section containing the widget,
insert this code into theme.liquid file */
<style>
section:has(.reputon-google-reviews-widget .reputon-basic-slide) {
background: bisque;
}
</style>

Move the widget
/* move to the start of the block */
.reputon-google-reviews-widget {
justify-content: flex-start !important;}
.reputon-google-reviews-widget .reputon-basic-slide {
margin: 0 !important;}
/* move to the end of the block */
.reputon-google-reviews-widget {
justify-content: flex-end !important;}
.reputon-google-reviews-widget .reputon-basic-slide {
margin: 0 !important;}
/* center on mobile devices */
@media (max-width: 640px) {
.reputon-google-reviews-widget .reputon-basic-slide .reputon-badge {
transform-origin: center;}}
Hide widget on mobile
@media (max-width: 460px) {
.reputon-google-reviews-widget .reputon-basic-slide {
display: none !important; }}
Questions about the codes or need assistance? We're excited to help: support@reputon.com
Last updated
Was this helpful?