Question posted in 
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 }}" 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 }}" 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" 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 href="#description" data-link="description" class="tab-switch__trigger h3">{{ 'products.product.description' | t }}</a>
</li>
<li>
<a 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?
3
Answers
add 2 divs one for mobile and one for desktop use visibility likewise if in desktop hide mobile div and in mobile div hide desktop div.
You have to put code inside 2 divs for show widget given by review app you are using on your store.
If any help i am available to help you.
I have created 150+ stores on shopify and still creating more.
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