How To Modify Product Page's Image Position.

Store Design
1

in the mobile view First of all I want to set Product Title, But Right now Product Image came first. so how cai i edit that thing ? I have try to edit my product templete but there are no option for image position.

Here is My Website Link: https://bagiffy.com/

1 Like
2

Hey @milanrdhameliya

For that, all you have to do is just simply drag your product title code above your product image code in your main-product.liquid, It’s quite a complicated task and requires good knowledge of coding so if you’re not familiar with coding then I would highly recommend you to hire a Shopify developer who can help you out with that. Feel free to let me know if you want me to help you out and I would be more than happy to give you a helping hand.

Best Regards,

Moeed

3

Hello @milanrdhameliya ,

To move the product title above the product image on mobile view, you’ll likely need to edit the HTML structure of the product page and apply some CSS for mobile-specific adjustments.

you have to wrap the title and image in a parent container. Locate your product.liquid or the relevant section file in your theme (e.g., product-main.liquid).

Wrap the title and image in a parent container, like this:


# {{ product.title }}

{{ product | image }}

Use CSS for Mobile Reordering

.product-details-container {
  display: flex;
  flex-direction: column; /* Default for desktop */
}

@media screen and (max-width: 768px) {
  .product-details-container {
    display: flex;
    flex-direction: column-reverse; /* Reverse the order for mobile */
  }
}
4

HI @milanrdhameliya

In order to fulfill your request, please follow these stepsStep 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above 

{% style %}
      .custom-show-mobile{
        display: none;
      }
      @media screen and (max-width: 768px){
        .product__title.custom-show-mobile{
          display: block;
        }
        .product__info-container > .product__title{
          display: none !important;
        }
      }
    {% endstyle %}

Then in main-product.liquid, please add this code in this position https://prnt.sc/e0OvlZBRvMKo


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

Here is the result: https://prnt.sc/k3wHAwOL1W9Z

I hope this helps

Best,

Daisy