Review Stars Missing from Product Pages

moderef1091
New Member
2 0 0

Just recently I noticed the stars are missing from my product pages. They are now boxes? I researched the snippet code and it appears to be in the correct place within the theme. Can someone please guide me on what to do? I am using the Free Shopify Product Review App.  Website url: https://www.anisabeauty.com/collections/makeup-brush-cleansers/products/quick-dry-brush-cleaning-spr...  

 

This is on all the product pages.

Replies 5 (5)
Mladen_Terzic
Tourist
8 1 2

Hello!

May you please share some code samples from your product.liquid? 

Shopify Expert
moderef1091
New Member
2 0 0

{% assign all_tags = product.tags | downcase %}

{% comment %}
Redirect Back to Collection if product marked as In Grid Promo
{% endcomment %}
{% assign in_grid_promo = settings.in_grid_promo | downcase %}
{% if all_tags contains in_grid_promo %}
{% for collection in product.collections %}
{%- unless condition.title contains '_' -%}
<script>window.location.href = '{{ collection.url }}';</script>
{{ break }}
{%- endunless -%}
{% endfor %}
{% endif %}

{% comment %} Is Final Sale {% endcomment %}
{% assign isFinalSale = false %}
{% assign final_sale_tag = settings.product_finalsale_tag | downcase %}
{% if all_tags contains final_sale_tag %}
{% assign isFinalSale = true %}
{% endif %}

{% comment %} Is Inquire {% endcomment %}
{% assign isInquire = false %}
{% assign inquire_tag = settings.product_inquire_tag | downcase %}
{% if all_tags contains inquire_tag %}
{% assign isInquire = true %}
{% endif %}

{% comment %} Is Pre-Order {% endcomment %}
{% assign isPreOrder = false %}
{% assign preorder_tag = settings.product_preorder_tag | downcase %}
{% if all_tags contains preorder_tag %}
{% assign isPreOrder = true %}
{% assign product_preorder_msg = settings.product_preorder_delivery %}
{% assign product_default_msg = settings.product_default_delivery %}
{% endif %}

{% comment %} Is Gift Card {% endcomment %}
{% assign isGiftCard = false %}
{% if product.type == 'Gift Card' %}
{% assign isGiftCard = true %}
{% endif %}

{% comment %} In Lab Badge {% endcomment %}
{% assign in_lab = false %}
{% for tag in product.tags %}
{% if tag contains 'in_lab' %}
{% assign in_lab = true %}
{% endif %}
{% endfor %}

{% comment %} Is Coming Soon {% endcomment %}
{% assign isComingSoon = false %}
{% for tag in product.tags %}
{% if tag contains 'coming-soon' %}
{% assign isComingSoon = true %}
{% assign comingSoonBadge = settings.coming_soon_badge_text %}
{% endif %}
{% endfor %}

{% assign navi_collection = collection %}

<div itemscope itemtype="http://schema.org/Product">

{%- assign current_variant = product.selected_or_first_available_variant -%}

<meta itemprop="name" content="{{ product.title }}{% unless product.has_only_default_variant %} - {{ current_variant.title }}{% endunless %}">
<meta itemprop="url" content="{{ shop.url }}{{ current_variant.url }}">
<meta itemprop="brand" content="{{ product.vendor }}">
<meta itemprop="image" content="{{ featured_image | img_url: '600x600' }}">
{%- assign m_description = product.description -%}
{% assign m_description_parts = product.description | split: '[tab]' %}
{% if m_description_parts.size > 1 %}
{% for desc in m_description_parts %}
{% if forloop.first %}
{%- assign m_description = desc -%}
{% endif %}
{% endfor %}
{% endif %}
<meta itemprop="description" content="{{ m_description | strip_html | escape }}">
{% unless product == empty %}
<script type="application/json" data-product-json>
{{ product | json }}
</script>
{% endunless %}
{% section "pdp-plp-menu" %}
<div class="product-single {% if product.type == "Gift Card" %}gift-card{% endif %}">

<div class="navigation-bar">
<div class="section-nav"></div>
</div>


<div class="overview waypoint-container" data-waypoint="overview" id="overview">
<div class="product-media">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
{% assign imageMainSrcSections = featured_image.src | split: '_' %}
{% assign selected_image_option = imageMainSrcSections[2] %}

<div class="product-single__photos" id="ProductPhoto">
{% for tag in product.tags %}

{% assign productTag = tag | downcase %}

{% if productTag contains 'sale:' %} <div class="sale_tag">{{tag | remove: 'sale:'}}</div> {% endif %}
{% endfor %}
<div class="images-wrapper" data-selected="{{ selected_image_option | downcase}}">


{% for image in product.images %}
{% assign imageSrcSections = image.src | split: '_' %}
{% if imageSrcSections[1] != 'swatch' %}
<div class="image-slide" data-option="{{ imageSrcSections[2] | downcase }}">
<!-- <img class="lazy" data-src="{{ image.src | img_url: '700x' }}" alt="{{ image.alt | escape }}"> -->
<img src="{{ image.src | img_url: '700x' }}" alt="{{ image.alt | escape }}">
</div>
{% endif %}
{% endfor %}
</div>
</div>

<div class="thumbnails-section">
<div class="thumbnails-wrapper">
<ul
class="product-single__thumbnails"
id="ProductThumbs"
style="transform:translateY(0px);"
data-selected="{{ selected_image_option | downcase }}"
data-show="5"
data-top="0"
>
{% for image in product.images %}
{% assign imageSrcSections = image.src | split: '_' %}

<li
class="{% if forloop.first %}slick-current{% endif %}"
tabindex="0"
data-index="{{ forloop.index0 }}"
data-option="{{ imageSrcSections[2] | downcase }}"
>
<div class="product-single__thumbnail image-slide">
<!-- <img class="lazy" data-src="{{ image.src | img_url: '512x' }}" alt="{{ image.alt | escape }}"> -->
<img src="{{ image.src | img_url: '512x' }}" alt="{{ image.alt | escape }}">
</div>
</li>
{% endfor %}
</ul>
</div>
<div class="arrows" style="display:none;">
<button
class="prev icon-chevron-up-light cta-light"
disabled
type="button"
aria-disabled="true"
aria-label="Previous image"
></button>
<button
class="next icon-chevron-down-light cta-light"
type="button"
aria-disabled="false"
aria-label="Next image"
></button>
</div>
</div>

</div>

<div class="hide-desktop product-heading">
<div class="product-title {% if in_lab %}active-badge{% endif %}">
{% if in_lab %}
<div class="badge"><span class="">NEW</span></div>
{% endif %}
<h1 itemprop="name">{{ product.title }}</h1>
<div class="price-box">
{% if product.compare_at_price_max > product.price %}
<p class="product-compare-price">
{{ current_variant.compare_at_price | money }}
</p>
{% endif %}

<span class="h2 product-price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
</div>
</div>
</div>

<li class="goToSection hide-desktop hide-tablet" id="reviews-badge-container" data-section="#reviews">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</li>


<div class="product-info">




<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
<link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">

{% comment %}
ID addToCartForm is a selector for the ajax cart plugin
{% endcomment %}
<div class="product-info-wrapper">
<div class="inner-wrapper">

<div class="hide-tablet hide-mobile">
<div class="product-title {% if in_lab %}active-badge{% endif %}">
{% if in_lab %}
<div class="badge"><span class="">NEW</span></div>
{% endif %}
<h1 itemprop="name">{{ product.title }}</h1>
</div>
<ul class="product-review-desktop">
<li class="goToSection hide-mobile" data-section="#reviews">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</li>
</ul>
</div>

{% if isFinalSale %}
<div class="final-sale-tag">{{ final_sale_tag }}</div>
{% endif %}
</div>

{% if isComingSoon %}
<div class="product-badge-container">
<div class="product-badge coming-soon-badge">{{comingSoonBadge}}</div>
</div>
{% else %}
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="add-to-cart-form">

<div class="hide">
{% if isFinalSale %}
<input type="text" id="final-sale" name="properties[{{ final_sale_tag }}]" value="yes"/>
{% endif %}

{% if isPreOrder %}
<input type="text" id="pre-order" name="properties[Pre Order Expected delivery]" value="{{ product_preorder_msg }}."/>
{% endif %}
</div>

<div class="product-attribute-container hide">
{% comment %}
{% include 'product-swatches' %}
{% include 'product-siblings' %}
{% endcomment %}

<div class="product-select-wrapper">
<select name="id" id="productSelect" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">
{{ variant.title }} - {{ variant.price | money_with_currency }}
</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
</div>

</div>

<div class="selector-wrapper">

{% include 'quantity-selector' %}

{%- if isInquire -%}
<a id="AddToCart" class="btn cta add-to-cart-btn disabled inquire" href="mailto:">
<span class="add-to-cart-text" >{{ 'products.product.inquire' | t }}</span>
</a>
{%- else -%}
<button id="AddToCart" class="btn cta add-to-cart-btn {% if isPreOrder %}pre-order{% endif %} {% if product.available == false %}disabled{% endif %}" type="submit" name="add" {% if product.available == false %} disabled="disabled"{% endif %}>
<span class="h3 add-to-cart-text" >
{% if product.available == false %}
{{ 'products.product.sold_out' | t }}
{% elsif isPreOrder %}
{{ preorder_tag }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endif %}
<span class="h3 product-price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
- {{ current_variant.price | money }}
</span>
</span>
</button>
{%- endif -%}
</div>

</form>
{% endif %}

<div class="flex-row">
<div class="sku">SKU
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
</div>

<div class="one-social pdp-utility">
<div class="share-title">Share</div>
{% include 'social-sharing', share_title: product.title, share_permalink: current_variant.url, share_image: featured_image.src %}
</div>
</div>
<!--[product description for desktop]-->
<div class="flex-row">
<div class="product-description" itemprop="description">

<div class="inner-wrapper tab-container">
{% assign description_parts = product.description | split: '[tab]' %}
{% if description_parts.size > 1 %}
<div class="tab-titles">
{% for desc in description_parts %}
{% assign tab_title = desc | split: '[/tab]' %}
<div {% if forloop.first %}class="active"{% endif %} data-tab="{% if forloop.first %}description{% else %}{{ tab_title[0] | strip_html | handle }}{% endif %}">
{% if forloop.first %}Details{% else %}{{ tab_title[0] | strip_html }}{% endif %}
</div>
{% endfor %}
</div>
<div class="tabs-content">
{% for desc in description_parts %}
{% assign tab_content = desc | split: '[/tab]' %}
<div {% if forloop.first %}class="active"{% endif %} data-tab="{% if forloop.first %}description{% else %}{{ tab_content[0] | strip_html | handle }}{% endif %}">
{% if forloop.first %}{{ desc }}{% else %}{{ tab_content[1] }}{% endif %}
</div>
{% endfor %}
</div>
{% else %}
{{ product.description }}
{% endif %}
</div>
</div>
</div>
<!--[product description for desktop]-->

{%- assign product_description_title = product.metafields["global"]["description_title"] | default: nil -%}
{%- assign product_description_content = product.metafields["global"]["description"] | default: nil -%}
{%- assign product_recommended_use_title = product.metafields["global"]["recommended_use_title"] | default: nil -%}
{%- assign product_recommended_use_content = product.metafields["global"]["recommended_use_content"] | default: nil -%}
{%- assign product_how_to_title = product.metafields["global"]["how_to_title"] | default: nil -%}
{%- assign product_how_to_content = product.metafields["global"]["how_to_content"] | default: nil -%}
{%- assign product_shipping_return_title = product.metafields["global"]["shipping_return_title"] | default: nil -%}
{%- assign product_shipping_return_content = product.metafields["global"]["shipping_return_content"] | default: nil -%}

{%- assign product_description_display = product.metafields["global"]["description_display"] | default: nil -%}
{%- assign product_recommended_use_display = product.metafields["global"]["recommended_use_display"] | default: nil -%}
{%- assign product_how_to_display = product.metafields["global"]["how_to_display"] | default: nil -%}
{%- assign product_shipping_return_display = product.metafields["global"]["shipping_return_display"] | default: nil -%}

{% if product_description_content != blank %}
<div class="product-info-additional">
{% if product_description_title and product_description_content %}
<div class="info accordion active {% if product_description_display == 'true' %}active{% endif %}">
<h3 class="product-meta-title accordion-title">{{ product_description_title }}</h3>
<div class="product-meta-desc accordion-content">
<div class="accordion-content-wrapper">{{ product_description_content }}</div>
</div>
</div>
{% endif %}
{% if product_recommended_use_title and product_recommended_use_content %}
<div class="info accordion {% if product_recommended_use_display == 'true' %}active{% endif %}">
<h3 class="product-meta-title accordion-title">{{ product_recommended_use_title }}</h3>
<div class="recommended-use-content accordion-content">
<div class="accordion-content-wrapper">{{ product_recommended_use_content }}</div>
</div>
</div>
{% endif %}
{% if product_how_to_title and product_how_to_content %}
<div class="info accordion {% if product_how_to_display == 'true' %}active{% endif %}">
<h3 class="product-meta-title accordion-title">{{ product_how_to_title }}</h3>
<div class="how-to-content accordion-content">
<div class="accordion-content-wrapper">{{ product_how_to_content }}</div>
</div>
</div>
{% endif %}
{% if product_shipping_return_title and product_shipping_return_content %}
<div class="info accordion {% if product_shipping_return_display == 'true' %}active{% endif %}">
<h3 class="product-meta-title accordion-title">{{ product_shipping_return_title }}</h3>
<div class="how-to-content accordion-content">
<div class="accordion-content-wrapper">{{ product_shipping_return_content }}</div>
</div>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>

{%- assign product_face_matters_title = product.metafields["global"]["face_matters_title"] -%}
{%- assign product_materials_image = product.metafields["global"]["materials_image"] -%}
{%- assign product_materials_title = product.metafields["global"]["materials_title"] -%}
{%- assign product_materials_description = product.metafields["global"]["materials_description"] -%}
{%- assign product_materials_icon_1 = product.metafields["global"]["materials_icon_1"] -%}
{%- assign product_materials_content_1 = product.metafields["global"]["materials_content_1"] -%}
{%- assign product_materials_icon_2 = product.metafields["global"]["materials_icon_2"] -%}
{%- assign product_materials_content_2 = product.metafields["global"]["materials_content_2"] -%}
{%- assign product_materials_icon_3 = product.metafields["global"]["materials_icon_3"] -%}
{%- assign product_materials_content_3 = product.metafields["global"]["materials_content_3"] -%}
{%- assign product_perfectly_img = product.metafields["global"]["perfectly_img"] -%}


{% if product_materials_title != blank %}
{%- assign video = product.metafields["global"]["video"] -%}
<section class="split-module {{ block.settings.video_block_position }}{% if video == blank %} images-only{% endif %}">

<div class="materials-section">

{% if product_perfectly_img != blank %}
<div class="split-block">
<div class="image-block split-image" style="background-image:url('{{ product_perfectly_img }}');">
<div class="inner-wrapper">
<a class="block-link-wrapper {{block.settings.text_color}}" href="{{ block.settings.link_two }}"><span class="split-title">{{ block.settings.title_two }}</span></a>
</div>
</div>
</div>
{% else %}

<div class="split-block materials-content">
{% if product_face_matters_title != blank %}

<h2 class="product-meta-title">{{ product_face_matters_title }}</h2>
{% else %}
<h2 class="product-meta-title">PERFECTLY PAIRS WITH</h2>
{% endif %}
{% if product_materials_description != blank %}
<p class="product-meta-desc">{{ product_materials_description }}</p>
{% endif %}
{% section "bottom-material" %}
</div>
{% endif %}

{% if video != blank %}
{%- if block.settings.fallback_image != blank -%}
{%- assign poster_image = block.settings.fallback_image | img_url: '800x800' -%}
{%- endif -%}
{% comment %}
{% assign video_url = video | remove: "https://vimeo.com/" %}
{% endcomment %}
<div class="split-block {{block.settings.text_color}} video-module" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<div class="split-video" style="position:relative;">



{% include 'video-module' %}

{% comment %}
<iframe src="https://player.vimeo.com/video/{{ video_url }}?autoplay=1&muted=0&title=0&byline=0&portrait=1&loop=1&controls=0&background=0" style="position:absolute;top:0;left:0;width:100%;height:378px;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow=autoplay></iframe>
{% endcomment %}
<div class="inner-wrapper">
<a class="block-link-wrapper {{block.settings.text_color}}" href="{{ block.settings.link_two }}"><span class="split-title">{{ block.settings.title_two }}</span></a>
</div>
</div>
</div>
{% else if product_materials_image != blank %}
<div class="split-block">
<div class="image-block split-image" style="background-image:url('{{ product_materials_image }}');">
<div class="inner-wrapper">
<a class="block-link-wrapper {{block.settings.text_color}}" href="{{ block.settings.link_two }}"><span class="split-title">{{ block.settings.title_two }}</span></a>
</div>
</div>
</div>
{% else %}
<div class="split-block {{block.settings.text_color}} video-module" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<div class="split-video" style="position:relative;">
<iframe src="https://player.vimeo.com/video/442184793?muted=0&autoplay=0&loop=0" style="position:absolute;top:0;left:0;width:100%;height:378px;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

{% comment %}
{% include 'video-module' %}
{% endcomment %}
<div class="inner-wrapper">
<a class="block-link-wrapper {{block.settings.text_color}}" href="{{ block.settings.link_two }}"><span class="split-title">{{ block.settings.title_two }}</span></a>
</div>
</div>
</div>
{% endif %}
</div>

</section>

<!--
<div class="product-meta materials-section waypoint-container" data-waypoint="materials" id="materials">

<div class="image-block split-image" style="background-image:url('{{ product_materials_image }}');">


{%- assign product_video = product.metafields["global"]["video"] -%}
{%- assign product_video_title = product.metafields["global"]["video_tag"] -%}
{%- assign product_video_poster_image = product.metafields["global"]["video_poster_image"] -%}
{% if product_video != blank %}
<div class="pdp-video-container">
<div class="video-wrapper">
<div class="video-controls"></div>
<div class="poster-image" style="background-image:url('{{ product_video_poster_image }}');"></div>
{% if product_video contains 'youtube' or product_video contains 'youtu.be' %}
{% assign id = product_video | split: 'v=' %}
{% assign video_url = 'https://youtube.com/embed/' | append: id[1] %}

<div id="ytplayer-{{id[1]}}" class="video-box" data-video-type="youtube" data-video-id="{{ id[1] }}"></div>

{% elsif product_video contains 'vimeo' %}
{% assign video_url = product_video| replace: 'https://vimeo.com/', 'https://player.vimeo.com/video/' %}
{% assign vm_video = product_video | split: "/" %}
<iframe id="video_box" src="{{ video_url }}?autoplay=1&amp;title=0&amp;byline=0&amp;portrait=1&amp;muted=1&amp;loop=1&amp;controls=1&amp;background=0" width="360" height="360" frameborder="0" title="" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ready="true" class="video-box"></iframe>
{% else %}
<div class="video-wrapper">
<video id="video_box" onError="style.display = 'none';" class="video-box">
<source src="{{ product_video }}" type="video/mp4">
Video not supported
</video>
</div>
{% endif %}
</div>
<span class="video-title">{{ product_video_title}}</span>
</div>
{% endif %}

</div>

<div class="materials-content">
<h2 class="product-meta-title">{{ product_materials_title }}</h2>
{% if product_materials_description != blank %}
<p class="product-meta-desc">{{ product_materials_description }}</p>
{% endif %}
<div class="items">
{%- if product_materials_content_1 -%}
<div class="item">
<div class="icon-wrap"><span class="icon icon-{{ product_materials_icon_1 }}"></span></div>
<div class="content-wrap"><span>{{ product_materials_content_1 }}</span></div>
</div>
{%- endif -%}
{%- if product_materials_content_2 -%}
<div class="item">
<div class="icon-wrap"><span class="icon icon-{{ product_materials_icon_2 }}"></span></div>
<div class="content-wrap"><span>{{ product_materials_content_2 }}</span></div>
</div>
{%- endif -%}
{%- if product_materials_content_3 -%}
<div class="item">
<div class="icon-wrap"><span class="icon icon-{{ product_materials_icon_3 }}"></span></div>
<div class="content-wrap"><span>{{ product_materials_content_3 }}</span></div>
</div>
{%- endif -%}
</div>
</div>
</div>
-->

<div class="cross-sell-wrapper" id="related-products">
{% include 'cross-sell' %}
</div>

<div class="waypoint-container" data-waypoint="reviews" id="reviews">
<div class="no-reviews"><span>There are no reviews on this product yet.</span></div>
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>

</div>

<div id="fix-stopper"></div>
{% endif %}
</div>

 

sinadabiri
Shopify Partner
23 0 1

In case you're interested, you can try our Product Reviews and Referrals app that automatically inserts the review stars to product pages.

 

It's free for 200 orders/month and you can access all our features in the free plan. The summary of our review features includes (which are much more than the Shopify product reviews app): collect photo reviews, custom review-request emails, import reviews from other apps and AliExpress, incentivizing product reviews with discount codes, reply/hide reviews, etc. 

 

Plus, we have a cool feature for referrals on social media. If you have a question, let me know. 

Mladen_Terzic
Tourist
8 1 2

Can you also share the URL of the website? and code snippet you added here for the reviews? The code is not readable this way.

Shopify Expert
seangaffney1
New Member
1 0 0

This is happening on my site as well. It's also happening on the theme preview example sites. It appears that Shopify made a change to the default styling of the elements added from the Product Reviews app. In addition to stars missing, the "write a review" form CSS is also now missing.

 

Hoping someone at Shopify can look into this.