Moving product title and price on mobile DEBUT THEME

Solved
Shopify Partner
44 1 3

It is really unfortunate that Debut Theme pushes product title and price below the product images. I would like to have it above and centered for small and medium media queries. It is of my understanding that there's no way to actually detect media screen size in liquid so I'm a bit lost here. Here's an example of a product on my website, I like how it looks on desktop, but I would rather have it centered above the product image on mobile.

0 Likes

Hello ,

Dou you want in below format as shown in below screenshots

2019-12-04_13-44.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Shopify Partner
44 1 3
Exactly, maybe centered and only for mobile, desktop looks good as it is!
0 Likes

@Jose13,

If you want Product name and price above the image on mobile then you have to customize product-template.liquid file

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes

Success.

Shopify Expert
2514 423 533

Hi @Jose13 

Follow this:

1. open Section->product-template.liquid ->find bellow code(For Desktopview):

 <h1 class="product-single__title">{{ product.title }}</h1>

now add mob_hide class in this line so it look like 

<h1 class="mob_hide product-single__title">{{ product.title }}</h1>

2. Now copy this code and paste bellow this line with desk_hide class so it look like bellow (For mobile view):

<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
<h1 class="desk_hide product-single__title">{{ product.title }}</h1>

3. Now ass this css in Asset->theme.scss file at bottom:

@media only screen and (max-width: 767px) {  .mob_hide{display:none};}
@media only screen and (min-width: 767px) {  .desk_hide{display:none;}}

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Shopify Partner
44 1 3

This is perfect, worked wonders, just added the desk/mob classes to the price and now it looks like I wanted, thank you!

0 Likes