Boost Mobile Sales: How to Move Product Details Above Images on Shopify

Hey everyone! As a Shopify expert who spends a lot of time digging into what makes stores tick (and what makes them convert!), I often see common questions pop up in the community that have a huge impact on user experience. Recently, a thread caught my eye that's super relevant for anyone looking to fine-tune their mobile shopping experience: moving key product details like the title, price, and review stars *above* the product image.

Why is this a big deal, you ask? Think about it. On mobile, screen real estate is precious. Shoppers are often scrolling quickly, and if they have to scroll past a large product image just to see the name of the product or its price, you might lose their attention. Getting those crucial details front and center can make a real difference, especially for those quick decision-makers.

The Community Weighs In: Getting Product Info Front & Center

The discussion kicked off with @apa_1, who was trying to achieve this exact layout on their store using the Enterprise theme. They even shared a helpful reference image to show exactly what they were aiming for:

It's a smart move for mobile UX, and it quickly garnered interest from others like @ParkingMarker who were looking for a similar solution. This kind of collaborative problem-solving is what makes the Shopify Community so valuable!

The brilliant @v.marychenka stepped in with some fantastic CSS code. Initially, they provided a solution that moved the title, theme's rating, and price. But then, @apa_1 asked a great follow-up question: "Can I get the reviews above as well?" This is where the solution got even better.

@v.marychenka clarified a crucial point: review stars might come from your theme's built-in rating block OR from an app like Judge.me. The initial code worked for the theme's stars, but the updated code addresses both scenarios! This is a perfect example of why it's important to be specific and iterate on solutions in community discussions.

One important caveat @v.marychenka highlighted is that the actual list of reviews (the detailed customer comments) often sits in a separate block or tab, making it harder to move with just a few lines of CSS like this. This solution focuses on the product title, price, and those all-important star ratings.

Your Step-by-Step Guide to Moving Product Details

Ready to implement this on your store? Here's how you can move your product title, price, and review stars (whether from your theme or Judge.me) above the product image, specifically for mobile users, based on the final, refined solution shared in the community:

Important Precaution: Always, always, duplicate your theme first! This creates a backup in case anything goes wrong. You can do this in your Shopify admin under Online Store > Themes > Actions > Duplicate.

Step 1: Access Your Theme Editor

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit (it should be your live theme or the duplicated version you're working on).
3. Click on Actions > Edit code.

Step 2: Locate Custom CSS

1. In the theme code editor, look for a file named something like theme.css, base.css, or go to the Sections folder and find product-template.liquid or a similar product section file.
2. A safer and often easier place is to use the theme editor's built-in Custom CSS feature. Go back to Online Store > Themes, click Customize on your theme, then look for Theme settings (usually a gear icon or a specific tab) and find a section for Custom CSS. This is generally the best place for small CSS additions as it keeps your code separate.

Step 3: Paste the CSS Code

This is the refined code that handles both theme-based ratings and Judge.me badges, ensuring the title, stars, and price appear above the image on mobile:

@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; }
}

Paste this code into the Custom CSS area. This code specifically targets devices with a maximum width of 767.98 pixels (which covers most phones and smaller tablets). For desktop users, your product page layout will remain unchanged, which is exactly what we want!

Step 4: Save and Test

1. Click Save.
2. Now, open your store on a mobile device or resize your browser window to a mobile width. Navigate to a product page and check if the title, review stars, and price are now displayed above the product image.

A Few Important Notes

• Theme Updates: Remember that theme updates can sometimes overwrite or conflict with custom code. After any major theme update, it's a good practice to check your product pages to ensure this customization is still working as expected.
• Shopify Support: As @v.marychenka wisely pointed out, Shopify Support typically won't troubleshoot custom forum code. If you run into issues, you might need to revert your changes or consult a developer.
• Flexbox Power: The CSS uses Flexbox properties like display: flex and order to rearrange elements dynamically. It's a powerful tool for responsive design!

Implementing small, thoughtful UI improvements like this can significantly enhance your mobile shoppers' experience, potentially leading to better engagement and conversion rates. It's these kinds of insights, shared and refined within the Shopify community, that empower us all to build better online stores. Happy customizing!