Locations widget

Change the rating

/* сhange the color of the rating stars */
.reputon-google-reviews-widget .reputon-locations .reputon-location-stars-container {color: red;}

/* сhange the color of the rating counter */
.reputon-google-reviews-widget .reputon-locations .reputon-count-number {color: red;}

/* remove the rating stars */
.reputon-google-reviews-widget .reputon-locations .reputon-location-stars-container {display: none;}

/* remove the rating counter */
.reputon-google-reviews-widget .reputon-locations .reputon-count-number {display: none;}

/* add space between stars */
.reputon-google-reviews-widget .reputon-locations .reputon-location-stars-container {gap: 5px;}

Change location name

/* сhange the color */
.reputon-google-reviews-widget .reputon-locations .reputon-location-name {color: red;}

/* remove */
.reputon-google-reviews-widget .reputon-locations .reputon-location-name {display: none;}

Change working hours

/* сhange the color */
.reputon-google-reviews-widget .reputon-locations .reputon-item-content div {color: red;}

/* remove */
.reputon-google-reviews-widget .reputon-locations .reputon-item-hours {display: none;}

Change address

/* сhange the color */
.reputon-google-reviews-widget .reputon-locations .reputon-item-address .reputon-text {color: red;}

/* remove */
.reputon-google-reviews-widget .reputon-locations .reputon-item-address {display: none;}

Change phone number

/* сhange the color */
.reputon-google-reviews-widget .reputon-locations .reputon-item-phone .reputon-text {color: red;}

/* remove */
.reputon-google-reviews-widget .reputon-locations .reputon-item-phone {display: none;}

Change icons color

.reputon-google-reviews-widget .reputon-locations .reputon-location-list {color: red;}

Change card background color

.reputon-google-reviews-widget .reputon-locations .reputon-location-content{background: aqua;}

Change widget color

.reputon-google-reviews-widget .reputon-locations {
  background: aqua;}

/* 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-locations) {
	  background: aqua;
	}
</style> 

Change “See all” button

/* regular state */
.reputon-google-reviews-widget .reputon-locations .reputon-see-all { 
  color: #fff; 
  background: red;}

/* borders */
.reputon-google-reviews-widget .reputon-locations .reputon-see-all {border: 3px solid red;}

/* hover, active states */
.reputon-google-reviews-widget .reputon-locations .reputon-see-all:hover,
.reputon-google-reviews-widget .reputon-locations .reputon-see-all:not([disabled]):active,
.reputon-google-reviews-widget .reputon-locations .reputon-see-all:not([disabled]):active {
   color: #fff;
   background: brown;}

/* 'leave a review' button text */
.reputon-google-reviews-widget .reputon-locations .reputon-see-all.editable:after {content: 'your text';}

/* 'leave a review' button font */
.reputon-google-reviews-widget .reputon-locations .reputon-see-all {font-family: Comic Sans MS;}

Change widget font

.reputon-google-reviews-widget .reputon-locations.reputon-widget {font-family: Comic Sans MS;}

Add margin above widget

.reputon-google-reviews-widget .reputon-locations.reputon-widget {margin-top: 100px;}

Add margin below widget

.reputon-google-reviews-widget .reputon-locations.reputon-widget {margin-bottom: 100px;}

Adjust widget width

.reputon-google-reviews-widget .reputon-locations.reputon-widget {max-width: 400px;}

Hide widget on mobile

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

Apply black-and-white filter

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

Questions about the codes or need assistance? We're excited to help: support@reputon.com

Last updated

Was this helpful?