Changing the hero sliding image for mobile only / Brooklyn Theme

Highlighted
New Member
2 0 1
I am using the Brooklyn theme.
0 Likes
Highlighted
New Member
2 0 0

is this the up to date coding for 2019 codes?

 

I tried and go error saving

0 Likes
Highlighted
Tourist
8 0 1
Hi, It should work

if you need help send me email
Want to hire me to help with your Debut theme? Mail me valery.k18@gmail.com - my post solved you problem? you can send me a bonus on PayPal
0 Likes
Highlighted
New Member
2 0 0

the same coding should work now?

0 Likes
Highlighted
Shopify Partner
30 6 7

hello @all 

i have implemented, what Tim suggested - with the latest brooklyn theme version, using jQuery 2.2.3 but i run in a console error which breaks at this point:

async_jquery-2.2.3.min.js?2106:7 Uncaught TypeError: Cannot read property 'parent' of null
    at c.b.destroy (async_jquery-3.0.0.min.js?2106:7)
    at c.b.refresh (async_jquery-3.0.0.min.js?2106:7)
    at c.b.checkResponsive (async_jquery-3.0.0.min.js?2106:7)
    at new c (async_jquery-3.0.0.min.js?2106:7)
    at HTMLDivElement.<anonymous> (async_jquery-3.0.0.min.js?2106:7)
    at Function.each (async_jquery-3.0.0.min.js?2106:2)
    at n.fn.init.each (async_jquery-3.0.0.min.js?2106:2)
    at n.fn.init.a.fn.slick (async_jquery-3.0.0.min.js?2106:7)
    at Object.init (theme.js?2106&_=1573603168548:1212)
    at new SlideshowSection (theme.js?2106&_=1573603168548:2434)

this is the init code for the slider:

settings.$element.slick({
      accessibility: settings.accessibility,
      arrows: settings.arrows,
      dots: settings.dots,
      slide: '.hero__slide',
      /* eslint-disable shopify/jquery-dollar-sign-reference */
      prevArrow: $('.slick-prev'),
      nextArrow: $('.slick-next'),
      appendDots: $('.hero__dots-wrapper'),
      /* eslint-enable shopify/jquery-dollar-sign-reference */
      adaptiveHeight: false,
      draggable: false,
      fade: true,
      focusOnChange: settings.focusOnChange,
      autoplay: slickTheme.cache.$hero.data('autoplay'),
      autoplaySpeed: slickTheme.cache.$hero.data('autoplayspeed'),
      onInit: this.onInit,
      onBeforeChange: this.beforeChange,
      onAfterChange: this.afterChange,
      responsive: [{
        breakpoint: 10000,
        settings: {
          slide: '.desktop'
        }
      }, {
        breakpoint: 480,
        settings: {
          slide: '.mobile'
        }
      }], 
      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 aria-controls="SlickSlide' +
          (index + 1) +
          '"></a>'
        );
      }
    });
 

Traced the crash to here, after the init it throws the error and stops executing the code:

theme.SlideshowSection = (function() {
  function SlideshowSection() {
    theme.initCache();

    var $slideshow = (this.$slideshow = $('#Hero'));
    var autoplay = (this.autoplay = $slideshow.data('autoplay'));

    slickTheme.init({
      $element: $slideshow,
      parallax: $slideshow.data('parallax'),
      autoplay: autoplay,
      autoplaySpeed: $slideshow.data('autoplayspeed'),
      adaptHeight: $slideshow.data('adapt'),
      arrows: true
    });

    // remove header absolute display if slideshow is empty
    if (!$slideshow.hasClass('hero')) {
      $('.header-wrapper').removeClass(slickTheme.vars.heroHeaderClass);
    }
  }

  return SlideshowSection;
})();

Anyone else having this issue? Upgrading to jQuery 3.0.0. removed the error message but that's the last thing i want to do right now upgrade jQuery in the brooklyn theme. 

 

Best regards,
crotastic.io

✓ Was your problem solved? ?Please like and accept the solution to help others.

?Your ROAS sucks?
Visit www.crotastic.io and receive your free Conversion Rate Optimization Report today. We offer optimization and customizations of your Shopify Store.

Email: mark@crotastic.io
Shopify Custom Theme Development | Custom Store Modifications | Store Conversion Rate Optimization | Shopify App Development
0 Likes
Highlighted
Tourist
14 0 0

Hi @tim , I used your code and it worked for the slider. But somehow the text for mobile was no longer floating over the banner, so we decided to revert to the original. But it seems we can't undo the different mobile slider now. I basically just want it to use the same image for mobile and desktop and just have all the same settings apply to mobile and desktop. Sorry, can you help me find out where else I need to undo the code :(

 

Site link is https://www.hagargifts.com 

0 Likes
Highlighted
New Member
1 0 1

I am having these same issues with the Brooklyn theme. It does give me an option to select desktop/mobile but my whole layout is a jumbled mess! The text is not calibrated properly at all, please help! 

1 Like
Highlighted
Shopify Partner
30 6 7

Could you provide more details? I was able to fix my issue. 

Best regards,
crotastic.io

✓ Was your problem solved? ?Please like and accept the solution to help others.

?Your ROAS sucks?
Visit www.crotastic.io and receive your free Conversion Rate Optimization Report today. We offer optimization and customizations of your Shopify Store.

Email: mark@crotastic.io
Shopify Custom Theme Development | Custom Store Modifications | Store Conversion Rate Optimization | Shopify App Development
0 Likes
Highlighted
New Member
3 0 0

Does this code work on Debut theme as well? I can't find find <style> coded in the same treatment. 

thank you!!

0 Likes
Shopify Expert
1355 111 181

with the help of custom code create a diffrent diffrent setting from dektop aur mobile 

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Shopify Expert Page: https://experts.shopify.com/perennialsolution
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes