MOBILE TITLE AND PRICING BEFORE MAIN IMAGE

The code snippet provided applies to the Ecomify theme and ensures that the product title and price are displayed above the main image on mobile devices only, while maintaining the desktop layout unchanged. This enhancement improves the mobile user experience by making crucial information more accessible.

     <style>
          @media (max-width: 992px) {
              .product-content h1.title,
              .product-content .loox-rating,
              .product-content .product-price,
              .product-content #product-limited-offer {
                  display: none !important;
              }
          }
        </style>
        <div class="d-lg-none mb-4">
            {% liquid
                for block in section.blocks
                    case block.type
                        when 'title'
                            render 'product-block-title', block: block
                        when 'price'
                            render 'product-block-price', block: block, form: form
                        when 'limited_offer'
                          render 'product-block-limited-offer', block: block
                        when '@app'
                            render block
                    endcase
                endfor
            %}
        </div>

By following these steps and using the provided code, you'll ensure the product title and price are prominently displayed above the main image on mobile devices without affecting the desktop layout. This method maintains a clean and organized presentation, enhancing the mobile shopping experience on your Ecomify theme.