Store locator widget

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

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

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

---

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