Collection Banner Image for Mobile and Desktop (separate images)

JerryATL
New Member
5 0 0

Hi, I'm trying to make the banner of a collection fit both mobile and desktop. Is there any way to have a different image for mobile vs. desktop?

 

I've been searching all through the forums and have found some code that does it for a theme homepage banner, but I don't know how to do it for a collection.

 

I have the Retina theme and they have a banner.collection template that looks good on mobile, but it is way to big and tall on desktop (we want the first row of product to always show regardless of whether you on mobile or desktop).

 

Can anyone help me understand how to code this functionality into a collection template? Thanks!

Replies 17 (17)
ashiqueh4
Shopify Partner
358 34 56

in theme.css put the code at bottom 

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

Propero
Shopify Partner
875 101 153

@LetsKauphy ,

Please go to  Admin - > Online Store -> Themes -> Action -> Edit Code and then look for Folder assets, inside assets folder you would find theme.scss.liquid file open it and paste the code at the bottom of the file . Hope this helps.

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
JerryATL
New Member
5 0 0

Store Link: https://www.nicalifeproject.com/collections/choker-necklaces

Desktop banner image desired: https://cdn.shopify.com/s/files/1/0986/6274/files/1800x700_Choker.png?v=1594698018

 

Looks good on desktop (above), but too narrow for mobile (below)

 

Mobile banner image desired: https://cdn.shopify.com/s/files/1/0986/6274/files/1800x1170_Choker.png?v=1594651836

Looks good on mobile (above), but too tall on desktop (below)...can't see first row of product

JerryATL_0-1594736981519.png

 

Thanks for the help Wahab!

LetsKauphy
Tourist
9 0 1

Thank You Panwar for the step-by-step guidance. It made things easier and the solution provided by Hussain worked. 

LetsKauphy
Tourist
9 0 1

Thank You Hussain for the suggestion. It worked and the view on both desktop and mobile are same. Problem rectified. Thanks again for the support.

Vikas55
New Member
1 0 0

Where is code ?

can you provide the code so that i can apply to my store also

LetsKauphy
Tourist
9 0 1

just add this 

.column-flex__image.lazyloaded {
min-height: 550px;
}

LetsKauphy
Tourist
9 0 1

Please go to  Admin - > Online Store -> Themes -> Action -> Edit Code and then look for Folder assets, inside assets folder you would find theme.scss.liquid file open it and paste the code at the bottom of the file . Hope this helps.

Hello Vikas,

The above two solutions / suggestions are the ones I received from the experts on this community and it really worked for me. Hope this works for you too.