How To Modify Product Page's Image Position.

[milanrdhameliya]

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/

[Moeed]

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

[oscprofessional]

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:

<div class="product-details-container">
<div class="product-title">
<h1>{{ product.title }}</h1>
</div>
<div class="product-image">
{{ product | image }}
</div>
</div>

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 */
  }
}

[DaisyVo]

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 </head>

 {% 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

<div class="product__title custom-show-mobile" {{ block.shopify_attributes }}>
          <h1>{{ product.title | escape }}</h1>
          <a href="{{ product.url }}" class="product__title">
            <h2 class="h1">
              {{ product.title | escape }}
            </h2>
          </a>
        </div>

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

I hope this helps

Best,

Daisy