Cracking the Code: How to Reposition Product Details Above the Image on Mobile for Shopify

So there I was, fiddling with the knobs and buttons of my own Shopify store like a mad scientist trying to turn lead into gold—or more accurately, like someone who thought they could build a website in an hour because the advertisement said it was "easy." Sure, it was easy if you wanted every product page to look like a Picasso painting. I needed to get those product details above the image, at least on a mobile view, lest my visitors keep scrolling right past them, never seeing the magic right at their fingertips. And who was my muse in this digital renaissance? None other than Stef, battling the same monster over at Interior Glows.

A Curse Upon the Product Image

Together we'll tame this beast. First, our mission: move that product title, those shining stars of reviews, and the price tag to hover above the product image like celestial beings. For mobile only. Nothing else will change.

In the trying times of CSS wrangling, specificity is our guiding star. I'll tell you what we did. Armed with coffee and a weary hope, we opened the Shopify theme editor. A sanctuary of sorts where magic happens—or more realistically, where you gasp at your own mess-ups.

The Great (Code) Quest

We embarked on the adventure as one would tentatively dip their toe in cold water. Here's the cheat sheet:

Unlock the Vault: Log in to your Shopify admin panel. Go to Online Store > Themes. Find the theme you’re using and tap “Actions” followed by “Edit Code”. If you feel goosebumps at this point, don't worry, that's normal.
Find the Elusive Stylesheet: Under "Assets", locate the infamous theme.scss.liquid or sometimes just theme.css. Open that beast.
Insert the Sorcery:
Add the CSS snippet below right at the bottom—let's not get too fancy about placement, it'll work well down there.
```
@media only screen and (max-width: 768px) {
   .product-single__meta {
      position: absolute;
      top: 10px;
      z-index: 10;
      background: rgba(255, 255, 255, 0.8);
      padding: 10px;
      width: calc(100% - 20px);
      box-sizing: border-box;
   }
   .product-single__photos {
      position: relative;
   }
}
```
This block of code is our pixie dust. It tells mobile browsers to treat the product details—every single one of those divine texts—as if they're top tier, making them stay at the pinnacle of your image. We even added a bit of translucence to the background of the info-box, to keep the vibe classy, as though saying “Hey, we mean business.”
Save & Verify: It’s the moment of truth. Hit save, cross your fingers, and check your product page on a mobile device. You'll marvel at your newly acquired power of customization. You are now the king or queen of your own digital realm.

Revel in the Victory Dance

With our code set, we experienced the thrill of victory—not the agony of defeat. The product titles, now proudly perched atop the images, smelled like success. It was as though we had climbed Shopify Everest and discovered a stunning panoramic view.

We solved it, Stef, my friend. And while every scrolling thumb pauses there to witness the glory of your product, perhaps they’ll feel that extra little touch—a cover note of delight saying you took the extra step for them.

Looking back, it’s clear that even small challenges can remind us how a touch of ingenuity and a dash of craziness make digital dreams come true. Next time you find yourself battling a stubborn online world, remember: we’ve got more than just ones and zeroes at our disposal—we have each other. And, an ever-persistent cup of coffee.