Show Review Ratings On The Product Detail Page
Introduction
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 review form)
How it would look in your store After you enable the review module on your store:
Here are the steps to show a review ratings on the product page:
Step 1: Go to your Shopify admin > theme > Customize
Step 2: Open the page to which you want to add a block for example: Products > Default product
Step 3: Click on Product information > Add block
Step 4: Add AiTrillion Blocks on your product detail page
Step 5: You can drag and drop it below the product title
Step 6: Also, you can update the star color from the block.
Older Method: Manual installation for Shopify Old themes
How it would look in your store:
Here are the steps to manually installation for Shopify old themes:
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 the 'review-rating-V2.liquid' file and add the color code for all the stars.
Step 5: Find the code product.title in the file product-template.liquid under Sections and paste the below code after product.title.
{%include 'review-rating-V2'%}
Step 6: Then Save the file.
Related Articles
Review Ratings on the Collection Page
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 ...Move Review Section in the Product Detail Page
Introduction In this article, we'll explore the importance of the review section's placement on the product detail page and provide practical insights into how to effectively move this section, empowering you to enhance your online storefront's ...Setup a Review Form on the Product Page
Introduction 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 ...Create Product Review Gallery
Introduction 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. Here is how ...Setup Product Review Popup
Introduction AiTrillion can help you boost your conversion rates by collecting and leveraging reviews, ratings, and Q&A with product review pop-ups. Here are the steps to set up Product review popup: Step 1: Go to Smart Popups > Create New > Product ...