Review section placement

yivuridn
Tourist
11 0 3

Hello,

 

I would like to know how I could place my review section (Loox) above the footer instead of under my product photo. I use the Motion theme.

Store: https://galaxycave.nl/products/galaxycave™-projector

0 Likes
neeravmakwana
Shopify Partner
163 29 35

Hi, please search for this in product-template.liquid

"cs": "Stránky produktu",

and see if you have {% schema %} a couple of lines before it.

Your review related code block should be just before {% schema %}. can you try and let me know if it worked.

0 Likes
yivuridn
Tourist
11 0 3

Thank you for your fast reply. I tried searching for  {% schema %}. What should I adjust to put the review section above the footer so at the bottom of the product page?

 

 

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "select",
        "id": "description_style",
        "label": "Description position",
        "default": "default",
        "options": [
          {
            "value": "default",
            "label": "Next to media"
          },
          {
            "value": "full",
            "label": "Below media"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "social_enable",
        "label": "Enable social sharing",
        "default": true
      },
      {
        "type": "header",
        "content": "Media"
      },
      {
        "type": "paragraph",
        "content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
      },
      {
        "type": "select",
        "id": "image_size",
        "label": "Image size",
        "default": "medium",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ]
      },
      {
        "type": "select",
        "id": "thumbnail_position",
        "label": "Thumbnail position",
        "default": "beside",
        "options": [
          {
            "value": "beside",
            "label": "Next to media"
          },
          {
            "value": "below",
            "label": "Below media"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "thumbnail_arrows",
        "label": "Show thumbnail arrows"
      },
      {
        "type": "checkbox",
        "id": "enable_video_looping",
        "label": "Enable video looping",
        "default": true
      },
      {
        "type": "select",
        "id": "product_video_style",
        "label": "Video style",
        "default": "muted",
        "options": [
          {
            "value": "muted",
            "label": "Video without sound"
          },
          {
            "value": "unmuted",
            "label": "Video with sound"
          }
        ],
        "info": "Video with sound will not autoplay"
      }
    ]
  }
{% endschema %}


{% if product.metafields.loox.num_reviews %}
<script id="looxSchemaJson" type="application/ld+json">
{
	"@context": "http://schema.org",
	"@type": "Product",
	"@id": {{ canonical_url | json }},
	"aggregateRating": {
		"@type": "AggregateRating",
		"ratingValue": "{{ product.metafields.loox.avg_rating }}",
		"reviewCount": "{{ product.metafields.loox.num_reviews }}"
	},
	"name": {{ product.title | json }}
}
</script>
{% endif %}


	<div id="looxReviews" data-product-id="{{product.id}}" class="loox-reviews-default">{{ product.metafields.loox.reviews }}</div>

 

 

0 Likes
neeravmakwana
Shopify Partner
163 29 35

Is that the only % schema... on that page? In one of the themes I tested this in, there was just one and it was immediately above languages... I was hoping adding review related code block just above that schema should have helped you.

0 Likes
yivuridn
Tourist
11 0 3

Above that code this is the following`;

 

{%- liquid
  assign isModal = false
  if template == 'product.modal'
    assign isModal = true
  endif
-%}

{%- render 'product-template',
  product: product,
  description_style: section.settings.description_style,
  image_container_width: section.settings.image_size,
  section_id: product.id,
  social: section.settings.social_enable,
  isModal: isModal,
  thumbnail_position: section.settings.thumbnail_position,
  thumbnail_arrows: section.settings.thumbnail_arrows,
  video_looping: section.settings.enable_video_looping,
  video_style: section.settings.product_video_style
-%}

{%- if settings.enable_product_reviews and settings.reviews_layout == 'full' -%}
  <hr id="Reviews-{{ product.id }}" class="hr--large">
  <div class="index-section index-section--small product-reviews product-reviews--full">
    <div class="page-width">
      <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
    </div>
  </div>
{%- endif -%}
0 Likes
neeravmakwana
Shopify Partner
163 29 35

Hmm, you may need someone else to help you. Can you do one last thing. would you be able to share the code of the entire product page? Thanks.

0 Likes
yivuridn
Tourist
11 0 3

Product-template.liquid (Sections):

{%- liquid
  assign isModal = false
  if template == 'product.modal'
    assign isModal = true
  endif
-%}

{%- render 'product-template',
  product: product,
  description_style: section.settings.description_style,
  image_container_width: section.settings.image_size,
  section_id: product.id,
  social: section.settings.social_enable,
  isModal: isModal,
  thumbnail_position: section.settings.thumbnail_position,
  thumbnail_arrows: section.settings.thumbnail_arrows,
  video_looping: section.settings.enable_video_looping,
  video_style: section.settings.product_video_style
-%}

{%- if settings.enable_product_reviews and settings.reviews_layout == 'full' -%}
  <hr id="Reviews-{{ product.id }}" class="hr--large">
  <div class="index-section index-section--small product-reviews product-reviews--full">
    <div class="page-width">
      <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
    </div>
  </div>
{%- endif -%}

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "select",
        "id": "description_style",
        "label": "Description position",
        "default": "default",
        "options": [
          {
            "value": "default",
            "label": "Next to media"
          },
          {
            "value": "full",
            "label": "Below media"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "social_enable",
        "label": "Enable social sharing",
        "default": true
      },
      {
        "type": "header",
        "content": "Media"
      },
      {
        "type": "paragraph",
        "content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
      },
      {
        "type": "select",
        "id": "image_size",
        "label": "Image size",
        "default": "medium",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ]
      },
      {
        "type": "select",
        "id": "thumbnail_position",
        "label": "Thumbnail position",
        "default": "beside",
        "options": [
          {
            "value": "beside",
            "label": "Next to media"
          },
          {
            "value": "below",
            "label": "Below media"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "thumbnail_arrows",
        "label": "Show thumbnail arrows"
      },
      {
        "type": "checkbox",
        "id": "enable_video_looping",
        "label": "Enable video looping",
        "default": true
      },
      {
        "type": "select",
        "id": "product_video_style",
        "label": "Video style",
        "default": "muted",
        "options": [
          {
            "value": "muted",
            "label": "Video without sound"
          },
          {
            "value": "unmuted",
            "label": "Video with sound"
          }
        ],
        "info": "Video with sound will not autoplay"
      }
    ]
  }
{% endschema %}


{% if product.metafields.loox.num_reviews %}
<script id="looxSchemaJson" type="application/ld+json">
{
	"@context": "http://schema.org",
	"@type": "Product",
	"@id": {{ canonical_url | json }},
	"aggregateRating": {
		"@type": "AggregateRating",
		"ratingValue": "{{ product.metafields.loox.avg_rating }}",
		"reviewCount": "{{ product.metafields.loox.num_reviews }}"
	},
	"name": {{ product.title | json }}
}
</script>
{% endif %}


	<div id="looxReviews" data-product-id="{{product.id}}" class="loox-reviews-default">{{ product.metafields.loox.reviews }}</div>

 

Product-template-liquid (Snippet):

{%- liquid
  assign current_variant = product.selected_or_first_available_variant

  assign product_zoom_size = '1800x1800'
  assign product_image_size = '620x'
  case image_container_width
    when 'small'
      assign product_image_width = 'medium-up--two-fifths'
      assign product_description_width = 'medium-up--three-fifths'
      assign product_image_size = '480x'
    when 'medium'
      assign product_image_width = 'medium-up--one-half'
      assign product_description_width = 'medium-up--one-half'
      assign product_image_size = '620x'
    when 'large'
      assign product_image_width = 'medium-up--three-fifths'
      assign product_description_width = 'medium-up--two-fifths'
      assign product_image_size = '740x'
  endcase

  unless thumbnail_position
    assign thumbnail_position = 'beside'
  endunless

  unless description_style
    assign description_style = 'full'
  endunless
-%}

<div id="ProductSection-{{ section_id }}"
  class="product-section"
  data-section-id="{{ section_id }}"
  data-section-type="product-template"
  data-product-title="{{ product.title | escape }}"
  data-product-handle="{{ product.handle }}"
  {% if settings.product_zoom_enable %}
    data-image-zoom="true"
  {% endif %}
  {% if settings.inventory_enable %}
    data-inventory="true"
  {% endif %}
  {% if settings.inventory_transfers_enable %}
    data-incoming-inventory="true"
  {% endif %}
  {% unless isModal %}
    data-enable-history-state="true"
  {% endunless %}>

  {%- render 'product-template-variables', product: product, current_variant: current_variant -%}

  <div class="page-content">
    <div class="page-width">

      {%- if settings.show_breadcrumbs and isModal != true -%}
        {%- render 'breadcrumbs' -%}
      {%- endif -%}

      <div class="grid">
        <div class="grid__item {{ product_image_width }} product-single__sticky">
          {%- render 'product-images',
            section_id: section_id,
            product: product,
            isModal: isModal,
            product_zoom_size: product_zoom_size,
            product_image_size: product_image_size,
            thumbnail_position: thumbnail_position,
            thumbnail_arrows: thumbnail_arrows,
            video_looping: video_looping,
            video_style: video_style
          -%}
        </div>

        <div class="grid__item {{ product_description_width }}">

          <div class="product-single__meta">
            {%- if settings.vendor_enable -%}
              <div class="product-single__vendor">
                {%- assign vendor_handle = product.vendor | handleize  -%}
                {%- if collections[vendor_handle] != empty -%}
                  <a href="{{ routes.collections_url }}/{{ collections[vendor_handle].handle }}">
                    {{ collections[vendor_handle].title }}
                  </a>
                {%- else -%}
                  {{ product.vendor | link_to_vendor }}
                {%- endif -%}
              </div>
            {%- endif -%}

            {%- if isModal -%}
              <p class="h2 product-single__title">
                {{ product.title }}
              </p>
            {%- else -%}
              <h1 class="h2 product-single__title">
                {{ product.title }}
              </h1>
            {%- endif -%}

            {%- if settings.enable_product_reviews and settings.reviews_layout == 'full' -%}
              {%- if isModal -%}
                {%- assign review_link = product.url | within: collection | append: '#Reviews-' | append: product.id -%}
              {%- else -%}
                {%- assign review_link = '#Reviews-' | append: product.id -%}
              {%- endif -%}
              <a href="{{ review_link }}" class="product-single__review-link">
                <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
              </a>
            {%- endif -%}

            {%- if settings.sku_enable -%}
              <p id="Sku-{{ section_id }}" class="product-single__sku">
                {%- if current_variant.sku -%}
                  {{ current_variant.sku }}
                {%- endif -%}
              </p>
            {%- endif -%}

            {%- assign hide_sale_price = true -%}
            {%- if product.compare_at_price_max > product.price -%}
              {%- if current_variant.compare_at_price -%}
                {%- assign hide_sale_price = false -%}
              {%- endif -%}
              <span
                id="PriceA11y-{{ section_id }}"
                class="visually-hidden"
                aria-hidden="{{ hide_sale_price }}">
                  {{ 'products.general.regular_price' | t }}
              </span>
              <span class="product__price-wrap-{{ section_id }}{% if hide_sale_price %} hide{% endif %}">
                <span id="ComparePrice-{{ section_id }}" class="product__price product__price--compare">
                  {%- if current_variant.compare_at_price > current_variant.price -%}
                    {{ current_variant.compare_at_price | money }}
                  {%- endif -%}
                </span>
              </span>
              <span id="ComparePriceA11y-{{ section_id }}" class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
            {%- else -%}
              <span id="PriceA11y-{{ section_id }}" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            {%- endif -%}

            <span id="ProductPrice-{{ section_id }}"
              class="product__price{% if current_variant.compare_at_price > current_variant.price %} sale-price{% endif %}">
              {{ current_variant.price | money }}
            </span>

            <div class="product__unit-price product__unit-price-wrapper--{{ section_id }}{% unless current_variant.unit_price_measurement %} hide{% endunless %}">
              {%- capture unit_price_base_unit -%}
                <span class="product__unit-base--{{ section_id }}">
                  {%- if current_variant.unit_price_measurement -%}
                    {%- if current_variant.unit_price_measurement.reference_value != 1 -%}
                      {{ current_variant.unit_price_measurement.reference_value }}
                    {%- endif -%}
                    {{ current_variant.unit_price_measurement.reference_unit }}
                  {%- endif -%}
                </span>
              {%- endcapture -%}

              <span class="product__unit-price--{{ section_id }}">{{ current_variant.unit_price | money }}</span>/{{ unit_price_base_unit }}
            </div>

            {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
              <div class="product__policies rte">
                <small>
                  {%- if shop.taxes_included -%}
                    {{ 'products.product.include_taxes' | t }}
                  {%- endif -%}
                  {%- if shop.shipping_policy.body != blank -%}
                    {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                  {%- endif -%}
                </small>
              </div>
            {%- endif -%}

            {%- if settings.inventory_enable or settings.inventory_transfers_enable -%}
              {%- assign variants_with_inventory_tracking = product.variants | where: 'inventory_management', 'shopify' -%}

              <script>
                // Store inventory quantities in JS because they're no longer
                // available directly in JS when a variant changes.
                // Have an object that holds all potential products so it works
                // with quick view or with multiple featured products.
                window.inventories = window.inventories || {};
                window.inventories['{{section_id}}'] = {};
                 {%- for variant in variants_with_inventory_tracking -%}
                  window.inventories['{{section_id}}'][{{variant.id}}] = {
                    'quantity': {{ variant.inventory_quantity | default: 0 }},
                    'incoming': {{ variant.incoming | default: false | json }},
                    'next_incoming_date': {{ variant.next_incoming_date | date: format: 'date' | json }}
                  };
                 {%- endfor -%}
              </script>

              {% comment %}
                If loaded in quick view, it might be from a JS-loaded function
                that loads recommended products. If that's the case, the above
                JS will not set the variant inventory. Add it to an accessible
                data div to read later instead.
              {% endcomment %}
              {%- if isModal -%}
                <div
                  data-section-id="{{ section_id }}"
                  class="hide js-product-inventory-data"
                  aria-hidden="true"
                  >
                  {%- for variant in variants_with_inventory_tracking -%}
                    <div
                      class="js-variant-inventory-data"
                      data-id="{{ variant.id }}"
                      data-quantity="{{ variant.inventory_quantity | default: 0 }}"
                      data-incoming="{{ variant.incoming | default: false | json }}"
                      data-date="{{ variant.next_incoming_date | date: format: 'date' | json }}"
                    >
                    </div>
                  {%- endfor -%}
                </div>
              {%- endif -%}

              {%- assign inventory_visible = false -%}
              {%- if settings.inventory_enable and current_variant.inventory_management == 'shopify' -%}
                {%- if current_variant.inventory_quantity <= settings.inventory_threshold and current_variant.inventory_quantity >= 0 -%}
                  {%- assign inventory_visible = true -%}
                {%- endif -%}
              {%- endif -%}
              {%- liquid
                if current_variant.inventory_quantity == 0 or current_variant.inventory_policy == 'continue'
                  assign inventory_visible = false
                endif

                assign show_incoming = false
                if current_variant.incoming and inventory_visible == false and current_variant.inventory_quantity <= settings.inventory_threshold
                  assign show_incoming = true
                endif
              -%}
              <div
                id="ProductInventory-{{ section_id }}"
                class="product__inventory {% unless inventory_visible %}hide{% endunless %}"
                >
                {%- if current_variant.available -%}
                  {{ 'products.product.stock_label' | t: count: current_variant.inventory_quantity }}
                {%- endif -%}
              </div>

              {%- if settings.inventory_transfers_enable -%}
                <div
                  id="ProductIncomingInventory-{{ section_id }}"
                  class="product__inventory{% if inventory_visible %} hide{% endif %}">
                  {%- if show_incoming == true -%}
                    {%- if current_variant.next_incoming_date -%}
                      {%- assign date = current_variant.next_incoming_date | date: format: 'date' -%}
                      {%- if current_variant.available -%}
                        {{ 'products.product.will_not_ship_until' | t: date: date }}
                      {%- else -%}
                        {{ 'products.product.will_be_in_stock_after' | t: date: date }}
                      {%- endif -%}
                    {%- else -%}
                      {{ 'products.product.waiting_for_stock' | t }}
                    {%- endif -%}
                  {%- endif -%}
                </div>
              {%- endif -%}
            {% endif %}

            <hr class="hr--medium">

            {% unless isModal %}
              {% comment %}
                Shopify's product form attaches a number of tracking
                scripts that cause slower load times and false statistics.
                Quick view modals request these on-demand.
              {% endcomment %}
              {%- render 'product-form',
                section_id: section_id,
                product: product,
                current_variant: current_variant
              -%}
            {% else %}
              <div
                id="ProductFormHolder-{{ section_id }}"
                data-url="{{ product.url }}"
                data-template="{{ product.template_suffix }}">
                  {%- if product.options.size > 0 -%}
                    {%- for i in (1..product.options.size) -%}
                      <div class="placeholder-content" style="min-height: 86px; max-width: 66%;"></div>
                    {%- endfor -%}
                  {%- endif -%}
                  <div class="placeholder-content" style="min-height: 86px;"></div>
                </div>
            {% endunless %}

            {%- unless isModal -%}
              {%- if settings.surface_pickup_enable -%}
                <div id="StoreAvailabilityHolder-{{ section_id }}"
                  data-product-name="{{ product.title | escape }}"
                  data-base-url="{{ shop.url }}{{ routes.root_url }}"
                  ></div>
              {%- endif -%}
            {%- endunless -%}

            {%- unless description_style == 'full' -%}

              {%- unless settings.product_description_collapse -%}
                <div class="product-single__description rte">
                  {{ product.description }}
                </div>
              {%- endunless -%}

              {%- render 'product-additional-content', product: product, section_id: section_id -%}
            {%- endunless -%}

            {%- if social -%}
              {%- render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product -%}
            {%- endif -%}
          </div>
        </div>
      </div>

      {% if description_style == 'full' %}
        {% unless settings.product_description_collapse %}
          <div class="product-single__description-full rte">
            {{ product.description }}
          </div>
        {% endunless %}

        {%- render 'product-additional-content', product: product, section_id: section_id -%}
      {% endif %}
    </div>
  </div>
</div>
<div id="looxReviews" data-product-id="{{product.id}}" class="loox-reviews-default">{{ product.metafields.loox.reviews }}</div>
0 Likes
neeravmakwana
Shopify Partner
163 29 35
Thanks. If you search for "review" in both files, you'll notice that it's
code block appears somewhere in the middle instead of the end.

You'll need to cut and paste the relevant portion of the code in both files
to the end and try.

I think you're using a paid theme which I can't experiment wth. So I'm
unable to be more clear. But if this doesn't solve it, I'm sure someone
from the community will be able to.

0 Likes