Improving Product Images

[Hudmon1]

Hi, how can I make my product pictures on the homepage, collection page, and product page more like this:

rather than this:

The first picture is from the website bulk.com, and the second is from my website hudmon.store

I want the pictures to look exactly like they do on the website bulk.com

Thanks in advance!

[Dan-From-Ryviu]

Hi @Hudmon1

Please check on your collection settings. If there is an Image ratio option, select Square and add this code to your theme.liquid file, after

[BSSCommerce-HDL]

Hi @Hudmon1 ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

.card-product__wrapper .card-media img {
  object-fit: cover !important;
}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[Hudmon1]

Thank you!

[Hudmon1]

How do I also make the product page as theirs?

[Hudmon1]

Thank you!

How do I also make the product page as theirs?

[BSSCommerce-HDL]

Hi @Hudmon1 , Can you kindly share the details of your problem (screenshot) with us? We will check it and suggest you a solution if possible.

[Hudmon1]

Okay, here is how I want the product page product pictures to look on mobile:

And here is pc view:

Mobile View:

1. I want the corners of the pictures to be more rounded, similar to theirs.
2. I like how easy it is to navigate to the next picture on mobile. You can click to the next picture or scroll sideways with your thumb.
3. The second picture on the mobile view is partially visible, which looks good and piques the customer’s interest.
4. The placement of their product photos is very nice:
   
   

PC View:

1. I also like that on the PC view, there is an arrow beside the picture, making it convenient to go to the next picture.
2. The placement of their product photos on pc is also very nice.
3. I want the corners of the pictures to be more rounded, similar to theirs.

Basically I want the product page product pictures to look exactly like this website: https://www.bulk.com/uk/products/creatine-monohydrate/bpb-cmon-0000

Here is how mine looks now:

Thank you in advance for your help, and I apologize for any inconvenience.