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?