Star Rating Color - CSS

Change your star rating color using your own css and liquid code.

The ideal image size is 80x80 pixel PNG — transparent 8-bit is the best, or 24-bit transparent. You can also use JPG or GIF, it will not cause any issues — just make sure your image background color matches your page background color.

Example Template Files

Photoshop File Template

PNG Example File - 8 Bit Transparent

PNG Example File - 24 Bit Transparent

The code example here is assuming that your image is in the Files page of your Shopify admin. To use from the /assets directory, use the filter asset_img_url.

~CE

<style>
  /* TOP COLOR */
  .r_stars_on {
    background-image: url("{{ 'my-image.png' | file_image_url: width: 200, height: 200 }}") !important;
  }
  /* BOTTOM COLOR */
  .r_stars_inner {
    background-image: url("{{ 'my-image.png' | file_image_url: width: 200, height: 200 }}") !important;
  }
</style>