Advanced customization

Product Reviews app icon Go to the app store to install Product Reviews for Shopify

Caution

The tutorial in this section is provided as is. Shopify Support cannot help you implement and debug the solution described here. You and your programmers will be on your own if you decide to apply this solution. To get help with this, you should either post your questions in one of our Community forums, or hire a Shopify Expert.

Product Reviews allows you to completely alter the look and feel of the reviews, review forms, and star icons. These customizations should only be attempted by those who are comfortable creating and editing CSS, HTML, and Liquid code.

Customize CSS

Product Reviews was designed to adapt to your theme as much as possible, however, customizing the look and feel of your reviews and review form even further is a matter of overriding the Product Reviews CSS.

To customize the CSS:

  1. Using a text editor on your computer, create a file with your CSS overrides. Save it as product-reviews-override.css.

  2. Go to the Theme Editor page.

  3. Click on Assets.

  4. Click on Add a new asset and upload the product-reviews-override.css file.

  5. Go to the theme.liquid layout.

  6. Paste the following code right before the </head>.

{{ "product-reviews-override.css" | asset_url | stylesheet_tag }}

Customize star icons

Product Reviews uses a webfont called Font Awesome to render each star icon. This allows the star icons to look great on any resolution display and inherit the colors of your theme.

To customize the appearance of these icons, you must replace the webfont with an image and override the default Product Reviews stylesheet.

To customize the star icons:

  1. Create an image consisting of 4 icons, each 18px by 18px. Line them up in a vertical column for a total image size of 18px by 72px:

    Stars example

  2. Go to the Files page and upload your image.

  3. Copy the URL of your uploaded image to a text file.

  4. Go to your theme.liquid layout.

  5. Paste the following code including your uploaded image URL right before the </head> and click the Save button.

<style>
  /* All stars */
  .spr-icon {
    background-image: url("YOUR IMAGE URL GOES HERE");
    background-position: 0 0;
    display: inline-block;
    position: static;
    top: 0;
    width: 18px;
    height: 18px;
    text-indent: -30000px;
  }

  /* Empty star */
  /* Shown in New Review form as unselected */
  .spr-icon.spr-icon-star-empty,
  .spr-icon.spr-icon.spr-icon-star-empty {
    background-position: 0 0;
    opacity: 1;
  }

  /* Empty star on hover */
  /* Displayed when user hovers mouse over an empty star in the review form */
  .spr-icon.spr-icon-star-empty.spr-icon-star-hover {
    background-position: 0 -18px;
  }

  /* Full star */
  .spr-icon.spr-icon-star {
    background-position: 0 -36px;
  }

  /* Half star */
  /* Displayed when a rating is a half value (3.5 stars) */
  .spr-icon.spr-icon-star-half {
    background-position: 0 -54px;
    opacity: 1;
  }
 </style>

HTML markup reference

<div id="shopify-product-reviews">

  <div class="spr-container">
    <div class="spr-header">
      <h2 class="spr-header-title">Customer Reviews</h2>
      <div class="spr-summary">
        <span class="spr-starrating spr-summary-starrating">
          <i class="spr-icon spr-icon-star"></i>
          <i class="spr-icon spr-icon-star"></i>
          <i class="spr-icon spr-icon-star-half"></i>
          <i class="spr-icon spr-icon-star-empty"></i>
          <i class="spr-icon spr-icon-star-empty"></i>
        </span>
        <span class="spr-summary-caption">No reviews yet</span>
        <span class="spr-summary-actions">
          <a href="#" class="spr-summary-actions-newreview">Write a review</a>
        </span>
      </div> <!-- /.spr-summary -->
    </div> <!-- /.spr-header -->

    <div class="spr-content">
      <div class="spr-form">
        <form class="new-review-form">
          <h3 class="spr-form-title">Write a review</h3>
          <fieldset class="spr-form-contact">
            <div class="spr-form-contact-name">
              <label class="spr-form-label" for="review_author">Name</label>
              <input class="spr-form-input spr-form-input-text" id="review_author" type="text" name="review[author]" value="" placeholder="Enter your name">
            </div>
            <div class="spr-form-contact-email">
              <label class="spr-form-label" for="review_email">Email</label>
              <input class="spr-form-input spr-form-input-email" id="review_email" type="email" name="review[email]" value="" placeholder="john.smith@example.com">
            </div>
          </fieldset> <!-- /.spr-form-contact -->

          <fieldset class="spr-form-review">
            <div class="spr-form-review-rating">
              <label class="spr-form-label" for="review[rating]">Rating</label>
              <div class="spr-form-input spr-starrating ">
                <a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
                <a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
                <a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
                <a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
                <a href="#" class="spr-icon spr-icon-star spr-icon-star-empty">&nbsp;</a>
              </div>
            </div> <!-- /.spr-form-review-rating -->

            <div class="spr-form-review-title">
              <label class="spr-form-label" for="review_title">Review Title</label>
              <input class="spr-form-input spr-form-input-text" id="review_title" type="text" name="review[title]" value="" placeholder="Give your review a title">
            </div> <!-- /.spr-form-review-title -->

            <div class="spr-form-review-body">
              <label class="spr-form-label" for="review_body">Body of Review <span class="spr-form-review-body-charactersremaining">(1500)</span></label>
              <div class="spr-form-input">
                <textarea class="spr-form-input spr-form-input-textarea" id="review_body" name="review[body]" rows="10" placeholder="Write your comments here"></textarea>
              </div>
            </div> <!-- /.spr-form-review-body -->
          </fieldset> <!-- /.spr-form-review -->

          <fieldset class="spr-form-actions">
            <input type="submit" class="spr-button spr-button-primary button button-primary btn btn-primary" value="Submit Review">
            <input type="button" class="spr-button button btn" value="Cancel">
          </fieldset> <!-- /.spr-form-actions -->
        </form>
      </div>

      <div class="spr-reviews">
        <div class="spr-review">
          <div class="spr-review-header">
            <span class="spr-starratings spr-review-header-starratings">
              <i class="spr-icon spr-icon-star"></i>
              <i class="spr-icon spr-icon-star"></i>
              <i class="spr-icon spr-icon-star"></i>
              <i class="spr-icon spr-icon-star-empty"></i>
              <i class="spr-icon spr-icon-star-empty"></i>
            </span>
            <h3 class="spr-review-header-title">I love this product!</h3>
            <span class="spr-review-header-byline"><strong>John Appleseed</strong> on <strong>Jan 26, 2014</strong></span>
          </div> <!-- /.spr-review-header -->

          <div class="spr-review-content">
            <p class="spr-review-content-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor aliquam lorem, rhoncus tincidunt massa condimentum nec.</p>
          </div> <!-- /.spr-review-content -->

          <div class="spr-review-footer">
            <a href="#" class="spr-review-reportreview">Report as Inappropriate</a>
          </div> <!-- /.spr-review-footer -->
        </div> <!-- /.spr-review -->
      </div> <!-- /.spr-reviews -->

    </div> <!-- /.spr-content -->

  </div> <!-- /.spr-container -->

</div> <!-- /#shopify-product-reviews -->

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free