Boost Mobile Sales: How to Move Product Details Above Images on Shopify (Community Insights!)

Hey everyone! As a Shopify migration expert and someone who spends a lot of time digging through community discussions, I often see common pain points that can be easily addressed with a little know-how. One topic that popped up recently, and really resonated with me, was about optimizing product pages for mobile – specifically, how to get those crucial product details like the title, price, and review stars to show above the product image.

It’s a fantastic question that came from a store owner using the Enterprise theme, who, like many of you, wanted to improve the mobile shopping experience. They even shared a reference image to illustrate exactly what they were aiming for:

Why Mobile Product Page Layout Matters So Much

Think about it: most of your customers are probably browsing your store on their phones. On a small screen, every scroll counts. If a customer has to scroll past a big product image just to see the product name, price, or how good the reviews are, you're adding friction. Getting that vital information “above the fold” on mobile can significantly improve conversion rates because shoppers immediately see what they need to decide if they’re interested.

The Community Steps In: A CSS Solution

Our awesome community member, v.marychenka, quickly jumped in with a super helpful CSS snippet. This is a classic example of how a little custom code can make a big difference without needing to overhaul your entire theme. The beauty of this solution is that it uses a @media query, meaning these changes only apply when the screen width is small – perfect for mobile devices, leaving your desktop layout untouched.

Initial Approach: Title, Rating, and Price

The first piece of code offered targeted the product title (.product-info__title), the theme’s rating block (.product-info__rating), and the product price (.product-price). Here’s what it looked like:

@media (max-width: 767.98px) {
  .product.js-product { display: flex; flex-direction: column; }
  .product-info, .product-info sticky-scroll-direction, .product-info__sticky { display: contents; }
  .product-info__title, .product-info__rating, .product-price { order: -1; }
}

This code essentially tells the browser: “When the screen is phone-sized, treat the product section as a flexible column, and push these specific elements (title, rating, price) to the very top by giving them a negative order.” Pretty clever, right?

Refining for Review Apps (Like Judge.me)

The original poster, apa_1, then asked a great follow-up: “Can I get the reviews above as well?” This is where v.marychenka clarified an important distinction. The initial code moved the *rating stars* (the preview badge). However, if your review stars come from an app like Judge.me, or if you’re talking about the *full list of reviews*, the solution gets a bit more nuanced.

For the rating stars specifically, v.marychenka provided an updated, more robust CSS snippet that handles both the theme’s native rating block and third-party app badges like Judge.me. This version uses slightly different order values to ensure the title is at the very top, followed by the rating/price:

@media (max-width: 767.98px) {
.product.js-product { display: flex; flex-direction: column; }
.product-info,.product-info sticky-scroll-direction,.product-info__sticky { display: contents; }
.product-info__title { order: -2; }
.product-info__rating,.product-info__block:has(.jdgm-preview-badge),.product-price { order: -1; }
}

Notice the addition of .product-info__block:has(.jdgm-preview-badge) – that’s the key to making sure your Judge.me review stars get moved too! The order: -2; for the title pushes it even further up, making it the very first element, followed by the rating and price with order: -1;.

Now, about moving the *full review list* itself – v.marychenka explained that this is much harder with simple CSS. Why? Because the full review list often sits in a completely different section or tab (like a “Recensioner tab” as mentioned in the thread), outside the main product information block. Moving something like that would require more extensive theme file modifications, not just CSS reordering.

Ready to Implement? Here’s How!

If you’re looking to implement this on your own Shopify store, here are the steps:

1. Duplicate Your Theme (Crucial First Step!): Before making any code changes, always, always, always duplicate your live theme. This creates a backup you can revert to if anything goes wrong. Go to your Shopify Admin > Online Store > Themes. Find your current theme, click “Actions”, and select “Duplicate.”
2. Access Theme Editor: Once duplicated (or if you’re working on the duplicate), click “Customize” on the theme you want to edit.
3. Find Custom CSS: In the theme editor, look for “Theme settings” (usually a gear icon or at the bottom left) and then “Custom CSS.”
4. Paste the Code: Copy the second (updated) CSS snippet provided above and paste it into the Custom CSS box.
5. Save and Test: Click “Save”. Then, view your product pages on a mobile device or use your browser’s developer tools to simulate a mobile screen size. You should see the product title, rating stars, and price now appear above your product image.
6. Keep an Eye Out: As v.marychenka wisely noted, theme updates can sometimes break custom code. After any theme update, it’s a good practice to quickly check your product pages on mobile to ensure everything still looks as it should.

This kind of small but impactful optimization is exactly what helps create a seamless shopping experience for your customers. If you're looking to start your own online journey or improve an existing one, building a solid foundation is key. Starting a Shopify store provides you with powerful tools and a fantastic community to support you every step of the way.

It’s really inspiring to see the community come together to solve these challenges. Kudos to v.marychenka for providing such a clear and effective solution, and to apa_1 for asking a question that clearly resonated with others like ParkingMarker. It just goes to show that a little CSS can go a long way in making your Shopify store more user-friendly and, ultimately, more successful!