Liquid, JavaScript, themes, sales channels
Trying to implement two images on the multicolumn section to make the page look like this :
Instead it always ends up looking like this on desktop:
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!
Solved! Go to the solution
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
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
Click Save to save the settings
Same with second image
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
Click Save to save the settings
Result
Hope it helps @StefanZ !
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS
BSS Commerce - Shopify Apps & Store Development Service Provider
Hire a Shopify expert | Shopify Plus Store Development
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
- Helpful? Like and Accept a solution. - Donate: Buy coffee ☕- or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now
Still isn't working.
Maybe the image is too large? What is the recommended size (other than the 3:2 aspect ratio)
Could you provide your store link to check?
- Helpful? Like and Accept a solution. - Donate: Buy coffee ☕- or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now
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 a solution. - Donate: Buy coffee ☕- or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now
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
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
Click Save to save the settings
Same with second image
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
Click Save to save the settings
Result
Hope it helps @StefanZ !
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS
BSS Commerce - Shopify Apps & Store Development Service Provider
Hire a Shopify expert | Shopify Plus Store Development
User | RANK |
---|---|
35 | |
25 | |
14 | |
13 | |
9 |
Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023