Making Product Title Above Product Card on Mobile - Debut Theme

Highlighted
Excursionist
47 0 13

I was wondering if anyone could help on changing the product title to be above the image on mobile. My store is nutraesse.comIMG_0816.jpg

0 Likes
Highlighted
New Member
3 0 0

Hello,

I've visited your website, and this is easy to implement.  But you should tell me which theme you are using now, and I can tell you how to implement it or I can help you to fix it.

If you have any questions, you can contact me through icode1024@outlook.com

0 Likes
Highlighted
Excursionist
47 0 13

Hi,

It's the Debut Theme

0 Likes
Highlighted
New Member
3 0 0

Hello,

Important: Before editing the them code, please backup the current theme!!!

1. Find the product-template.liquid file and edit it.

2. Find the code: "<h1 class="product-single__title">{{ product.title }}</h1>"

3.Move it to the top of the top Div

4.The effect is as follow

effect.png

 

 

0 Likes
Highlighted
Shopify Partner
106 13 15

Hi @bwbrian,

Do you know coding? if yes, go to Online Store -> Actions -> Edit code ->Sections -> product-template.liquid.

Just copy title and add it above the image and add new class in it. For mobile, hide desktop title and show only mobile title and for desktop view, hide mobile title and show only desktop title.

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

 

For any theme customization and custom theme,
pls mail me on pankajtechcode@gmail.com.
I will do in affordable prices.

 

If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on pankajtechcode@gmail.com
0 Likes
Highlighted
Excursionist
47 0 13

 

Hi Robin,

Which "div" line should it go above? I see several above the h1 tag. 

 

When I added the "h1" line at the very top in the product-template.liquid, here is what it looked like.IMG_0823.PNG

 

I'd like the product title to be above the grid image on BOTH the "Shop" page and the actual product page, only on "Mobile" browsers.

0 Likes
Highlighted
New Member
3 0 0

Hi @bwbrian , it's not easy to describe it clearly, because there are too many code in that page. If you are willing to add me to your staff account, I can edit the code for you.

0 Likes
Highlighted
Excursionist
47 0 13

Sure, what email is best?

0 Likes
Highlighted
Excursionist
47 0 13

Hi Pankaj,

My coding knowledge is very limited, hahah. I did have a question regarding margins for my product card on the Shop page:

How can I align the product title with the product card on the Shop page?How can I align the product title with the product card on the Shop page?

Also, is there a way to change the fill color and text color for my "Add to Cart" button on my product page?Also, is there a way to change the fill color and text color for my "Add to Cart" button on my product page?

0 Likes
Highlighted
Shopify Partner
106 13 15

Hi @bwbrian,

This is code related issue. 

Can you add my email as a staff account.

I will fix this issue and also above title issue.

 

If It solves your problem, Please Like and Accept Solution.
Do you need Shopify customization and custom work on your store? Hire me.
Feel free to Contact me on pankajtechcode@gmail.com
0 Likes