Re: Set image size limit in multicolumn section

Solved

Set image size limit in multicolumn section

StefanZ
New Member
9 0 0

Trying to implement two images on the multicolumn section to make the page look like this :

 

chrome_bfUOKJTTGF.png

 

Instead it always ends up looking like this on desktop:

 

chrome_ylWNJ8lVkm.png

 

It increases the image size regardless of its original size (around 400px).

Any help would be appreciated on how to limit it so that it matches whatever size of the image that I upload is.

 

Thanks!

Accepted Solution (1)

BSS-Commerce
Shopify Partner
3477 463 547

This is an accepted solution.

Hi @StefanZ ,

I see you are having 2 problems

1. Your 2 images are not connected to create 1 large image because you are using ambient movement animations. This option will cause the images to zoom and they will no longer be connected

2. Your 2 images are increased in size because they do not have the ratio that shopify recommends 3:2

Solution

You should remove the code in the answer above

1. In the animations section, select None instead of Ambient movement, click Save to save the settings

view (19).png

2. The best solution to this problem is to use images with a ratio of 3:2

But if you still want to use these images, my solution is to adjust the focal point

In the First image section, select edit, and create a focal point as follows

view (20).png

Click Save to save the settings

Same with second image

view (21).png

In the Banner height section, select Large, you can also choose Small or Medium but the top of the image will be covered a lot, do not choose Adapt to first image

view (22).png

Click Save to save the settings

Result

view (23).png

Hope it helps @StefanZ !

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
10224 2032 2102

Hi @StefanZ 

Please go to your Online store > Themes > Customize, select that section and change Banner height option is Adapt to first image to solve your issue

Screenshot 2023-11-06 at 10.59.07.png

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

StefanZ
New Member
9 0 0
Still isn't working.

Maybe the images are simply too large? What is the recommended size (other
than being 3:2 aspect ratio.
StefanZ
New Member
9 0 0

Still isn't working.

 

Maybe the image is too large? What is the recommended size (other than the 3:2 aspect ratio)

Dan-From-Ryviu
Shopify Partner
10224 2032 2102

Could you provide your store link to check?

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

StefanZ
New Member
9 0 0
Dan-From-Ryviu
Shopify Partner
10224 2032 2102

Please change your setting of Banner height to previous and then add this code to Custom CSS of that section to check 

.banner__media img { object-fit: contain !important; }

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

BSS-Commerce
Shopify Partner
3477 463 547

This is an accepted solution.

Hi @StefanZ ,

I see you are having 2 problems

1. Your 2 images are not connected to create 1 large image because you are using ambient movement animations. This option will cause the images to zoom and they will no longer be connected

2. Your 2 images are increased in size because they do not have the ratio that shopify recommends 3:2

Solution

You should remove the code in the answer above

1. In the animations section, select None instead of Ambient movement, click Save to save the settings

view (19).png

2. The best solution to this problem is to use images with a ratio of 3:2

But if you still want to use these images, my solution is to adjust the focal point

In the First image section, select edit, and create a focal point as follows

view (20).png

Click Save to save the settings

Same with second image

view (21).png

In the Banner height section, select Large, you can also choose Small or Medium but the top of the image will be covered a lot, do not choose Adapt to first image

view (22).png

Click Save to save the settings

Result

view (23).png

Hope it helps @StefanZ !

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