Hey everyone,
I am trying to move the price on the product page above the product image on mobile only and need help with it. I use turbo theme. I would highly appreciate if anyone can suggest the coding instructions for the same. Thanks in advance!
https://tp4utd8klk2c1jge-62559748348.shopifypreview.com/products_preview?preview_key=64a9cc6e789eb72533f79f9516bd59ce - here’s a preview link for one of my product pages.
Here’s an image of what I’m trying to achieve.
@LitExtension maybe you can help 
I used your solution to put the title above the image on turbo.
Hi @Mazy ,
Please send me the code of product-template.liquid file, I will check it for you
@LitExtension here you go! Thank you for looking into this.
{% comment %}
@param product {Object}
The product object
@param context {String}
The name of the template
@param variant {Object}
The variant object
@param gallery_thumbnails {Boolean}
If true, show product thumbnails
@param gallery_click_to_zoom {Boolean}
If true, enable product lightbox
@param gallery_hover_zoom {Boolean}
If true, magnify product images on hover
@param gallery_arrows {Boolean}
If true, display slideshow arrows
@param gallery_thumbnail_position {String}
Thumbnail position, which is either 'below main image', 'left of main image', or 'right of main image'
@param gallery_thumbnail_slider {Boolean}
If true, activate thumbnail slider
@param gallery_slideshow_speed {Number}
The slideshow speed, which is a range between '0' and '6'
@param gallery_slideshow_transition {String}
Slideshow transition, which is either 'slide' or 'fade'
@param media_position {String}
Media position, which is either 'left' or 'right'
@param set_product_height {Boolean}
If true, set product media height
@param product_height {Number}
The product media height
@param video_looping {Boolean}
If true, loop videos
@param show_dynamic_checkout_button {Boolean}
If true, show dynamic checkout button
@param enable_shopify_review_comments {Boolean}
If true, enable product reviews and ratings
{% endcomment %}
{% comment %} HTML markup {% endcomment %}
{% if product != blank and context == 'product' %}
{%
render 'product__structured-data',
product: product
%}
{% endif %}
# {{ product.title }}
{% if enable_shopify_review_comments and settings.enable_shopify_product_badges %}
{% endif %}
{% if onboarding and context == 'featured-product' %}
{% capture i %}{% cycle "1", "2" %}{% endcapture %}
{{ 'product-' | append: i | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
{% else %}
{%
render 'product-images',
product: product,
gallery_thumbnails: gallery_thumbnails,
gallery_thumbnail_slider: gallery_thumbnail_slider,
gallery_click_to_zoom: gallery_click_to_zoom,
gallery_hover_zoom: gallery_hover_zoom,
gallery_arrows: gallery_arrows,
set_product_height: set_product_height
gallery_slideshow_transition: gallery_slideshow_transition,
gallery_slideshow_speed: gallery_slideshow_speed,
gallery_thumbnail_position: gallery_thumbnail_position,
video_looping: video_looping,
%}
{% endif %}
{% assign collection_handles = product.collections | map: 'handle' %}
{%
render 'price-ui-badges',
product: product,
collection_handles: collection_handles
%}
{% for block in section.blocks %}
{% case block.type %}
{% when 'vendor' %}
{% if onboarding %}
{{ 'homepage.onboarding.product_vendor' | t }}
{% else %}
{{ product.vendor | link_to_vendor }}
{% endif %}
{% when 'sku' %}
{% if variant.sku != blank %}
{{ variant.sku }}
{% endif %}
{% when 'title' %}
{% if context == 'product' %}
# {{ product.title }}
{% else %}
##
{% if onboarding %}
{{ 'homepage.onboarding.product_title' | t }}
{% else %}
{{ product.title }}
{% endif %}
{% endif %}
{% if enable_shopify_review_comments and settings.enable_shopify_product_badges %}
{% endif %}
{% when 'price' %}
{% if onboarding %}
$49.00
{% else %}
{% if collection_handles contains 'coming-soon' %}
{{ 'collections.general.coming_soon' | t }}
{% else %}
{% comment %}Inject @pixelunion/shopify-price-ui/price-ui begin{% endcomment %}
{% assign compare_at_price = false %}
{% if product.compare_at_price and product.compare_at_price != product.price %}
{% if product.compare_at_price_varies %}
{%- capture price_min -%}
{%-
render 'price-ui-templates',
template: 'price-min',
value: product.compare_at_price_min,
-%}
{%- endcapture -%}
{%- capture price_max -%}
{%-
render 'price-ui-templates',
template: 'price-max',
value: product.compare_at_price_max,
-%}
{%- endcapture -%}
{%- assign compare_at_price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
{% else %}
{%- capture compare_at_price -%}
{%-
render 'price-ui-templates',
template: 'price',
value: product.compare_at_price,
-%}
{%- endcapture -%}
{% endif %}
{% endif %}
{% if product.price_varies %}
{%- capture price_min -%}
{%-
render 'price-ui-templates',
template: 'price-min',
value: product.price_min,
-%}
{%- endcapture -%}
{%- capture price_max -%}
{%-
render 'price-ui-templates',
template: 'price-max',
value: product.price_max,
-%}
{%- endcapture -%}
{%- assign price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
{% else %}
{%- capture price -%}
{%-
render 'price-ui-templates',
template: 'price',
value: product.price,
-%}
{%- endcapture -%}
{% endif %}
{%-
render 'price-ui-templates',
template: 'price-ui',
compare_at_price: compare_at_price,
price: price,
unit_pricing: false,
-%}
{% comment %}Inject @pixelunion/shopify-price-ui/price-ui end{% endcomment %}
{% endif %}
{% endif %}
{% when 'description' %}
{% if onboarding %}
{{ 'homepage.onboarding.product_description' | t }}
{% else %}
{% if context == 'quickshop' %}
{% if block.settings.truncate_description %}
{{ product.description | truncatewords: block.settings.truncated_words }}
{% else %}
{{ product.description }}
{% endif %}
{{ 'collections.general.view_product_details_html' | t }}
{% else %}
{{ product.description }}
{% endif %}
{% endif %}
{% when 'form' %}
{% if onboarding %}
{% else %}
{% unless collection_handles contains 'coming-soon' %}
{%
render 'product-form',
product: product,
show_payment_button: show_dynamic_checkout_button,
collection_handles: collection_handles
%}
{%
render 'product-notify-me',
product: product
%}
{% endunless %}
{% endif %}
{% when 'text' %}
{{ block.settings.text }}
{% when 'product-links' %}
{% if block.settings.show_collections or block.settings.show_types or block.settings.show_tags %}
{% if block.settings.show_collections %}
{{ 'products.product.collections' | t }}:
{% for col in product.collections %}
{{ col.title }}{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endif %}
{% if block.settings.show_types %}
{{ 'products.product.product_types' | t }}:
{{ product.type | link_to_type }}
{% endif %}
{% if block.settings.show_tags %}
{% for tag in product.tags %}
{% if forloop.first %}
{{ 'products.product.tags' | t }}:
{% endif %}
{% unless tag contains 'meta-' %}
{{ tag }}{% unless forloop.last %},{% endunless %}
{% endunless %}
{% endfor %}
{% endif %}
{% endif %}
{% when 'share' %}
{%
render 'social-buttons',
context: 'product'
%}
{% when '@app' %}
{% render block %}
{% when 'size-chart' %}
{%- assign product_tags = product.tags | join: ' ' -%}
{% if product_tags contains 'meta-size-chart-' %}
{% for tag in product.tags %}
{% if tag contains 'meta-size-chart-' %}
{{ 'products.product.size_chart' | t }}
{%
render 'popup-size-chart',
product: product
%}
{% endif %}
{% endfor %}
{% elsif block.settings.size_chart != blank %}
{{ 'products.product.size_chart' | t }}
{%
render 'popup-size-chart',
product: product,
size_chart: block.settings.size_chart
%}
{% endif %}
{% endcase %}
{% endfor %}
{% if enable_shopify_review_comments
and context == 'product'
and settings.shopify_review_position == 'right'
%}
{{ product.metafields.spr.reviews }}
{% endif %}
{% if enable_shopify_review_comments
and context == 'product'
and settings.shopify_review_position == 'below'
%}
{{ product.metafields.spr.reviews }}
{% endif %}
{% if set_product_height %}
{% style %}
.gallery-wrap model-viewer {
min-height: {{ product_height }}px;
}
.gallery-wrap .product_gallery img,
.gallery-wrap .product_gallery .plyr--html5 video,
.gallery-wrap .product_gallery .plyr--youtube {
max-height: {{ product_height }}px;
}
{% endstyle %}
{% endif %}
{% if context == 'product' %}
{% comment %} Shopify-XR {% endcomment %}
{% if product.media %}
{% endif %}
{% endif %}
Hey @LitExtension , here you go! thank you for looking into this. The code can be found here:
Hi @Mazy ,
Please change all code:
{% comment %}
@param product {Object}
The product object
@param context {String}
The name of the template
@param variant {Object}
The variant object
@param gallery_thumbnails {Boolean}
If true, show product thumbnails
@param gallery_click_to_zoom {Boolean}
If true, enable product lightbox
@param gallery_hover_zoom {Boolean}
If true, magnify product images on hover
@param gallery_arrows {Boolean}
If true, display slideshow arrows
@param gallery_thumbnail_position {String}
Thumbnail position, which is either 'below main image', 'left of main image', or 'right of main image'
@param gallery_thumbnail_slider {Boolean}
If true, activate thumbnail slider
@param gallery_slideshow_speed {Number}
The slideshow speed, which is a range between '0' and '6'
@param gallery_slideshow_transition {String}
Slideshow transition, which is either 'slide' or 'fade'
@param media_position {String}
Media position, which is either 'left' or 'right'
@param set_product_height {Boolean}
If true, set product media height
@param product_height {Number}
The product media height
@param video_looping {Boolean}
If true, loop videos
@param show_dynamic_checkout_button {Boolean}
If true, show dynamic checkout button
@param enable_shopify_review_comments {Boolean}
If true, enable product reviews and ratings
{% endcomment %}
{% comment %} HTML markup {% endcomment %}
{% if product != blank and context == 'product' %}
{%
render 'product__structured-data',
product: product
%}
{% endif %}
# {{ product.title }}
{% if onboarding %}
$49.00
{% else %}
{% if collection_handles contains 'coming-soon' %}
{{ 'collections.general.coming_soon' | t }}
{% else %}
{% comment %}Inject @pixelunion/shopify-price-ui/price-ui begin{% endcomment %}
{% assign compare_at_price = false %}
{% if product.compare_at_price and product.compare_at_price != product.price %}
{% if product.compare_at_price_varies %}
{%- capture price_min -%}
{%-
render 'price-ui-templates',
template: 'price-min',
value: product.compare_at_price_min,
-%}
{%- endcapture -%}
{%- capture price_max -%}
{%-
render 'price-ui-templates',
template: 'price-max',
value: product.compare_at_price_max,
-%}
{%- endcapture -%}
{%- assign compare_at_price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
{% else %}
{%- capture compare_at_price -%}
{%-
render 'price-ui-templates',
template: 'price',
value: product.compare_at_price,
-%}
{%- endcapture -%}
{% endif %}
{% endif %}
{% if product.price_varies %}
{%- capture price_min -%}
{%-
render 'price-ui-templates',
template: 'price-min',
value: product.price_min,
-%}
{%- endcapture -%}
{%- capture price_max -%}
{%-
render 'price-ui-templates',
template: 'price-max',
value: product.price_max,
-%}
{%- endcapture -%}
{%- assign price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
{% else %}
{%- capture price -%}
{%-
render 'price-ui-templates',
template: 'price',
value: product.price,
-%}
{%- endcapture -%}
{% endif %}
{%-
render 'price-ui-templates',
template: 'price-ui',
compare_at_price: compare_at_price,
price: price,
unit_pricing: false,
-%}
{% comment %}Inject @pixelunion/shopify-price-ui/price-ui end{% endcomment %}
{% endif %}
{% endif %}
{% if enable_shopify_review_comments and settings.enable_shopify_product_badges %}
{% endif %}
{% if onboarding and context == 'featured-product' %}
{% capture i %}{% cycle "1", "2" %}{% endcapture %}
{{ 'product-' | append: i | placeholder_svg_tag: 'placeholder-svg placeholder-svg--product' }}
{% else %}
{%
render 'product-images',
product: product,
gallery_thumbnails: gallery_thumbnails,
gallery_thumbnail_slider: gallery_thumbnail_slider,
gallery_click_to_zoom: gallery_click_to_zoom,
gallery_hover_zoom: gallery_hover_zoom,
gallery_arrows: gallery_arrows,
set_product_height: set_product_height
gallery_slideshow_transition: gallery_slideshow_transition,
gallery_slideshow_speed: gallery_slideshow_speed,
gallery_thumbnail_position: gallery_thumbnail_position,
video_looping: video_looping,
%}
{% endif %}
{% assign collection_handles = product.collections | map: 'handle' %}
{%
render 'price-ui-badges',
product: product,
collection_handles: collection_handles
%}
{% for block in section.blocks %}
{% case block.type %}
{% when 'vendor' %}
{% if onboarding %}
{{ 'homepage.onboarding.product_vendor' | t }}
{% else %}
{{ product.vendor | link_to_vendor }}
{% endif %}
{% when 'sku' %}
{% if variant.sku != blank %}
{{ variant.sku }}
{% endif %}
{% when 'title' %}
{% if context == 'product' %}
# {{ product.title }}
{% else %}
##
{% if onboarding %}
{{ 'homepage.onboarding.product_title' | t }}
{% else %}
{{ product.title }}
{% endif %}
{% endif %}
{% if enable_shopify_review_comments and settings.enable_shopify_product_badges %}
{% endif %}
{% when 'price' %}
{% if onboarding %}
$49.00
{% else %}
{% if collection_handles contains 'coming-soon' %}
{{ 'collections.general.coming_soon' | t }}
{% else %}
{% comment %}Inject @pixelunion/shopify-price-ui/price-ui begin{% endcomment %}
{% assign compare_at_price = false %}
{% if product.compare_at_price and product.compare_at_price != product.price %}
{% if product.compare_at_price_varies %}
{%- capture price_min -%}
{%-
render 'price-ui-templates',
template: 'price-min',
value: product.compare_at_price_min,
-%}
{%- endcapture -%}
{%- capture price_max -%}
{%-
render 'price-ui-templates',
template: 'price-max',
value: product.compare_at_price_max,
-%}
{%- endcapture -%}
{%- assign compare_at_price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
{% else %}
{%- capture compare_at_price -%}
{%-
render 'price-ui-templates',
template: 'price',
value: product.compare_at_price,
-%}
{%- endcapture -%}
{% endif %}
{% endif %}
{% if product.price_varies %}
{%- capture price_min -%}
{%-
render 'price-ui-templates',
template: 'price-min',
value: product.price_min,
-%}
{%- endcapture -%}
{%- capture price_max -%}
{%-
render 'price-ui-templates',
template: 'price-max',
value: product.price_max,
-%}
{%- endcapture -%}
{%- assign price = 'product.price.range_html' | t: price_min: price_min, price_max: price_max -%}
{% else %}
{%- capture price -%}
{%-
render 'price-ui-templates',
template: 'price',
value: product.price,
-%}
{%- endcapture -%}
{% endif %}
{%-
render 'price-ui-templates',
template: 'price-ui',
compare_at_price: compare_at_price,
price: price,
unit_pricing: false,
-%}
{% comment %}Inject @pixelunion/shopify-price-ui/price-ui end{% endcomment %}
{% endif %}
{% endif %}
{% when 'description' %}
{% if onboarding %}
{{ 'homepage.onboarding.product_description' | t }}
{% else %}
{% if context == 'quickshop' %}
{% if block.settings.truncate_description %}
{{ product.description | truncatewords: block.settings.truncated_words }}
{% else %}
{{ product.description }}
{% endif %}
{{ 'collections.general.view_product_details_html' | t }}
{% else %}
{{ product.description }}
{% endif %}
{% endif %}
{% when 'form' %}
{% if onboarding %}
{% else %}
{% unless collection_handles contains 'coming-soon' %}
{%
render 'product-form',
product: product,
show_payment_button: show_dynamic_checkout_button,
collection_handles: collection_handles
%}
{%
render 'product-notify-me',
product: product
%}
{% endunless %}
{% endif %}
{% when 'text' %}
{{ block.settings.text }}
{% when 'product-links' %}
{% if block.settings.show_collections or block.settings.show_types or block.settings.show_tags %}
{% if block.settings.show_collections %}
{{ 'products.product.collections' | t }}:
{% for col in product.collections %}
{{ col.title }}{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endif %}
{% if block.settings.show_types %}
{{ 'products.product.product_types' | t }}:
{{ product.type | link_to_type }}
{% endif %}
{% if block.settings.show_tags %}
{% for tag in product.tags %}
{% if forloop.first %}
{{ 'products.product.tags' | t }}:
{% endif %}
{% unless tag contains 'meta-' %}
{{ tag }}{% unless forloop.last %},{% endunless %}
{% endunless %}
{% endfor %}
{% endif %}
{% endif %}
{% when 'share' %}
{%
render 'social-buttons',
context: 'product'
%}
{% when '@app' %}
{% render block %}
{% when 'size-chart' %}
{%- assign product_tags = product.tags | join: ' ' -%}
{% if product_tags contains 'meta-size-chart-' %}
{% for tag in product.tags %}
{% if tag contains 'meta-size-chart-' %}
{{ 'products.product.size_chart' | t }}
{%
render 'popup-size-chart',
product: product
%}
{% endif %}
{% endfor %}
{% elsif block.settings.size_chart != blank %}
{{ 'products.product.size_chart' | t }}
{%
render 'popup-size-chart',
product: product,
size_chart: block.settings.size_chart
%}
{% endif %}
{% endcase %}
{% endfor %}
{% if enable_shopify_review_comments
and context == 'product'
and settings.shopify_review_position == 'right'
%}
{{ product.metafields.spr.reviews }}
{% endif %}
{% if enable_shopify_review_comments
and context == 'product'
and settings.shopify_review_position == 'below'
%}
{{ product.metafields.spr.reviews }}
{% endif %}
{% if set_product_height %}
{% style %}
.gallery-wrap model-viewer {
min-height: {{ product_height }}px;
}
.gallery-wrap .product_gallery img,
.gallery-wrap .product_gallery .plyr--html5 video,
.gallery-wrap .product_gallery .plyr--youtube {
max-height: {{ product_height }}px;
}
{% endstyle %}
{% endif %}
{% if context == 'product' %}
{% comment %} Shopify-XR {% endcomment %}
{% if product.media %}
{% endif %}
{% endif %}
Hope it helps!
@LitExtension I made the changes you suggested, unfortunately it doesn’t seem to be working. Now on mobile, no price is displaying
Hi @Mazy ,
Please send me the preview link, I will check it
@LitExtension here you go! https://rkix5pphfn3wlc9x-62559748348.shopifypreview.com/products_preview?preview_key=706b53bee0b7807e5edcfdfef535130b
Hi @Mazy ,
I checked and the price is updated by JS, that’s why when you move, it doesn’t show. I tried searching in JS but still can’t find how to change it.
So I suggest you contact Turbo Theme, only they can help you check and move it.
Or you need to hire experts and they will debug everything, but the best way is still to contact Turbo Theme.
Hope it helps!
