Product page image square custom

Product page image square custom

sy42941
Tourist
10 0 2

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:

image-218 (1).png

 

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:

sy42941_0-1719260075302.png

 

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

 

Replies 13 (13)

Shadab_dev
Shopify Partner
159 5 18

@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 

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
sy42941
Tourist
10 0 2

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: 

sy42941_0-1719260075302.png

Shadab_dev
Shopify Partner
159 5 18

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

Shadab_dev_0-1719319604208.png



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.


If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
sy42941
Tourist
10 0 2

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

Schermafbeelding 2024-06-25 150848.png

 

 

 

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

Like this:

Schermafbeelding 2024-06-25 151024.png

Shadab_dev
Shopify Partner
159 5 18

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

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
sy42941
Tourist
10 0 2

Thanks sir

Shadab_dev
Shopify Partner
159 5 18

@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.

Shadab_dev_0-1719342941583.png

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. 

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
Shadab_dev
Shopify Partner
159 5 18

@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%. 

Shadab_dev_0-1719344264432.png


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

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
sy42941
Tourist
10 0 2

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

sy42941_0-1719385765572.png

 

I changed the code exactly like you said:

sy42941_1-1719385821138.png

 

 

 

Shadab_dev
Shopify Partner
159 5 18

@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 

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks

Made4uo-Ribe
Shopify Partner
6862 1636 2018

Hi @sy42941 

Would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
sy42941
Tourist
10 0 2

Hello sir, I prefer not. 

Made4uo-Ribe
Shopify Partner
6862 1636 2018

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.