How can I rearrange product title and star ratings on mobile view?

Technical Q&A

Topic summary

Goal: Move product title and star ratings above the product image on mobile product pages (Shopify), initially on Debutify 3.0.

Proposed solution (Debutify 3.0):

  • Edit product-template.liquid (Shopify’s Liquid template). Insert a mobile-specific title element (e.g.,

    {{ product.title }}

    ) right after the div with class “grid product-single”. Do the same for the review/star rating snippet.
  • Add CSS to toggle visibility by screen size: show the new mobile title/reviews on mobile and hide the original right-column title; invert behavior on larger screens. A sample CSS block and a reference screenshot link are provided.
  • Offer: Helper can check if added as staff.

Follow-up (Warehouse theme):

  • Another user requests the same change for the Warehouse theme. The helper asks for a separate community post for review. The user supplies a thread link and store URL, then asks about timing.

Status:

  • Debutify approach outlined with code and CSS being central to implementation.
  • Warehouse-specific solution pending; no confirmed resolution yet.
Summarized with AI on February 19. AI used: gpt-5.
1

Hi everyone!

I’m trying to move the product title and star raings above the product image for each product page on the mobile view. As of right now it is below the product image and you have to scroll down to see it on the product page.

I’m currently using the Debutify 3.0 theme.

Any suggestions would be greatly appreciated!

Thanks!

2

Hi @salahmezz2 ,

To move the product title and review before image on mobile. You can do that.

Step 1: Open “product-template.liquid” file name and add this snippet:

{{ product.title }}

after div has class “grid product-single”

Do it same with review tag.

Step 2: Hide product title on right column on mobile.

.product-single__title {

display: none;

}

.product-single__title–mobile {

display: block;

}

@media only screen and (max-width: 1024px) {

.product-single__title {

display: block;

}

.product-single__title–mobile {

display: none;

}

}

Link to refer: https://prnt.sc/114kae0

Hope this helps. If you can not do that, you can add me as a staff. I’ll check it for you.

3

Hi @LitExtension . I saw your solution and have a same problem. I want to move the product title above the product image. I use a Warehouse theme. May I know if you could also help me with this too?

4

Hi @Fariss ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

5

Hi @LitExtension . I already created a post before.
Here - Place Product Title On Top in Mobile Version (Warehouse Theme) - Shopify Community
This is my store URL - herbaworks.com.my
I’m using Warehouse Theme.

6

@LitExtension looking forward to your solution. May I know if it takes much time for you to provide the solution?