Ad

How To Place Review Section In Different Position For Mobile And Desktop In Shopify?

- 1 answer

I have this product-template.liquid file:

    <div itemscope itemtype="http://schema.org/Product" id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-image-zoom-type="{{ section.settings.product_image_zoom_type }}" data-related-enabled="{{ section.settings.product_related_enable }}" data-show-extra-tab="{{ section.settings.show_extra_tab }}" data-extra-tab-content="{{ section.settings.extra_tab_content }}" data-enable-history-state="true">

  {% case section.settings.add_to_cart_width %}
    {% when 'small' %}
      {%- assign btn_class = 'btn--wide' -%}
      {%- assign productform_class = 'product-form--wide' -%}
    {% when 'medium' %}
      {%- assign btn_class = 'btn--wide' -%}
      {%- assign productform_class = 'product-form--wide' -%}
    {% when 'large' %}
      {%- assign btn_class = 'btn--full' -%}
      {%- assign productform_class = 'product-form--full' -%}
  {% endcase %}

  {% if section.settings.add_to_cart_width != 'small' %}
    <style>
      @media screen and (min-width: 769px){
        .single-option-selector,
        .quantity-selector {
          {% if section.settings.add_to_cart_width == 'medium' %}
            min-width: 50%;
          {% else %}
            min-width: 100%;
          {% endif %}
        }
      }
    </style>
  {% endif %}

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  <div class="section-header section-header--breadcrumb">
    {% include 'breadcrumb' %}
  </div>

  <div class="product-single">
    <div class="grid product-single__hero">
      <div class="grid__item post-large--one-half">

        {% if section.settings.product_thumbnails_position == 'below' or product.images.size < 2 %}

          <div class="product-single__photos">
            {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

            {% for image in product.images %}
              {% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
              {% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
              {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              {% include 'image-style' with image: image, small_style: false, width: 700, height: 1024, wrapper_id: img_wrapper_id, img_id: img_id %}

              <div id="{{ img_wrapper_id }}" class="product-single__image-wrapper supports-js{% unless featured_image == image %} hide{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} zoom-lightbox{% endif %}" data-image-id="{{ image.id }}">
                <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                  <img id="{{ img_id }}"
                       class="product-single__image lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
                       {% if featured_image == image %}src="{{ image | img_url: '300x300' }}"{% endif %}
                       data-src="{{ img_url }}"
                       data-widths="[180, 370, 540, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                       data-aspectratio="{{ image.aspect_ratio }}"
                       data-sizes="auto"
                       {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}
                       alt="{{ image.alt | escape }}">
                </div>
              </div>
            {% endfor %}

            <noscript>
              <img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
            </noscript>
          </div>

          {% if product.images.size > 1 %}

            <ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">
              {% for image in product.images %}
                <li class="grid__item wide--one-quarter large--one-third medium-down--one-third">
                  <a data-image-id="{{ image.id }}" target="_blank" rel="nofollow noreferrer" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                    <img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
                  </a>
                </li>
              {% endfor %}
            </ul>

          {% endif %}

        {% else %}

          <div class="grid">

            <div class="grid__item four-fifths product-single__photos" id="ProductPhoto">
              {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

              {% for image in product.images %}
                {% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
                {% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
                {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                {% include 'image-style' with image: image, small_style: false, width: 700, height: 1024, wrapper_id: img_wrapper_id, img_id: img_id %}

                <div id="{{ img_wrapper_id }}" class="product-single__image-wrapper supports-js{% unless featured_image == image %} hide{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} zoom-lightbox{% endif %}" data-image-id="{{ image.id }}">
                  <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                    <img id="{{ img_id }}"
                         class="product-single__image lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
                         {% if featured_image == image %}src="{{ image | img_url: '300x300' }}"{% endif %}
                         data-src="{{ img_url }}"
                         data-widths="[180, 370, 540, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                         data-aspectratio="{{ image.aspect_ratio }}"
                         data-sizes="auto"
                         {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}
                         alt="{{ image.alt | escape }}">
                  </div>
                </div>
              {% else %}
                <img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
              {% endfor %}

              <noscript>
                <img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
              </noscript>
            </div>

            <div class="grid__item one-fifth">

              <ul class="grid product-single__thumbnails" id="ProductThumbs">
                {% for image in product.images %}
                  <li class="grid__item">
                    <a data-image-id="{{ image.id }}" target="_blank" rel="nofollow noreferrer" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                      <img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
                    </a>
                  </li>
                {% endfor %}
              </ul>

            </div>

          </div>

        {% endif %}

        {% if section.settings.product_image_zoom_type == 'lightbox' %}
        <ul class="gallery" class="hidden">
          {% for image in product.images %}
          <li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '1024x1024', scale: 2 }}"></li>
          {% endfor %}
        </ul>
        {% endif %}

      </div>
      <div class="grid__item post-large--one-half">
        {% if section.settings.product_vendor_enable %}
          <span class="h3" itemprop="brand">{{ product.vendor }}</span>
        {% endif %}
        <h1 itemprop="name">{{ product.title }}</h1>

        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          {% assign variant = product.selected_or_first_available_variant %}

          <meta itemprop="priceCurrency" content="{{ shop.currency }}">
          <link itemprop="availability" target="_blank" rel="nofollow noreferrer" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

          <div class="product-single__prices{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__prices--policy-enabled{% endif %}">
            <span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            <span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}">
              {{ product.price | money }}
            </span>

            {% if product.compare_at_price > product.price %}
              <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.product.sale_price' | t }}</span>
              <s id="ComparePrice" class="product-single__sale-price">
                {{ product.compare_at_price_max | money }}
              </s>
            {% else %}
              <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
              <s id="ComparePrice" class="product-single__sale-price hide">
                {{ product.compare_at_price_max | money }}
              </s>
            {% endif %}
          </div>

          {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
            <div class="product-single__policies{% if product.has_only_default_variant and section.settings.product_quantity_enable == false %} product__policies--no-dropdowns{% endif %} rte">
              {%- if shop.taxes_included -%}
                {{ 'products.general.include_taxes' | t }}
              {%- endif -%}
              {%- if shop.shipping_policy.body != blank -%}
                {{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- endif -%}
            </div>
          {%- endif -%}

          {% form 'product', product, class:productform_class %}
            <select name="id" id="ProductSelect-{{ section.id }}" 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 class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
              <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
              <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
            </div>

            <button type="submit" name="add" id="AddToCart" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">
              <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
            </button>
            {% if section.settings.enable_payment_button %}
              {{ form | payment_button }}
            {% endif %}
          {% endform %}

          {% unless section.settings.show_extra_tab == false or pages[section.settings.extra_tab_content] == empty %}
            <div class="tabs">
              <ul class="tab-switch__nav">
                <li>
                  <a target="_blank" rel="nofollow noreferrer" href="#description" data-link="description" class="tab-switch__trigger h3">{{ 'products.product.description' | t }}</a>
                </li>
                <li>
                  <a target="_blank" rel="nofollow noreferrer" href="#extra" data-link="extra" class="tab-switch__trigger h3">{{ pages[section.settings.extra_tab_content].title }}</a>
                </li>
              </ul>
              <div id="description" class="tab-switch__content" data-content="description">
                <div class="product-description rte" itemprop="description">
                  {{ product.description }}
                </div>             
              </div>
              <div id="extra" class="tab-switch__content" data-content="extra">
                <div class="rte">
                  {{ pages[section.settings.extra_tab_content].content }}
                </div>
              </div>
            </div>
          {% else %}
            <div class="product-description rte" itemprop="description">
              {{ product.description }}
            </div>
          {% endunless %}
          
          <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>


          {% if section.settings.social_sharing %}
            <hr class="hr--clear hr--small">
            <h2 class="h4">{{ 'products.general.share_title' | t }}</h2>
            {% include 'social-sharing' %}
          {% endif %}
        </div>

      </div>
    </div>
  </div>

  {% if section.settings.product_related_enable %}
    {% include 'related-products' %}
  {% endif %}

</div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
{% endunless %}

How can i achieve this reviews section location different for mobile and desktop. I want reviews section below big image in desktop and in mobile version i want it below specification section.

I tried adding it below product description section but in mobile version it is now showing under product image which i don't want. I want it to show under product specification in mobile .... so there is a conflict. How can i have separate little tweak for different version ?

How can i do it?

Ad

Answer

It's simple CSS hack, you just need to use two different div for desktop and mobile. You can hide one div on Mobile(use CSS class: small--hide) and hide other on desktop (use CSS class: medium-up--hide).

Reference code for Debut Theme

<div class="grid__item medium-up--one-half small--hide">
<!-- Content to be shown on Desktop -->
</div>

<div class="mobile-nav-wrapper medium-up--hide">
<!-- Content to be shown on Mobile -->
</div>
Ad
source: stackoverflow.com
Ad