Carousel widget

Change rating color

/* сhange rating color */
.reputon-google-reviews-widget .reputon-carousel .reputon-rating-stars {color: green;}

/* сhange review rating color */
.reputon-google-reviews-widget .reputon-carousel .reputon-card .reputon-rating-stars {color: green;}

/* сhange header rating color */
.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head .reputon-rating-stars {color: green;}

/* сhange header rating counter color */
.reputon-google-reviews-widget .reputon-carousel .reputon-count-number {color: green;}

/* сhange header rating stars color */
.reputon-google-reviews-widget .reputon-carousel .reputon-count-text {color: green;}

Change name color

/* change name color */
.reputon-google-reviews-widget .reputon-carousel .reputon-name {color: red;}

/* change reviews name only */
.reputon-google-reviews-widget .reputon-carousel .swiper-horizontal .reputon-name {color: red;}

/* change header name only */
.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head .reputon-name {color: red;}

Change review text color

.reputon-google-reviews-widget .reputon-carousel .reputon-text,
.reputon-google-reviews-widget .reputon-carousel .reputon-text p {color: red;}

Change publishing date color

.reputon-google-reviews-widget .reputon-carousel .reputon-date {color: red;}

Change reviews counter color

.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-count {color: red;}

Change border width, style and color

.reputon-google-reviews-widget .reputon-carousel .reputon-top-part {border: 3px solid red;}

Change review card background color

.reputon-google-reviews-widget .reputon-carousel .reputon-top-part {background: #eed5d5;}

Change header border width, style and color

.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head {border: 3px solid red;}

Change header background color

.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head {background: #eed5d5;}

Change “Leave a Review” button

/* regular state background color */
.reputon-google-reviews-widget .reputon-carousel .reputon-leave-review {background: purple;}

/* regular state text color */
.reputon-google-reviews-widget .reputon-carousel .reputon-leave-review {color: #fff;}

/* borders */
.reputon-google-reviews-widget .reputon-carousel .reputon-leave-review {border: 3px solid ;}

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

/* customize text */
.reputon-google-reviews-widget .reputon-carousel .reputon-leave-review.editable:after {content: 'your text';} 

/* 'load more' button font */
.reputon-google-reviews-widget .reputon-carousel 
.reputon-leave-review {font-family: Comic Sans MS;}

Change “Verified” icon color

.reputon-google-reviews-widget .reputon-carousel .reputon-verified-icon {color: red;}

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

Change review text font

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

Change header font

.reputon-google-reviews-widget .reputon-carousel-static-plate .reputon-static-plate {font-family: Comic Sans MS;}

/* change size */
.reputon-google-reviews-widget .reputon-carousel .reputon-swiper-button-next,  
.reputon-google-reviews-widget .reputon-carousel .reputon-swiper-button-prev {min-width: 80px; height: 80px;}

/* hide arrows */
.reputon-google-reviews-widget .reputon-carousel .reputon-swiper-button-next,  
.reputon-google-reviews-widget .reputon-carousel .reputon-swiper-button-prev {display: none;}

/* hide arrows only on mobile */
@media(max-width: 760px) {
	.reputon-google-reviews-widget .reputon-carousel .reputon-swiper-button-next,  
	.reputon-google-reviews-widget .reputon-carousel .reputon-swiper-button-prev 
	{display: none;}}

/* color arrows */
.reputon-google-reviews-widget .reputon-carousel .reputon-swiper-button-next,  
.reputon-google-reviews-widget .reputon-carousel .reputon-swiper-button-prev {color: red; background: yellow;}

/* adjust arrows (use negative numbers to raise position) */
.reputon-google-reviews-widget .reputon-carousel .reputon-swiper-button-next,  
.reputon-google-reviews-widget .reputon-carousel .reputon-swiper-button-prev {margin-top: 200px;}

Center header content

.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head .reputon-content {align-items: center;}

Hide customer avatar

.reputon-google-reviews-widget .reputon-carousel .reputon-single-review .reputon-image {display: none;}

Hide customer name

.reputon-google-reviews-widget .reputon-carousel .reputon-single-review .reputon-name {display: none;}

Hide review posting date

.reputon-google-reviews-widget .reputon-carousel .reputon-date {display: none;}

Remove “Show more” button (Open all reviews)

.reputon-google-reviews-widget .reputon-carousel .reputon-show-more {display: none;}
.reputon-google-reviews-widget .reputon-carousel .reputon-text
{-webkit-line-clamp: unset; mask-image: none;}

Change “Show more” button

/* change color */
.reputon-google-reviews-widget .reputon-carousel .reputon-show-more span {color: red;}

/* remove underline */
.reputon-google-reviews-widget .reputon-carousel .reputon-show-more span {text-decoration: none;}

/* change font */
.reputon-google-reviews-widget .reputon-carousel .reputon-show-more span {font-family: Comic Sans MS;}

Hide header content

/* hide entire header */
.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head {display: none;}

/* hide reviews counter */
.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head .reputon-reviews-count {display: none;}

/* hide seller name */
.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head .reputon-name {display: none;}

/* hide rating */
.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head .reputon-rating-stars {display: none;}

/* hide rating counter */
.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head .reputon-rating-stars .reputon-count-number {display: none;}

/* hide rating stars */
.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head .reputon-rating-stars .reputon-count-text {display: none;}

/* hide seller avatar */
.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head .reputon-image {display: none;}

/* hide 'leave a review' button */
.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head .reputon-leave-review {display: none;}

Remove reviews

.reputon-google-reviews-widget .reputon-carousel .reputon-carousel-holder {display: none !important;}

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

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

.reputon-google-reviews-widget .reputon-carousel .reputon-carousel-container {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto}

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

Move header below widget

.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head {order: 2;}

.reputon-google-reviews-widget .reputon-carousel {
  background: bisque;}

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

Hide Google logo from reviews

.reputon-google-reviews-widget .reputon-carousel .reputon-review-logo {display: none;}

Change seller name (only supported for "all" locations)

.reputon-google-reviews-widget .reputon-carousel .reputon-info .reputon-name:after {
  content: ‘your name’;
}

Change top part of reviews

/* hide top part */
.reputon-google-reviews-widget .reputon-carousel .reputon-single-review 
.reputon-review-header {display: none;}

/* move to the bottom */
.reputon-google-reviews-widget .reputon-carousel .reputon-single-review .reputon-review-header {order: 5;}

Apply black-and-white filter

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

Return design to legacy version

Add CSS at the top of the custom CSS block

/* hide new elements */
.reputon-google-reviews-widget .reputon-carousel .reputon-reviews-head {display: none;}
.reputon-google-reviews-widget .reputon-carousel .reputon-reviewer-info {display: none;}
.reputon-google-reviews-widget .reputon-carousel .reputon-bottom-navigation-btns {display: none;}

/* move Google logo */
.reputon-google-reviews-widget .reputon-carousel .reputon-review-header
{position: absolute;right: 30px;}

/* show hidden elements */
.reputon-google-reviews-widget .reputon-carousel .reputon-carousel-footer {display: block;}
.reputon-google-reviews-widget .reputon-carousel .reputon-bottom-part {display:flex !important;}
.reputon-google-reviews-widget .reputon-carousel .reputon-buttons-holder {display: flex !important;}
.reputon-google-reviews-widget .reputon-carousel .reputon-swiper-button-prev {display: block;}
.reputon-google-reviews-widget .reputon-carousel .reputon-swiper-button-next {display: block;}

.reputon-google-reviews-widget .reputon-carousel .reputon-carousel-holder {gap: 5px;}
.reputon-google-reviews-widget .reputon-carousel .reputon-top-part::before {
	content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: -1;
  transform: skewY(-45deg) translateY(-11px);
  top: 100%;
  left: 50px; 
  background: rgb(243, 246, 249);}
 
/* change avatar size */
.reputon-google-reviews-widget .reputon-carousel .reputon-image {width: 50px; height: 50px; min-width: 50px;}

Have questions or need help with CSS? We're excited to help at support@reputon.com or live chat.

PreviousHow to customize widget style NextCarousel (static plate) widget

Last updated 1 month ago

Was this helpful?

Carousel widget

Change rating color

Change name color

Change review text color

Change publishing date color

Change reviews counter color

Change border width, style and color

Change review card background color

Change header border width, style and color

Change header background color

Change “Leave a Review” button

Change “Verified” icon color

Change widget font

Change review text font

Change header font

Change navigation arrows

Center header content

Hide customer avatar

Hide customer name

Hide review posting date

Remove “Show more” button (Open all reviews)

Change “Show more” button

Hide header content

Remove reviews

Add margin above widget

Add margin below widget

Change widget width

Hide widget on mobile

Move header below widget

Change widget color

Hide Google logo from reviews

Change seller name (only supported for "all" locations)

Change top part of reviews

Apply black-and-white filter

Return design to legacy version

hashtagChange rating color

hashtagChange name color

hashtagChange review text color

hashtagChange publishing date color

hashtagChange reviews counter color

hashtagChange border width, style and color

hashtagChange review card background color

hashtagChange header border width, style and color

hashtagChange header background color

hashtagChange “Leave a Review” button

hashtagChange “Verified” icon color

hashtagChange widget font

hashtagChange review text font

hashtagChange header font

hashtagChange navigation arrows

hashtagCenter header content

hashtagHide customer avatar

hashtagHide customer name

hashtagHide review posting date

hashtagRemove “Show more” button (Open all reviews)

hashtagChange “Show more” button

hashtagHide header content

hashtagRemove reviews

hashtagAdd margin above widget

hashtagAdd margin below widget

hashtagChange widget width

hashtagHide widget on mobile

hashtagMove header below widget

hashtagChange widget color

hashtagHide Google logo from reviews

hashtagChange seller name (only supported for "all" locations)

hashtagChange top part of reviews

hashtagApply black-and-white filter

hashtagReturn design to legacy version

Change rating color

Change name color

Change review text color

Change publishing date color

Change reviews counter color

Change border width, style and color

Change review card background color

Change header border width, style and color

Change header background color

Change “Leave a Review” button

Change “Verified” icon color

Change widget font

Change review text font

Change header font

Change navigation arrows

Center header content

Hide customer avatar

Hide customer name

Hide review posting date

Remove “Show more” button (Open all reviews)

Change “Show more” button

Hide header content

Remove reviews

Add margin above widget

Add margin below widget

Change widget width

Hide widget on mobile

Move header below widget

Change widget color

Hide Google logo from reviews

Change seller name (only supported for "all" locations)

Change top part of reviews

Apply black-and-white filter

Return design to legacy version