Collection Banner Image for Mobile and Desktop (separate images)

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
874 101 152

@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!

0 Likes
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. 

0 Likes
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.

0 Likes
Vikas55
New Member
1 0 0

Where is code ?

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

0 Likes
LetsKauphy
Tourist
9 0 1

just add this 

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

0 Likes
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.

 

0 Likes