Boundless Theme - Header/Slideshow Height

New Member
5 0 0

Hello,

I'm working on my unpublished BOUNDLESS theme for my online shop.
Unfortunately, I can't seem to change the height of the header/first slideshow of the theme.
By that, I mean that I don't want it to take the full height and width of my screen but only the half of it (for example).

Does anybody have a way to change that? I would really appreciate it.

Thank you in advance,

Kev

0 Likes
Shopify Expert
2660 63 662

Hi Kevin, 

the theme uses this function in theme.js.liquid  Asset  to determine the height of the slideshow

  sizeFullScreen = function () {
    if (theme.cache.$announcementBar.length) {
      windowHeight = slickTheme.cache.$window.height() - theme.cache.$announcementBar.height();    
    } else {
      windowHeight = slickTheme.cache.$window.height();
    }
    settings.$element.css('height', windowHeight);
  };

So you may modify it like so to make the slideshow half-height:

  sizeFullScreen = function () {
    if (theme.cache.$announcementBar.length) {
      windowHeight = slickTheme.cache.$window.height()/2 - theme.cache.$announcementBar.height();
    } else {
      windowHeight = slickTheme.cache.$window.height()/2;
    }
    settings.$element.css('height', windowHeight);
  };

There is also a CSS rule in theme.scss.liquid Asset which controls the minimal height of the slideshow:

.hero {
  // Height is set by JS on slider init. vh is a nice default for modern browsers.
  height: 100vh;
  min-height: 550px;
  overflow: hidden;
 ...

Which also should be amended to allow the slideshow to be less then 550px high. 

BTW, if you're not happy with the product page design, you may wish to have a look at this page

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like
New Member
5 0 0

Hello,

Thank you very much, it worked perfectly! Precisely what I needed.
Also, how did you get to have tabs in the Product page? I am very interested in that also.

Thanks again.

0 Likes
Shopify Expert
2660 63 662

Kevin, 

tabs I explained here: https://ecommerce.shopify.com/c/ecommerce-design/t/adding-tabs-on-product-page-simple-entry-451503

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
3 0 0

Hi Tim, 

thanks for proving that code! Im working with Boundless and Im currently having the issues setting my slideshow to be adaptable to mobile. I've set the slides size and width to be automatic so they resize instead of crop. But now I am left with a blank space where the slider box is assume. I tried making it half the size with this code but then it only looks good on mobile not web. 

 

Anyone have any tips on how to code this better? PLEASE HELP

store is http://lunerajewellery.com and password: luli

0 Likes
New Member
1 0 0

Does anyone know what lines I can find this code on. there are literally thousands of lines of code and I dont know how to go about finding the ones you recommended that I alter. 

0 Likes