Compact rating / sticky compact rating widget

Change rating color

/* change rating */
.reputon-amazon-reviews-widget .reputon-basic .reputon-rating-stars {color: green;}
	
/* change rating counter */
.reputon-amazon-reviews-widget .reputon-basic .reputon-count-number {color: green;}

/* change rating stars */
.reputon-amazon-reviews-widget .reputon-basic .reputon-count-text {color: green;}

---

Change name color

.reputon-amazon-reviews-widget .reputon-basic .reputon-name {color: green;}

---

Change reviews counter color

.reputon-amazon-reviews-widget .reputon-basic .reputon-reviews-count {color: green;}

---

Change widget font

.reputon-amazon-reviews-widget .reputon-basic .reputon-badge {font-family: Comic Sans MS !important;}

---

Center reviews counter

.reputon-amazon-reviews-widget .reputon-basic .reputon-reviews-count {align-self: center;}

---

Center rating name

.reputon-amazon-reviews-widget .reputon-basic .reputon-name {text align: center;}

---

Center rating

.reputon-amazon-reviews-widget .reputon-basic .reputon-name {text-align: center;}
.reputon-amazon-reviews-widget .reputon-basic .reputon-content {align-items: center;}

---

Change widget size

/* plate */
.reputon-amazon-reviews-widget .reputon-basic .reputon-badge {padding: 5px;}

.reputon-amazon-reviews-widget .reputon-basic .reputon-badge .reputon-content {padding: 2px;}

/* logo */
.reputon-amazon-reviews-widget .reputon-basic .reputon-badge .reputon-image {
  width: 25px;
  height: 25px;
  min-width: 25px;}

/* text */
.reputon-amazon-reviews-widget .reputon-basic .reputon-badge .reputon-name {
  font-size: 12px;
  line-height: 16px;}

/* stars-text */
.reputon-amazon-reviews-widget .reputon-basic .reputon-badge .reputon-rating-stars .reputon-count-number {
  font-size: 12px;
  margin-right: 2px;}

/* stars */
.reputon-amazon-reviews-widget .reputon-basic .reputon-badge .reputon-rating-stars .reputon-icon-star {
  width: 12px;
  height: 12px;
  margin-right: 2px;}

.reputon-amazon-reviews-widget .reputon-basic .reputon-badge .reputon-rating-stars .reputon-count-text {
	gap: 0;}

/* change container width */
.reputon-amazon-reviews-widget .reputon-basic .reputon-badge .reputon-container {
	min-width: 160px;
	width: 100px;}

---

Add margin above widget

.reputon-amazon-reviews-widget .reputon-basic .reputon-badge {margin-top: 100px !important;}

---

Add margin below widget

.reputon-amazon-reviews-widget .reputon-basic .reputon-badge {margin-bottom: 100px !important;}

---

Change orange line color

.reputon-amazon-reviews-widget .reputon-basic .reputon-badge:before {background: green;}

---

Move widget to the left

.reputon-amazon-reviews-widget  .reputon-basic {
  margin: 0 !important;} 

.reputon-amazon-reviews-widget {
  justify-content: flex-start !important;}

---

Move widget to the right

.reputon-amazon-reviews-widget  .reputon-basic {
  margin: 0 !important;} 

.reputon-amazon-reviews-widget {
  justify-content: flex-end !important;}

/* center on mobile devices */
@media (max-width: 640px) {
  .reputon-amazon-reviews-widget .reputon-basic .reputon-badge {
    transform-origin: center;}}

---

Change background color

.reputon-amazon-reviews-widget .reputon-basic .reputon-container {background: antiquewhite;}
	
/* hovered state color */
.reputon-amazon-reviews-widget .reputon-basic .reputon-container:hover {background: brown;}

/* Add this code to theme.liquid to change the widget section color. */
<style> 
	section:has(.reputon-amazon-reviews-widget .reputon-basic) {background: bisque;}
</style> 

---

Remove shadow and add border

.reputon-amazon-reviews-widget .reputon-basic .reputon-badge {
	box-shadow: none;
	border: 2px solid coral;}

---

Remove widget blocks

/* remove name */
.reputon-amazon-reviews-widget .reputon-basic .reputon-info .reputon-name {display: none;}

/* remove reviews count block */
.reputon-amazon-reviews-widget .reputon-basic .reputon-info .reputon-reviews-count {display: none;}

/* remove logo */
.reputon-amazon-reviews-widget .reputon-basic .reputon-info .reputon-image {display: none;}

/* remove rating */
.reputon-amazon-reviews-widget .reputon-basic .reputon-info .reputon-rating-stars {display: none;}

---

Apply black-and-white filter

.reputon-amazon-reviews-widget .reputon-basic {filter: grayscale(100%);}

---

Questions about CSS or need assistance? We're excited to help: [e-mail] or live chat.