FROM CACHE - en_header

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)
Wahab_Ahmad
Shopify Partner
748 113 189

Hello @JerryATL,

Yes It is possible, you can upload these two images in shopify files (copy cdn of that images). then use scss media query to change background image of element.  

If it is useful mark this like and accept solution

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
Shopify Custom Theme Development and Design | Custom Modifications In to Shopify Theme

- Feel free to contact me
Mail : wahabahmadghori@gmail.com | Skype : live:17296c31bc2edbdf
JerryATL
New Member
5 0 0

Sorry, I'm very new to Shopify, so I'm not exactly sure what you mean by "use scss media query to change background image of element"

I know how to upload two files and get their ref links to copy into HTML code, but that;s about it! 

Sorry for dumb questions!! 🙂

Wahab_Ahmad
Shopify Partner
748 113 189

@JerryATL, share store link and cdn of that images. 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
Shopify Custom Theme Development and Design | Custom Modifications In to Shopify Theme

- Feel free to contact me
Mail : wahabahmadghori@gmail.com | Skype : live:17296c31bc2edbdf
ashiqueh4
Shopify Partner
361 34 56

through custom coding you can achieve .

Shopify ,Shopify plus and Shopify 2.0 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

LetsKauphy
Tourist
9 0 1

Salaam Hussain.

I am using Venture theme. In that I am facing issue in the TEXT COLUMNS WITH IMAGES section. The images I use look totally different in Desktop view and mobile view. In the latter they are getting cut and only the bottom part is visible. Please suggest how this can be resolved.

Thanks in advance.

 

Desktop view

LetsKauphy_0-1594721325884.png 

 

Mobile View

LetsKauphy_0-1594721626084.png

 

ashiqueh4
Shopify Partner
361 34 56

share your store url?

Shopify ,Shopify plus and Shopify 2.0 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

ashiqueh4
Shopify Partner
361 34 56

just add this 

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

Shopify ,Shopify plus and Shopify 2.0 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

LetsKauphy
Tourist
9 0 1

Thanks for the suggestion.

Sorry if the next question is dumb - I am a Zero Knowledge guy in tech. Where should I add ? Can you please guide step by step. 

ashiqueh4
Shopify Partner
361 34 56

in theme.css put the code at bottom 

Shopify ,Shopify plus and Shopify 2.0 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
884 101 155

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