Changing the hero sliding image for mobile only / Brooklyn Theme

Tourist
6 0 1

Hello, I'm having a lot of trouble trying to add a hero slide image for mobile only on the Brooklyn Theme. I've read every forum post I can find on it, but everything I can find seems outdated. I would really apperiacte it if someone could give me a hand.

My website / Password: yushaw

To be more specific, the picture of the female that is on the landing page does not look good in the mobile cropped version and I would like to replace the image for mobile devices only. I will attach an image of what I mean below.

 

Thank you in advance :)

1 Like
Shopify Partner
89 0 6

Hi Connorevans,

If your theme has feature to update the image only for mobile then you can easily manage it form "Theme Customization" settings.

Let me know if you can't any setting related image, so we can make the different slider for mobile, so you can easliy manage different image for desktop and mobile.

Thanks,
Aaron

1 Like
Tourist
6 0 1

Hi Atlantix,

Please may you elaborate more upon "Theme Customization", I can't seem to find the option for mobile only pictures.

Thanks,
Connor

0 Likes
Tourist
6 0 1

I have found this thread, but it's now outdated and I can't find any better resources

0 Likes
Shopify Expert
2585 42 602

Hey Connor, 

there is no such option in Brooklyn. But it's possible to modify the theme to add this option.

1. Open your slideshow.liquid Section, find the <style> element at the top of the file and add this right above the closing </style> tag:

.slick-initialized .hero__slide:not(.slick-slide) {
    display: none;
}

2. Find this code towards the bottom of the file 

        "name": "Slide",
        "settings": [

and insert this code right below:

		  {
			"type":		"select",
			"id":		"show_on",
			"label":	"Show this slide:", 
			"default":	"desktop mobile",
			"options": [
				{
					"value":	"desktop mobile",
					"label":	"Always"
				},
				{
					"value":	"mobile",
					"label":	"On Mobile"
				},
				{
					"value":	"desktop",
					"label":	"On Desktop"
				}
			]
		  },

3. Now find this line (replaced rest of the line with  ... ):

<div class="hero__slide slide--{{ block.id }} ...

and add {{ block.settings.show_on }} after the hero__slide:

<div class="hero__slide {{ block.settings.show_on }} slide--{{ block.id }} ...

4. Save this file and open theme.js.liquid Asset. Find this line below the "Init slick slider" comment (around line 1837?)

onAfterChange: this.afterChange

and add the following right below (first comma is important):

,
      responsive: [
        {
          breakpoint: 10000, settings: { slide: '.desktop'}
        },
        {
          breakpoint: 480,   settings: { slide: '.mobile'}
        }      
      ]

Save the Asset.

Now in Theme Customizer, in properties of the slideshow section you will be able for each slide assign whether it will be shown on mobile, on desktop or always.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
2 Likes
Tourist
6 0 1

Hey Tim,

Worked like a charm, thank you so much! 

0 Likes
New Member
2 0 0

Thank Tim,

You are really an expert .  Thank you very much!

0 Likes
Tourist
12 0 1

Wow, Tim, that is a lifesaver. You are the man! Thank you so much. 

Family man with 4 crazy kids. Owner, Aslan Mattress - A mattress built for athletes that works for lazy people too. 365 Night Trial, Infinite Warranty.
0 Likes
New Member
7 0 0

Hi, i did everything as you said but i ave a problem. The slideshow won't chage pictures and i can't get the header to be seen. I can only chage which picture is the best for mobile or desktop

0 Likes
New Member
1 0 0

Hi Tim, 

This is exactly what I'm looking for, however, I'm using the Debut theme which does not have a theme.js.liquid file nor does the slideshow.liquid file look the same.

Is it possible to do this for the Debut theme?

Thans in advance!

0 Likes