Improving Product Images

Hudmon1 · ‎06-13-2024

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!

Dan-From-Ryviu · ‎06-13-2024

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

BSSCommerce-HDL · ‎06-13-2024

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Dan-From-Ryviu · ‎06-13-2024

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Hudmon1 · ‎06-13-2024

Thank you!

Hudmon1 · ‎06-13-2024

How do I also make the product page as theirs?

BSSCommerce-HDL · ‎06-13-2024

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Hudmon1 · ‎06-13-2024

Thank you!

How do I also make the product page as theirs?

BSSCommerce-HDL · ‎06-13-2024

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.

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Hudmon1 · ‎06-14-2024

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:

I want the corners of the pictures to be more rounded, similar to theirs.
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.
The second picture on the mobile view is partially visible, which looks good and piques the customer's interest.
The placement of their product photos is very nice:

PC View:

I also like that on the PC view, there is an arrow beside the picture, making it convenient to go to the next picture.
The placement of their product photos on pc is also very nice.
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.png WhatsApp Image 2024-06-14 at 07.27.53_d3a4070d.jpg

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

Improving Product Images

Improving Product Images

Community Blog Articles