title: How to place review section in different position for Mobile and Desktop in Shopify?
body: <p>I have this product-template.liquid file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;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"&gt;
  
    {% 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' %}
      &lt;style&gt;
        @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 %}
          }
        }
      &lt;/style&gt;
    {% endif %}
  
    &lt;meta itemprop="url" content="{{ shop.url }}{{ product.url }}"&gt;
    &lt;meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}"&gt;
  
    &lt;div class="section-header section-header--breadcrumb"&gt;
      {% include 'breadcrumb' %}
    &lt;/div&gt;
  
    &lt;div class="product-single"&gt;
      &lt;div class="grid product-single__hero"&gt;
        &lt;div class="grid__item post-large--one-half"&gt;
  
          {% if section.settings.product_thumbnails_position == 'below' or product.images.size &lt; 2 %}
  
            &lt;div class="product-single__photos"&gt;
              {% 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 %}
  
                &lt;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 }}"&gt;
                  &lt;div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"&gt;
                    &lt;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 }}"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              {% endfor %}
  
              &lt;noscript&gt;
                &lt;img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}"&gt;
              &lt;/noscript&gt;
            &lt;/div&gt;
  
            {% if product.images.size &gt; 1 %}
  
              &lt;ul class="product-single__thumbnails grid-uniform" id="ProductThumbs"&gt;
                {% for image in product.images %}
                  &lt;li class="grid__item wide--one-quarter large--one-third medium-down--one-third"&gt;
                    &lt;a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail"&gt;
                      &lt;img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}"&gt;
                    &lt;/a&gt;
                  &lt;/li&gt;
                {% endfor %}
              &lt;/ul&gt;
  
            {% endif %}
  
          {% else %}
  
            &lt;div class="grid"&gt;
  
              &lt;div class="grid__item four-fifths product-single__photos" id="ProductPhoto"&gt;
                {% 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 %}
  
                  &lt;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 }}"&gt;
                    &lt;div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"&gt;
                      &lt;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 }}"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                {% else %}
                  &lt;img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}"&gt;
                {% endfor %}
  
                &lt;noscript&gt;
                  &lt;img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}"&gt;
                &lt;/noscript&gt;
              &lt;/div&gt;
  
              &lt;div class="grid__item one-fifth"&gt;
  
                &lt;ul class="grid product-single__thumbnails" id="ProductThumbs"&gt;
                  {% for image in product.images %}
                    &lt;li class="grid__item"&gt;
                      &lt;a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail"&gt;
                        &lt;img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}"&gt;
                      &lt;/a&gt;
                    &lt;/li&gt;
                  {% endfor %}
                &lt;/ul&gt;
  
              &lt;/div&gt;
  
            &lt;/div&gt;
  
          {% endif %}
  
          {% if section.settings.product_image_zoom_type == 'lightbox' %}
          &lt;ul class="gallery" class="hidden"&gt;
            {% for image in product.images %}
            &lt;li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '1024x1024', scale: 2 }}"&gt;&lt;/li&gt;
            {% endfor %}
          &lt;/ul&gt;
          {% endif %}
  
        &lt;/div&gt;
        &lt;div class="grid__item post-large--one-half"&gt;
          {% if section.settings.product_vendor_enable %}
            &lt;span class="h3" itemprop="brand"&gt;{{ product.vendor }}&lt;/span&gt;
          {% endif %}
          &lt;h1 itemprop="name"&gt;{{ product.title }}&lt;/h1&gt;
  
          &lt;div itemprop="offers" itemscope itemtype="http://schema.org/Offer"&gt;
            {% assign variant = product.selected_or_first_available_variant %}
  
            &lt;meta itemprop="priceCurrency" content="{{ shop.currency }}"&gt;
            &lt;link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}"&gt;
  
            &lt;div class="product-single__prices{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__prices--policy-enabled{% endif %}"&gt;
              &lt;span id="PriceA11y" class="visually-hidden"&gt;{{ 'products.product.regular_price' | t }}&lt;/span&gt;
              &lt;span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}"&gt;
                {{ product.price | money }}
              &lt;/span&gt;
  
              {% if product.compare_at_price &gt; product.price %}
                &lt;span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false"&gt;{{ 'products.product.sale_price' | t }}&lt;/span&gt;
                &lt;s id="ComparePrice" class="product-single__sale-price"&gt;
                  {{ product.compare_at_price_max | money }}
                &lt;/s&gt;
              {% else %}
                &lt;span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true"&gt;{{ 'products.product.sale_price' | t }}&lt;/span&gt;
                &lt;s id="ComparePrice" class="product-single__sale-price hide"&gt;
                  {{ product.compare_at_price_max | money }}
                &lt;/s&gt;
              {% endif %}
            &lt;/div&gt;
  
            {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
              &lt;div class="product-single__policies{% if product.has_only_default_variant and section.settings.product_quantity_enable == false %} product__policies--no-dropdowns{% endif %} rte"&gt;
                {%- 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 -%}
              &lt;/div&gt;
            {%- endif -%}
  
            {% form 'product', product, class:productform_class %}
              &lt;select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants"&gt;
                {% for variant in product.variants %}
                  {% if variant.available %}
  
                    &lt;option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}"&gt;{{ variant.title }} - {{ variant.price | money_with_currency }}&lt;/option&gt;
  
                  {% else %}
                    &lt;option disabled="disabled"&gt;
                      {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                    &lt;/option&gt;
                  {% endif %}
                {% endfor %}
              &lt;/select&gt;
  
              &lt;div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}"&gt;
                &lt;label for="Quantity"&gt;{{ 'products.product.quantity' | t }}&lt;/label&gt;
                &lt;input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector"&gt;
              &lt;/div&gt;
  
              &lt;button type="submit" name="add" id="AddToCart" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}"&gt;
                &lt;span id="AddToCartText"&gt;{{ 'products.product.add_to_cart' | t }}&lt;/span&gt;
              &lt;/button&gt;
              {% 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 %}
              &lt;div class="tabs"&gt;
                &lt;ul class="tab-switch__nav"&gt;
                  &lt;li&gt;
                    &lt;a href="#description" data-link="description" class="tab-switch__trigger h3"&gt;{{ 'products.product.description' | t }}&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;a href="#extra" data-link="extra" class="tab-switch__trigger h3"&gt;{{ pages[section.settings.extra_tab_content].title }}&lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
                &lt;div id="description" class="tab-switch__content" data-content="description"&gt;
                  &lt;div class="product-description rte" itemprop="description"&gt;
                    {{ product.description }}
                  &lt;/div&gt;             
                &lt;/div&gt;
                &lt;div id="extra" class="tab-switch__content" data-content="extra"&gt;
                  &lt;div class="rte"&gt;
                    {{ pages[section.settings.extra_tab_content].content }}
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            {% else %}
              &lt;div class="product-description rte" itemprop="description"&gt;
                {{ product.description }}
              &lt;/div&gt;
            {% endunless %}
            
            &lt;div id="shopify-product-reviews" data-id="{{product.id}}"&gt;{{ product.metafields.spr.reviews }}&lt;/div&gt;
  
  
            {% if section.settings.social_sharing %}
              &lt;hr class="hr--clear hr--small"&gt;
              &lt;h2 class="h4"&gt;{{ 'products.general.share_title' | t }}&lt;/h2&gt;
              {% include 'social-sharing' %}
            {% endif %}
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    {% if section.settings.product_related_enable %}
      {% include 'related-products' %}
    {% endif %}
  
  &lt;/div&gt;
  
  {% unless product == empty %}
    &lt;script type="application/json" id="ProductJson-{{ section.id }}"&gt;
      {{ product | json }}
    &lt;/script&gt;
  {% endunless %}</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>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 ?</p>
  
  <p>How can i do it?</p>