Introduction
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:
Here are the steps to show Review Ratings on the Collection Page:
Step 1: Copy the entailing shortcode.
{% 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 the copied code as shown,
Step 4. Then click on Save to save the file.
If "review-rating-V2.liquid" file is not available on the theme, then follow the below 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="#2351AD"></path> </svg>
</span>
{% endfor %}
{% if decimalPart > 0.1 %}
{% if decimalPart < 0.6 %}
<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="#2351AD"/> </g> <defs> <clipPath id="clip0_99_1082"> <rect width="26" height="25" fill="#2351AD"/> </clipPath> </defs> </svg>
</span>
{% elsif decimalPart > 0.5 %}
<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="#2351AD"></path> </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="#2351AD"></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="#2351AD"></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 the 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
{%render 'review-rating-V2', product: card_product%}
Step 6: Then Save the file.
Next➡️
💡Tips for Product & Site review