Move Product Title & Price Above Image On Mobile Product Page (Debutify Theme)

Technical Q&A
1

Hi, can someone please assist with code to move the “Title” and “Price” information above the image on product page (for mobile only)
I’m using the theme Debutify.
I searched and found answers to the same question, but the solutions didn’t seem to work for me. (maybe different theme)

My website is www.checkoutfirst.com

Sample.png
Sample.png507×827 273 KB

1 Like
2

@checkoutfirst

thanks for post can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media screen and (max-width: 769px) {
.grid.product-single {margin-top: 80px;}
.product-single__title {position: absolute;top: 0;margin-top: 20px;}
}
1 Like
3

Hi!

for studio 10.0.0 the theme.scss.liquid doesn’t exist, so where should we add this?

Thanks for solution,

Omer

1 Like