How to show Review Ratings on the Collection Page

How to show Review Ratings on the Collection Page

AiTrillion can help you display product review ratings on the collection page so that your customers are convinced to make a purchase.

How it would look on your collection page:


Steps: 

Step 1.  Copy the entailing shortcode.

  1.      {% render 'review-rating-V2',  product: card_product %}   

Step 2.  Go to Shopify Admin > Online Store > Themes > Actions(Published theme) > Edit Code

Step 3.  Find  card-product.liquid  file under Snippets and paste copied code as shown,  

Step 4.  Then  Save  the file.

If "review-rating-V2.liquid" file is not available on the theme then follow below steps.

Steps:

The steps for this installation may differ depending on whether you are using a sectioned or a non-sectioned theme.

Step 1.  Copy the code below

  •  
  • <div class="product-review-star-container">
  • {% assign reviews = product.metafields.eggviews.reviews_average %}
  • {% assign ratingcount = product.metafields.eggviews.reviews_count %}  

  • <style>.star-container {display: inline-flex;}.star-container,.aio-review-ratings,.ai-review-stars,.ai-review-stars span{font-size: 14px;height: auto;line-height: 1;}.product-review-star-container{width:100%}.aio-review-ratings {display: inline-flex;flex-wrap: wrap;align-items: center;width:auto;cursor:pointer }.aio-review-ratings .aio-reviews-text-only{margin-left:2px}.ai-review-stars{display:flex;flex-wrap:nowrap;margin:auto -1px}.ai-review-stars span{padding:0px 1px}.ai-review-stars svg{width:15px;height:auto}.aio-review-ratings .no_reviews{margin-left:5px}</style>
  • {% if reviews %}

  • <style>.ai-review-stars-text{margin-right:2px;margin-left:5px}.star-container {display: inline-flex;}.star-container,.aio-review-ratings,.ai-review-stars,.ai-review-stars span{font-size: 14px;height: auto;line-height: 1;}.product-review-star-container{width:100%}.aio-review-ratings {display: inline-flex;flex-wrap: wrap;align-items: center;width:auto;cursor:pointer }.aio-review-ratings .aio-reviews-text-only{margin-left:2px}.ai-review-stars{display:flex;flex-wrap:nowrap;margin:auto -1px}.ai-review-stars span{padding:0px 1px}.ai-review-stars svg{width:15px;height:auto}.fa_star_half_full svg path.nofill {fill: #e0e0e0;}.fa_star.no svg path {fill: #e0e0e0;}.fa_star_o svg path {fill: #e0e0e0;}.aio-review-ratings .ai-review-stars-count{display:none }.aio-review-ratings:hover .ai-review-stars-count{display:inline-flex }</style>

  • {% liquid
  •  assign rating = product.metafields.eggviews.reviews_average
  •  assign integerPart = rating | floor
  •  assign counter = 0
  •  assign decimalPart = rating | minus: integerPart
  • %}

  • <div class="aio-review-ratings">
  • <div class="star-container">
  • <span class="ai-review-stars" title="{{ product.metafields.eggviews.reviews_average }}">
  •   {% for i in (1..integerPart) %}
  •     {% assign counter = counter | plus: 1 %}
  •     <span class="aa fa_star">
  •     <svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns=" http://www.w3.org/2000/svg"> <path d="M13.4983 0.896992L16.7123 8.50399L24.9403 9.21099C25.0672 9.22202 25.1881 9.27015 25.2878 9.34939C25.3876 9.42862 25.4618 9.53545 25.5012 9.65656C25.5407 9.77768 25.5436 9.90773 25.5097 10.0305C25.4757 10.1533 25.4064 10.2633 25.3103 10.347L19.0673 15.754L20.9373 23.798C20.9658 23.922 20.9571 24.0516 20.9124 24.1707C20.8677 24.2897 20.789 24.393 20.686 24.4677C20.583 24.5423 20.4603 24.585 20.3332 24.5904C20.2061 24.5958 20.0803 24.5636 19.9713 24.498L12.9003 20.233L5.83033 24.5C5.72138 24.5656 5.59552 24.5978 5.46844 24.5924C5.34136 24.587 5.21867 24.5443 5.11567 24.4697C5.01268 24.395 4.93392 24.2917 4.88923 24.1727C4.84453 24.0536 4.83587 23.924 4.86433 23.8L6.73433 15.756L0.491328 10.348C0.394805 10.2646 0.325061 10.1545 0.290837 10.0316C0.256614 9.90867 0.259435 9.77839 0.298947 9.65708C0.338459 9.53577 0.412904 9.42882 0.512948 9.34964C0.612991 9.27046 0.734182 9.22258 0.861327 9.21199L9.08933 8.50499L12.3033 0.896992C12.3527 0.779297 12.4358 0.678813 12.5421 0.608148C12.6484 0.537484 12.7732 0.499786 12.9008 0.499786C13.0285 0.499786 13.1533 0.537484 13.2596 0.608148C13.3659 0.678813 13.4489 0.779297 13.4983 0.896992Z" fill="{{ block.settings.colour }}"></path> </svg>
  •     </span>
  •   {% endfor %}
  •  
  •   {% if decimalPart > 0.1 %}
  •     {% if decimalPart < 0.9 %}
  •       <span class="fa_star_half_full">
  •         <svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns=" http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_99_1082)"> <path class="nofill" d="M25.6079 9.98995C25.5779 10.11 25.5079 10.22 25.4079 10.3L19.1679 15.71L21.0379 23.75C21.0679 23.88 21.0579 24.01 21.0079 24.13C20.9679 24.24 20.8879 24.35 20.7879 24.42C20.6779 24.5 20.5579 24.54 20.4279 24.55C20.3079 24.55 20.1779 24.52 20.0679 24.45L12.9979 20.19H12.9779V0.449951H12.9979C13.1279 0.449951 13.2479 0.489951 13.3579 0.559951C13.4679 0.629951 13.5479 0.729951 13.5979 0.849951L16.8079 8.45995L25.0379 9.16995C25.1679 9.17995 25.2879 9.21995 25.3879 9.29995C25.4879 9.37995 25.5579 9.48995 25.5979 9.60995C25.6379 9.72995 25.6479 9.85995 25.6079 9.98995Z" fill="#E1DFE5"/> <path class="fill" d="M12.978 0.449951V20.2L5.92796 24.45C5.81796 24.52 5.69796 24.55 5.56796 24.55C5.43796 24.54 5.31796 24.5 5.21796 24.42C5.10796 24.35 5.03796 24.25 4.98796 24.13C4.94796 24.01 4.93796 23.88 4.96796 23.75L6.83796 15.71L0.587962 10.3C0.497962 10.22 0.427962 10.11 0.387962 9.98995C0.357962 9.85995 0.357962 9.72995 0.397962 9.60995C0.437962 9.48995 0.507962 9.37995 0.607962 9.29995C0.707962 9.22995 0.837962 9.17995 0.957961 9.16995L9.18796 8.45995L12.398 0.849951C12.448 0.729951 12.538 0.629951 12.638 0.559951C12.738 0.489951 12.858 0.449951 12.978 0.449951Z" fill="{{ block.settings.colour }}"/> </g> <defs> <clipPath id="clip0_99_1082"> <rect width="26" height="25" fill="{{ block.settings.colour }}"/> </clipPath> </defs> </svg>
  •       </span>
  •     {% else %}
  •       <span class="fa_star no">
  •         <svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns=" http://www.w3.org/2000/svg"> <path d="M13.4983 0.896992L16.7123 8.50399L24.9403 9.21099C25.0672 9.22202 25.1881 9.27015 25.2878 9.34939C25.3876 9.42862 25.4618 9.53545 25.5012 9.65656C25.5407 9.77768 25.5436 9.90773 25.5097 10.0305C25.4757 10.1533 25.4064 10.2633 25.3103 10.347L19.0673 15.754L20.9373 23.798C20.9658 23.922 20.9571 24.0516 20.9124 24.1707C20.8677 24.2897 20.789 24.393 20.686 24.4677C20.583 24.5423 20.4603 24.585 20.3332 24.5904C20.2061 24.5958 20.0803 24.5636 19.9713 24.498L12.9003 20.233L5.83033 24.5C5.72138 24.5656 5.59552 24.5978 5.46844 24.5924C5.34136 24.587 5.21867 24.5443 5.11567 24.4697C5.01268 24.395 4.93392 24.2917 4.88923 24.1727C4.84453 24.0536 4.83587 23.924 4.86433 23.8L6.73433 15.756L0.491328 10.348C0.394805 10.2646 0.325061 10.1545 0.290837 10.0316C0.256614 9.90867 0.259435 9.77839 0.298947 9.65708C0.338459 9.53577 0.412904 9.42882 0.512948 9.34964C0.612991 9.27046 0.734182 9.22258 0.861327 9.21199L9.08933 8.50499L12.3033 0.896992C12.3527 0.779297 12.4358 0.678813 12.5421 0.608148C12.6484 0.537484 12.7732 0.499786 12.9008 0.499786C13.0285 0.499786 13.1533 0.537484 13.2596 0.608148C13.3659 0.678813 13.4489 0.779297 13.4983 0.896992Z" fill="{{ block.settings.colour }}"></path> </svg>
  •       </span>
  •     {% endif %}
  •     {% assign counter = counter | plus: 1 %}
  •   {% endif %}

  •   {% assign remainingStars = 5 | minus: counter %}
  •   {% for i in (1..remainingStars) %}
  •     <span class="ss fa_star_o">
  •     <svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns=" http://www.w3.org/2000/svg"> <path d="M13.4983 0.896992L16.7123 8.50399L24.9403 9.21099C25.0672 9.22202 25.1881 9.27015 25.2878 9.34939C25.3876 9.42862 25.4618 9.53545 25.5012 9.65656C25.5407 9.77768 25.5436 9.90773 25.5097 10.0305C25.4757 10.1533 25.4064 10.2633 25.3103 10.347L19.0673 15.754L20.9373 23.798C20.9658 23.922 20.9571 24.0516 20.9124 24.1707C20.8677 24.2897 20.789 24.393 20.686 24.4677C20.583 24.5423 20.4603 24.585 20.3332 24.5904C20.2061 24.5958 20.0803 24.5636 19.9713 24.498L12.9003 20.233L5.83033 24.5C5.72138 24.5656 5.59552 24.5978 5.46844 24.5924C5.34136 24.587 5.21867 24.5443 5.11567 24.4697C5.01268 24.395 4.93392 24.2917 4.88923 24.1727C4.84453 24.0536 4.83587 23.924 4.86433 23.8L6.73433 15.756L0.491328 10.348C0.394805 10.2646 0.325061 10.1545 0.290837 10.0316C0.256614 9.90867 0.259435 9.77839 0.298947 9.65708C0.338459 9.53577 0.412904 9.42882 0.512948 9.34964C0.612991 9.27046 0.734182 9.22258 0.861327 9.21199L9.08933 8.50499L12.3033 0.896992C12.3527 0.779297 12.4358 0.678813 12.5421 0.608148C12.6484 0.537484 12.7732 0.499786 12.9008 0.499786C13.0285 0.499786 13.1533 0.537484 13.2596 0.608148C13.3659 0.678813 13.4489 0.779297 13.4983 0.896992Z" fill="{{ block.settings.colour }}"></path> </svg>
  •     </span>
  •   {% endfor %}
  • </span>
  • </div>
  • <span class="ai-review-stars-text">({{ ratingcount }})<span class="aio-reviews-text-only">Reviews</span></span>
  • </div>
  • {% else %}
  • <div class="aio-review-ratings">
  • <span class="ai-review-stars">
  • <span class="fa_star_o"><svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns=" http://www.w3.org/2000/svg"> <path d="M13.4983 0.896992L16.7123 8.50399L24.9403 9.21099C25.0672 9.22202 25.1881 9.27015 25.2878 9.34939C25.3876 9.42862 25.4618 9.53545 25.5012 9.65656C25.5407 9.77768 25.5436 9.90773 25.5097 10.0305C25.4757 10.1533 25.4064 10.2633 25.3103 10.347L19.0673 15.754L20.9373 23.798C20.9658 23.922 20.9571 24.0516 20.9124 24.1707C20.8677 24.2897 20.789 24.393 20.686 24.4677C20.583 24.5423 20.4603 24.585 20.3332 24.5904C20.2061 24.5958 20.0803 24.5636 19.9713 24.498L12.9003 20.233L5.83033 24.5C5.72138 24.5656 5.59552 24.5978 5.46844 24.5924C5.34136 24.587 5.21867 24.5443 5.11567 24.4697C5.01268 24.395 4.93392 24.2917 4.88923 24.1727C4.84453 24.0536 4.83587 23.924 4.86433 23.8L6.73433 15.756L0.491328 10.348C0.394805 10.2646 0.325061 10.1545 0.290837 10.0316C0.256614 9.90867 0.259435 9.77839 0.298947 9.65708C0.338459 9.53577 0.412904 9.42882 0.512948 9.34964C0.612991 9.27046 0.734182 9.22258 0.861327 9.21199L9.08933 8.50499L12.3033 0.896992C12.3527 0.779297 12.4358 0.678813 12.5421 0.608148C12.6484 0.537484 12.7732 0.499786 12.9008 0.499786C13.0285 0.499786 13.1533 0.537484 13.2596 0.608148C13.3659 0.678813 13.4489 0.779297 13.4983 0.896992Z" fill="#e0e0e0"></path> </svg></span>  
  • <span class="fa_star_o"><svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns=" http://www.w3.org/2000/svg"> <path d="M13.4983 0.896992L16.7123 8.50399L24.9403 9.21099C25.0672 9.22202 25.1881 9.27015 25.2878 9.34939C25.3876 9.42862 25.4618 9.53545 25.5012 9.65656C25.5407 9.77768 25.5436 9.90773 25.5097 10.0305C25.4757 10.1533 25.4064 10.2633 25.3103 10.347L19.0673 15.754L20.9373 23.798C20.9658 23.922 20.9571 24.0516 20.9124 24.1707C20.8677 24.2897 20.789 24.393 20.686 24.4677C20.583 24.5423 20.4603 24.585 20.3332 24.5904C20.2061 24.5958 20.0803 24.5636 19.9713 24.498L12.9003 20.233L5.83033 24.5C5.72138 24.5656 5.59552 24.5978 5.46844 24.5924C5.34136 24.587 5.21867 24.5443 5.11567 24.4697C5.01268 24.395 4.93392 24.2917 4.88923 24.1727C4.84453 24.0536 4.83587 23.924 4.86433 23.8L6.73433 15.756L0.491328 10.348C0.394805 10.2646 0.325061 10.1545 0.290837 10.0316C0.256614 9.90867 0.259435 9.77839 0.298947 9.65708C0.338459 9.53577 0.412904 9.42882 0.512948 9.34964C0.612991 9.27046 0.734182 9.22258 0.861327 9.21199L9.08933 8.50499L12.3033 0.896992C12.3527 0.779297 12.4358 0.678813 12.5421 0.608148C12.6484 0.537484 12.7732 0.499786 12.9008 0.499786C13.0285 0.499786 13.1533 0.537484 13.2596 0.608148C13.3659 0.678813 13.4489 0.779297 13.4983 0.896992Z" fill="#e0e0e0"></path> </svg></span>
  • <span class="fa_star_o"><svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns=" http://www.w3.org/2000/svg"> <path d="M13.4983 0.896992L16.7123 8.50399L24.9403 9.21099C25.0672 9.22202 25.1881 9.27015 25.2878 9.34939C25.3876 9.42862 25.4618 9.53545 25.5012 9.65656C25.5407 9.77768 25.5436 9.90773 25.5097 10.0305C25.4757 10.1533 25.4064 10.2633 25.3103 10.347L19.0673 15.754L20.9373 23.798C20.9658 23.922 20.9571 24.0516 20.9124 24.1707C20.8677 24.2897 20.789 24.393 20.686 24.4677C20.583 24.5423 20.4603 24.585 20.3332 24.5904C20.2061 24.5958 20.0803 24.5636 19.9713 24.498L12.9003 20.233L5.83033 24.5C5.72138 24.5656 5.59552 24.5978 5.46844 24.5924C5.34136 24.587 5.21867 24.5443 5.11567 24.4697C5.01268 24.395 4.93392 24.2917 4.88923 24.1727C4.84453 24.0536 4.83587 23.924 4.86433 23.8L6.73433 15.756L0.491328 10.348C0.394805 10.2646 0.325061 10.1545 0.290837 10.0316C0.256614 9.90867 0.259435 9.77839 0.298947 9.65708C0.338459 9.53577 0.412904 9.42882 0.512948 9.34964C0.612991 9.27046 0.734182 9.22258 0.861327 9.21199L9.08933 8.50499L12.3033 0.896992C12.3527 0.779297 12.4358 0.678813 12.5421 0.608148C12.6484 0.537484 12.7732 0.499786 12.9008 0.499786C13.0285 0.499786 13.1533 0.537484 13.2596 0.608148C13.3659 0.678813 13.4489 0.779297 13.4983 0.896992Z" fill="#e0e0e0"></path> </svg></span>
  • <span class="fa_star_o"><svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns=" http://www.w3.org/2000/svg"> <path d="M13.4983 0.896992L16.7123 8.50399L24.9403 9.21099C25.0672 9.22202 25.1881 9.27015 25.2878 9.34939C25.3876 9.42862 25.4618 9.53545 25.5012 9.65656C25.5407 9.77768 25.5436 9.90773 25.5097 10.0305C25.4757 10.1533 25.4064 10.2633 25.3103 10.347L19.0673 15.754L20.9373 23.798C20.9658 23.922 20.9571 24.0516 20.9124 24.1707C20.8677 24.2897 20.789 24.393 20.686 24.4677C20.583 24.5423 20.4603 24.585 20.3332 24.5904C20.2061 24.5958 20.0803 24.5636 19.9713 24.498L12.9003 20.233L5.83033 24.5C5.72138 24.5656 5.59552 24.5978 5.46844 24.5924C5.34136 24.587 5.21867 24.5443 5.11567 24.4697C5.01268 24.395 4.93392 24.2917 4.88923 24.1727C4.84453 24.0536 4.83587 23.924 4.86433 23.8L6.73433 15.756L0.491328 10.348C0.394805 10.2646 0.325061 10.1545 0.290837 10.0316C0.256614 9.90867 0.259435 9.77839 0.298947 9.65708C0.338459 9.53577 0.412904 9.42882 0.512948 9.34964C0.612991 9.27046 0.734182 9.22258 0.861327 9.21199L9.08933 8.50499L12.3033 0.896992C12.3527 0.779297 12.4358 0.678813 12.5421 0.608148C12.6484 0.537484 12.7732 0.499786 12.9008 0.499786C13.0285 0.499786 13.1533 0.537484 13.2596 0.608148C13.3659 0.678813 13.4489 0.779297 13.4983 0.896992Z" fill="#e0e0e0"></path> </svg></span>
  • <span class="fa_star_o"><svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns=" http://www.w3.org/2000/svg"> <path d="M13.4983 0.896992L16.7123 8.50399L24.9403 9.21099C25.0672 9.22202 25.1881 9.27015 25.2878 9.34939C25.3876 9.42862 25.4618 9.53545 25.5012 9.65656C25.5407 9.77768 25.5436 9.90773 25.5097 10.0305C25.4757 10.1533 25.4064 10.2633 25.3103 10.347L19.0673 15.754L20.9373 23.798C20.9658 23.922 20.9571 24.0516 20.9124 24.1707C20.8677 24.2897 20.789 24.393 20.686 24.4677C20.583 24.5423 20.4603 24.585 20.3332 24.5904C20.2061 24.5958 20.0803 24.5636 19.9713 24.498L12.9003 20.233L5.83033 24.5C5.72138 24.5656 5.59552 24.5978 5.46844 24.5924C5.34136 24.587 5.21867 24.5443 5.11567 24.4697C5.01268 24.395 4.93392 24.2917 4.88923 24.1727C4.84453 24.0536 4.83587 23.924 4.86433 23.8L6.73433 15.756L0.491328 10.348C0.394805 10.2646 0.325061 10.1545 0.290837 10.0316C0.256614 9.90867 0.259435 9.77839 0.298947 9.65708C0.338459 9.53577 0.412904 9.42882 0.512948 9.34964C0.612991 9.27046 0.734182 9.22258 0.861327 9.21199L9.08933 8.50499L12.3033 0.896992C12.3527 0.779297 12.4358 0.678813 12.5421 0.608148C12.6484 0.537484 12.7732 0.499786 12.9008 0.499786C13.0285 0.499786 13.1533 0.537484 13.2596 0.608148C13.3659 0.678813 13.4489 0.779297 13.4983 0.896992Z" fill="#e0e0e0"></path> </svg></span>
  • </span>
  • <span class="no_reviews"> No reviews </span>
  • </div>

  • {% endif %}
  • </div>
  •                         

Step 2.  Go to  Shopify Admin  >  Online Store  >  Themes  >  Actions(Published theme)  >  Edit Code

Step 3.  
Add a new snippet  review-rating-V2 under Snippets  and paste copied code. Then save the file.



Step 4. Search "
{{ block.settings.colour }}" in 'review-rating-V2.liquid' file and add the color code for all the stars.

Step5.   Find card-product.liquid  file under Snippets and paste the below code as shown,

  1.    {% render 'review-rating-V2',  product: card_product %}   

Step 6.  Then  Save the file.

Need Help?

Live chat with AiTrillion Support now from our website or inside the AiTrillion app. You can also email support@aitrillion.com or schedule a call on  www.aitrillion.com/support



    • Related Articles

    • Show Review Ratings On The Product Detail Page

      On a product detail page on a Shopify store, review ratings by AiTrillion, typically appear in a section near the top of the page, below the product name and above the product description. Latest Method: Shopify theme 2.0 (automatic installation of ...
    • How to move Review Section in the Product Detail Page

      To move the AiTrillion Review Section on the product page from one place to the other, follow the steps below. What the review section looks like on the product page: Step 1. Login to Shopify Admin. Step 2. Go to Online Store > Themes from the left ...
    • How to Setup a Review Form on the Product Page

      An AiTrillion review form on a product page is a feature that allows customers to submit reviews and ratings for a product. Use this Knowledgebase to learn how to set up a form in the new modern way or the older legacy way. How it would look in your ...
    • How to setup Product Review Gallery

      The AiTrillion product review gallery is a widget that allows you to display a collection of customer reviews and ratings in a grid or list format. This is a huge asset when it comes to increased product prevalence and sales. Step 1. Login to ...
    • Setup Product Review Popup

      AiTrillion can help you boost your conversion rates by collecting and leveraging reviews, ratings, and Q&A with product review pop-ups. Step 1. Login to AiTrillion. Step 2. Go to Smart Popups > Create New > Product Review Popup Use the following to ...