Improving Product Images

Solved

Improving Product Images

Hudmon1
Excursionist
21 0 4

Hi, how can I make my product pictures on the homepage, collection page, and product page more like this:Screenshot 2024-06-13 181605.png

rather than this:

Screenshot 2024-06-13 181245.png

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!

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
8551 1687 1695

This is an accepted solution.

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

<style>
.card-media img { 
border-radius: 10px !important;
border: 1px solid #d6d6d6 !important;
}
</style>

 

- Helpful? Like and Accept solution to let me know!>
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

BSSCommerce-HDL
Shopify Partner
1131 389 457

This is an accepted solution.

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

BSSCommerceHDL_0-1718293522516.png

 

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

BSSCommerceHDL_1-1718293527261.png

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: 

BSSCommerceHDL_2-1718293576437.png

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 😍

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 7 (7)

Dan-From-Ryviu
Shopify Partner
8551 1687 1695

This is an accepted solution.

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

<style>
.card-media img { 
border-radius: 10px !important;
border: 1px solid #d6d6d6 !important;
}
</style>

 

- Helpful? Like and Accept solution to let me know!>
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Hudmon1
Excursionist
21 0 4

Thank you!

Hudmon1
Excursionist
21 0 4

How do I also make the product page as theirs?

BSSCommerce-HDL
Shopify Partner
1131 389 457

This is an accepted solution.

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

BSSCommerceHDL_0-1718293522516.png

 

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

BSSCommerceHDL_1-1718293527261.png

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: 

BSSCommerceHDL_2-1718293576437.png

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 😍

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Hudmon1
Excursionist
21 0 4

Thank you!

 

How do I also make the product page as theirs?

BSSCommerce-HDL
Shopify Partner
1131 389 457

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

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Hudmon1
Excursionist
21 0 4

Okay, here is how I want the product page product pictures to look on mobile: WhatsApp Image 2024-06-14 at 07.53.54_1093c31a.jpg

And here is pc view:Screenshot 2024-06-14 072535.png

 

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:WhatsApp Image 2024-06-14 at 07.43.21_b67fb145.jpg

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: Screenshot 2024-06-14 074010.pngWhatsApp Image 2024-06-14 at 07.27.53_d3a4070d.jpg

 

 

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