Product page image square custom

[sy42941]

Hello, I want to change the media section of my product page.

Every image I upload is a png/webp file that is transparant. It looks like this for example:

This transparant image should appear in the middle of the square media area of the productpage with the background color #F3F3F3. So it would look like this:

I am using the Dawn theme. What should I edit in the code to make this happen?

[Shadab_dev]

@sy42941 honestly I don't get when u say middle of the square media area.

Do you want the product details to come down and image be in the middle. 

Sorry about this but can u please be a bit more clearer, may be an example photo would help.

Thanks & Regards 

[sy42941]

Hi Shadab, with square media area I mean the background of the section where product images are shown. In the example below it is the color #F3F3F3. I want that the product images are always shown on top of  a square background in the middle, like the example below: 

[Shadab_dev]

@sy42941 SO in your code editor look for section-main-product.css file in assets folder. WIth Ctrl+f look a comment Product Media

And add this code in the start just like you see on the image.

.product__media-list .product__media-item{
background: #f3f3f3;
}
Let me know how this goes, if i understood the project in the first place.

[sy42941]

Hi @Shadab_dev I entered the code and it now shows like this:

The background is perfect, but now it also should be shown as a square.

Like this:

 

[Shadab_dev]

@sy42941 probably changing the width and height and keeping it the same value would do it. Will take a look and update you.

[sy42941]

Thanks sir

[Shadab_dev]

@sy42941  In your section-main-product.css file look for this part. Try referencing from the line number in the screenshot. It must be at the top of the file. The parts where you see written 55% and 45% will be 65% and 35%. Change 65% to 55% and 35% to 45%. I hope this does what you are looking for.

If you found this helpful. Please give a like and accept it as a solution. Please feel free to reach out for any queries.

Email
Buy Me a Coffee, if you feel i deserve it.

Thanks anyway. 

[Shadab_dev]

@sy42941 Sharing with you the screenshot. reference the code from the line number. it will be at the top of the same file from earlier section-main-product.css. When you first open it you will 65% and 35%. Change 65% to 55% and 35% to 45%. 

I hope this does it for your needs.

if this was helpful in any way please like and accept it as a solution. Feel free to reach out for any queries for this or later projects.

Email Me
Buy Me a Coffee, if you feel i deserve it.

thanks anyways

[sy42941]

Hi Shadab, thanks for your reply. Unfortunately nothing changed on the product page and the product image is still shown like this:

I changed the code exactly like you said:

[Shadab_dev]

@sy42941 sorry that didn't work out. To be honest its sometimes easier for us if I get access to your store so I can preview the changes live.

But if you don't want that I could give it a try again and update you. The problem is sometimes things don't work exactly as we want it, I hope you understand this and we have to get back and forth, but if you feel comfortable this way I will be glad to help anyways.

Thanks 

[Made4uo-Ribe]

Hi @sy42941 

Would you mind to share your store URL? Thanks!

[sy42941]

Hello sir, I prefer not. 

[Made4uo-Ribe]

In order to fix and change the image that you like to reshape/resize. We need to see and inspect the store. Not inside(admin) but outside where visible to customer/clients. We only see the problem on the image but cannot fix there. But no worries we understand if you dont like to share in public but you can pm us. Thanks!