Changing the hero sliding image for mobile only / Brooklyn Theme

Connorevans
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 🙂

Replies 48 (48)
Atlantix_Digita
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

Connorevans
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

Connorevans
Tourist
6 0 1

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

tim
Shopify Expert
3040 170 1094

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.

 

My post solved your problem? Like it!
Connorevans
Tourist
6 0 1

Hey Tim,

Worked like a charm, thank you so much! 

Simon_Lee1
New Member
2 0 0

Thank Tim,

You are really an expert .  Thank you very much!

Aslan_Mattress
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.
Anže_Založnik
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

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

Valeria_Kuznets
Tourist
19 0 2

Hi Tim, pls asist add this code to Debut theme

will apriciate your help

Want to hire me to help you with your theme? looking for experienced Shopify developer?
Mail me valery.k18@gmail.com - my post solved you problem? you can send me a bonus on PayPal 🙂
sEIJI
New Member
1 0 0

Do you have a code version for the Debut Theme ? Would be such a relieve for me and other people 😉

Mozes
New Member
1 0 0

Hello Tim,

 

I tried to find the files but can't find them in slideshow.liquid

Could you please help me fixing this?

 

Thankyou

Valeria_Kuznets
Tourist
19 0 2

@sEIJI  Pls see my solution here

https://community.shopify.com/c/Shopify-Design/Custom-mobile-only-and-desktop-only-slideshows-Debut-...

Want to hire me to help you with your theme? looking for experienced Shopify developer?
Mail me valery.k18@gmail.com - my post solved you problem? you can send me a bonus on PayPal 🙂
mrticklers
New Member
1 0 0

Hey Tim, 
I was just trying to implement your code to show different slides on desktop and mobile.
Everything seems to work out and I'm seeing the drop down for Show on Mobile or desktop or always.
But when I add the last bits of code to the Theme.js.liquid it totally "destroys" my startpage/ the slider. What am I doing wrong?

 

Adding this piece:

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

Where to?

 

The code looks like this:

      focusOnChange: settings.focusOnChange,
      autoplay: slickTheme.cache.$hero.data('autoplay'),
      autoplaySpeed: slickTheme.cache.$hero.data('autoplayspeed'),
      onInit: this.onInit,
      onBeforeChange: this.beforeChange,
      onAfterChange: this.afterChange,
      customPaging: function(slick, index) {
        var labelString =
          index === 0
            ? slickTheme.vars.activeSlideA11yString
            : slickTheme.vars.loadSlideA11yString;
        return (
          '<a href="#Hero" aria-label="' +
          labelString.replace('[slide_number]', index + 1) +
          '" data-slide-number="' +
          index +
          '" data-slide-pagination></a>'
        );
      }
    });
  };

Where do I need to add the code?

 

Thanks for your help

 

Best wishes

Felix

Corey2019
New Member
1 0 0

Hi there, 

Did you ever find a solution to the heading information disappearing once you change the theme.js.liquid file? I ran into the exact same problem on the final step. 


Thanks for any help!

 

Cheers, 
Corey 

MaxM
New Member
1 0 0

Hey Tim,

 

i didnt get it to work. Maybe its because the code of the theme changed? 

 

Can you help me with that ?

petehellyerltd
Tourist
4 0 2

Make sure there is a comma after the code you inserted — for me that was before the customPaging line.

 

onAfterChange: this.afterChange,   
      responsive: [
        {
          breakpoint: 10000, settings: { slide: '.desktop'}
        },
        {
          breakpoint: 480,   settings: { slide: '.mobile'}
        }      
      ],
      customPaging: function(slick, index) {
Shark
New Member
1 0 0

Hello, I have the exact same problem, but in the code, I can`t find the parts you have written about.

I´m not very familiar with coding a website, but I think, this code is made with html (all the "<div>" .....) and liquid (all the "{%-  %}".....)

I think they changed the code over the time, but I hope, you`d be so kind, to help me out with a new version of your answer 🙂

Valeria_Kuznets
Tourist
19 0 2
Hey, what theme do you use?
Want to hire me to help you with your theme? looking for experienced Shopify developer?
Mail me valery.k18@gmail.com - my post solved you problem? you can send me a bonus on PayPal 🙂