I want to display Product-image before the main information but in iPads (and in other tabs) Main-information is displaying before product images. I try to achieve by changing order as:

<referenceContainer name="product.info.media" htmlTag="div" before="-" />
<referenceContainer name="product.info.main" htmlTag="div" after="product.info.media"  />

But this is not working. This problem prevails only in mobile tabs (iPads, tabs etc) and not on other mobile-devices. how can i achieve this? enter image description here


I done this by following below steps:

Edit your extended catalog_product_view.xml at below location , if not present then create here


Then Add following lines of code :

<referenceContainer name="product.info.media"  before="product.info.main"/>
<referenceContainer name="product.info.main"  after="product.info.media" />

clean the cache etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.