How to replace hearts as symbols that represent rating score with another shape

The site design is great and I want to change the shape of the heart to something else for items that have been rated on my site. Can anyone tell me how to do this.

Please check out the site at

Half way down on the left side of the site you can see items most reviewed. Here the hearts show.

1 answer

Profile photo of tomc 0.00 $tone November 24, 2011


The css (and identified relative images) for that element can be found within the theme.css file, within the following path . . .


starting at line 1411 . . .


.ratings { line-height: 12px; margin: 0 0 10px; }

.rating-box {
	background: url(../images/product_rating_blank_star.png) repeat-x;
	height: 14px;
	margin-bottom: 5px;
	margin-right: 10px;
	position: relative;
	overflow: hidden;
	width: 83px;
	float: left;

.rating-box .rating {
	background: url(../images/product_rating_full_star.png) repeat-x;
	height: 14px;
	left: 0;
	position: absolute;
	top: 0;

As you can see, the relative images are called product_rating_blank_star.png and product_rating_full_star.png

You can create your own custom images and replace the current with your new images accordingly.

Hope that helps guide you in the right direction.


Please login or Register to Submit Answer

Written By