How to move product title, price and review stars above product image for mobile only?

hello i was wondering how to move the product title price and reviews to the top of page in mobile only.

i have tried already using this code however it just moves all product block to top of page (image attached) is there a way to isolate just the title, reviews and price block to the top of page.

And its also duplicated the reviews icon and moved it to the top but is also only 1 product block so if i hide the reviews icon product block it will also remove the top and bottom one.

im also using refresh theme

Heres the code i used:


    
     {%- for block in section.blocks -%}
          {%- case block.type -%}
            {%- when '@app' -%}
              {% render block %}
                        {%- when 'title' -%}
        

          # {{ product.title | escape }}
           
            ## 
              {{ product.title | escape }}
            
          
        

            {%- when 'price' -%}
        
          {%- render 'price',
            product: product,
            use_variant: true,
            show_badges: true,
            price_class: 'price--large'
          -%}
        
  
            {%- when 'rating' -%}
              {%- if product.metafields.reviews.rating.value != blank -%}
                {% liquid
                  assign rating_decimal = 0
                  assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
                  if decimal >= 0.3 and decimal <= 0.7
                    assign rating_decimal = 0.5
                  elsif decimal > 0.7
                    assign rating_decimal = 1
                  endif
                %}
                
                  
                

                

                  
                    {{- product.metafields.reviews.rating.value }} /
                    {{ product.metafields.reviews.rating.value.scale_max -}}
                  
                

                

                  ({{ product.metafields.reviews.rating_count }})
                  
                    {{- product.metafields.reviews.rating_count }}
                    {{ 'accessibility.total_reviews' | t -}}
                  
                

              {%- endif -%}      
            {%- endcase -%}
           {%- endfor -%}      
    

    
    

Thanks

Hi there,

This is Amelia from PageFly - Landing Page Builder App

It seems the code you’ve used only displays the product information on the product page, but the HTML for the product media might not be properly arranged.
If you’d like, you can share the URL of your product page, and I’d be happy to take a look and help you resolve the issue.

I hope to hear from you soon!

Best regards,
Amelia | PageFly

hello thankyou for reaching out.

i havent published the theme so it wont look like the picture but heres the URL:

https://theaquacure.com.au/products/hydrogen-water-bottle

im also wanting to change it for all products not just this product

thankyou

Hi there,

To move the information like the rating, product title, and price above the media on mobile, you should place the mobile-specific div above the product media in your HTML structure. Then, you can hide that mobile div on larger screens using CSS.

I think this should help you achieve the desired layout!

Best regards,
Amelia | PageFly

hello

thankyou for getting back to me.

could you provide this in a step by step guide because i am a beginner and only really know how to copy and paste.

and itll also help anyone else trying to do this so i will be able to accept as a solution.

Hi there,
You can copy and paste the code that you created for the mobile to the red arrow in the image that I sent you.

I hope this can work for you!

Best regards,
Amelia | PageFly

hello,

yeah iv tried this, pasting my code into there, but it dosnt work.

i followed the instructions from this shopify community post, thats where i got the code aswell.

https://community.shopify.com/c/shopify-design/how-to-move-product-title-price-and-review-stars-above-product/td-p/2191753