Advanced customization for Product Reviews

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

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

Product Reviews allows you to completely alter the look and feel of the reviews, review forms, and star icons. You should try these customizations only if you are comfortable creating and editing CSS, HTML, and Liquid code, and with using a text editor program.

Customize CSS

Product Reviews was designed to adapt to your theme as much as possible. However, you might need to override the Product Review CSS to further customize the look and feel of your reviews and review form.

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 Assets.

  4. Click 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 to inherit the colors of your theme.

If you want to customize the appearance of these icons, then 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

If you are editing your Product Reviews CSS, you can use this reference to identify the HTML elements and their attributes, so that you can target them when writing your CSS rules.

<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