Compact slider / sticky slider widget
Change rating color
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-rating-stars {color: green;}
/* change the color of the main slide */
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-info .reputon-rating-stars {color: green;}
/* change the color of the review slides */
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-slide-container .reputon-rating-stars {color: green;}
Change name color
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-name {color: green;}
/* change name color of the main slide */
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-info .reputon-rating-stars {color: green;}
/* change name color of the review slides */
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-slide-container .reputon-rating-stars {color: green;}
Change reviews counter color
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-reviews-count {color: green;}
Change date color
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-date {color: green;}
Change review text color
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-text {color: green;}
Change slider background color
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-slide {background: skyblue;}
/* make hover color lighter or darker than the container's color*/
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-container:hover .reputon-slide {background: skyblue;}
/* Add this code to theme.liquid to change the widget section color. */
<style>
section:has(.reputon-amazon-reviews-widget .reputon-basic-slide) {background: bisque;}
</style> 
Change border width, style and color
/* change the color except for the top */
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-badge {
border: 3px solid orange;
border-top: none;}
/* change the top color */
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-badge:before {background: dodgerblue;}
Change widget font
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-carousel-holder {font-family: Comic Sans MS !important;}
Center review counter
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-reviews-count {align-self: center;}
Center rating name
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-name {text-align: center;}
Center rating
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-name {text-align: center;}
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-content {align-items: center;}
Hide carousel elements
/* hide reviews counter */
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-reviews-count {display: none;}
/* hide review text */
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-text {display: none;}
/* hide review date */
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-date {
display: none;
justify-content: center;}Move widget to the left
.reputon-amazon-reviews-widget .reputon-basic-slide {margin: 0 !important;}
.reputon-amazon-reviews-widget {justify-content: flex-start !important;}Move widget to the right
.reputon-amazon-reviews-widget .reputon-basic-slide {margin: 0 !important;}
.reputon-amazon-reviews-widget {justify-content: flex-end !important;}
/* center on mobile */
@media (max-width: 640px) {
.reputon-amazon-reviews-widget .reputon-basic-slide .reputon-badge {
transform-origin: center;}}Add margin above widget
.reputon-amazon-reviews-widget .reputon-basic-slide {margin-top: 100px !important;}Add margin below widget
.reputon-amazon-reviews-widget .reputon-basic-slide {margin-bottom: 100px !important;}Apply black-and-white filter
.reputon-amazon-reviews-widget .reputon-basic-slide {filter: grayscale(100%);}
Questions about CSS or need assistance? We're excited to help: support@reputon.com or live chat.
Last updated
Was this helpful?