Hi i want to update the mobile version of my product pages so that the Title, Sub-heading and product price elements would move on top of the product images.
Currently there are some elements that are made with third party apps, like the total reviews count and cost-saving element, i would sort those myself. But could you guys help me move the heading and sub-heading up? Thanks! Here is the product page: The Lowrider | Europe's Premium Body & Intimate Trimmer | MANSOME Europe
Have you like connected reviews with your Google reviews?
Also can you specify the use of an app for a basic functionality as that of cost saving? Does it help you in like order or inventory something that would make you to use an app for this?
Hey 
Yes, this is definitely doable.
If you’re using a standard Shopify theme (like Dawn), you can move the title, sub-heading and price above the images on mobile only with a small CSS tweak.
Go to:
Online Store → Themes → Edit Code → base.css (or theme.css)
Then paste this at the bottom:
@media screen and (max-width: 768px) {
.product {
display: flex;
flex-direction: column;
}
.product__info-wrapper {
order: -1;
}
.product__media-wrapper {
order: 1;
}
}
This will only affect mobile and won’t change your desktop layout.
If it doesn’t work, it just means your theme uses different class names let me know which theme you’re on and I will adjust it for you
You can’t really do that with CSS alone, as entire product information part, inlcuding Title, Price, description, variant selectors are inside one element while media gallery is in another.
What I’d do:
Add a section above the main Product Info section, not sure what this theme has, but, say something like Text or Heading and use Product > Title as Dynamic source.
This section is to show Product Title, etc on mobile.
To hide it on desktop add to its “Custom CSS” setting code like this :
@media (min-width: 768px) {
{ display: none; } /* no selector -- Custom CSS will it apply to entire section*/
}
Then add a “Custom CSS” to main Product info section to hide main product title on mobile, like:
@media (max-width: 767px) {
.product-title,
.custom-badge-pos-outer + .product-rte { /* subtitle */
display: none;
}
}
If moving price is needed, it would be more complex as price may change with variant selection… Possible with some JS code though…
So im using roam theme. And im not even able to save that as it gives me erorr in file theme.liquid
Thats interesting way of doing it. Wouldnt the dynamic variable work with price too? Same way as title?
Nope. It would not update with variant change or subscription selection, etc.
Since product title is per product, it will work well.
Dynamic sources are not that dynamic 
Also, if it’s in a separate section, it would be a pain to track changes in a different section for those (generally).
What if we change our approach and instead of moving the seperate elements up, we move the media gallery down? All the other elements I can manually move in theme editor.
So we move image gallery here on mobile:
Unfortunately, you can’t really do that, as Media Gallery is in one wrapper element and the rest of product info section blocks are all in another wrapper.
You’d need to seriously modify theme code for this, which I do not recommend.
Actually, you can use Sidekick to generate you a section to mirror the product price element.
I’ve tried this prompt:
Create a product template section that uses JavaScript mutation observer to detect and mirror the content of the product price element. The section should watch for changes to the price element and automatically update a mirrored display whenever the price changes.
This can be an option for you.
Hi, I have checked your site. I think it’s really easy.
You can make mobile content for these(title, rating stars, product-rte) on above image
example:
…………………. title and ratings, product-rte
…………………………….
.product-details__mobile { display: block; } @media (min-width: 1024px) { .product-details__mobile { display: none; } }Let me know if it’s not working. I will help you. Thank you
Ah okay, since you’re using Roam, you shouldn’t edit theme.liquid for this. That file controls the overall layout, and even small mistakes there can cause save errors
Instead, check the main product section file (usually something like main-product.liquid or inside the Sections folder) The image and product info layout is controlled there
If you’re only trying to change the order on mobile it’s safer to add the CSS inside base.css / theme.css rather than editing theme.liquid.
What exact error is it showing when you try to save?
