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?