Shopify themes, liquid, logos, and UX
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.
Hello!
May you please share some code samples from your product.liquid?
{% 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&title=0&byline=0&portrait=1&muted=1&loop=1&controls=1&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>
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.
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.
this is happening for me too. I'm sure that it was displaying correctly in my non-2.0 theme.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024