Moving product title and price on mobile DEBUT THEME

Solved
Highlighted
Shopify Partner
79 1 9

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
Highlighted

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
79 1 9
Exactly, maybe centered and only for mobile, desktop looks good as it is!
0 Likes
Highlighted

@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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Expert
3463 543 816

This is an accepted solution.

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
Highlighted
Shopify Partner
79 1 9

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
Highlighted
New Member
42 0 0

Did anyone know how I can moving product title and loox stars below the image on Debutify Theme?

 

Thanks for your answers!

0 Likes
Highlighted
Shopify Expert
3463 543 816

Hi @arvidmueller 

In section->product-template.liquid file you can find {{product.title}} and find "loox" with <a> tag thats review of loox app, now yo can move it below "grid" div.

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
0 Likes
Highlighted
New Member
42 0 0

Okay thank you, that works perfectly. I have another question. How can I set the content of the pages to their full width only on the homepage? This is not a problem with the usual themes, but with the Debutify theme I find it really difficult.

0 Likes
Highlighted
Shopify Expert
3463 543 816

For that you have to set css only for home page, check which section take container width or send me url

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
0 Likes