Sticky slider widget

Customize your Google Reviews sticky slider widget with CSS. Change colors, fonts, layout, arrows, and more to match your website design.

Sticky slider modal

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;}

/* change top line color */
.reputon-google-reviews-widget .reputon-basic-slide .reputon-badge:before {background: red;}

/* 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-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; }}

---

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