How to edit the hero slideshow size in brooklyn theme

New Member
1 0 0

Hey everyone,

I dont want the slideshow to cover the full screen, i would like to be able to see part of the content situated below. How i can i edit the code to resize the slide?

If anyone could help me out it would be much appreciated.

0 Likes
Shopify Expert
30 0 0

Hi, Davide - 

Your images are currently a 1200 x 802 aspect ratio.

You should try to crop them so that they're a little shorter. maybe something like 1200 x 600?  

Keep in mind that you should crop them, not change the aspect ratio.  Simply changing the aspect ratio will distort the image. 

Something like the attached image for example:

Shopify Design, Development & Maintenance // 3five.com
0 Likes
Shopify Staff
Shopify Staff
370 0 32

Hello Davide, Ben here - your Shopify Guru! 

The above method would be the simplist. However if you wanted to change the maximum height of the slide show you could add the following css to the bottom of your theme.scss.liquid file found in your assets folder. 

To edit this file from your admin click Online store, then Themes, then click the button that looks like

[ ... ] and select Edit HTML/CSS. You will then see a file list open the assests folder and click on the theme.scss.liquid. 

Add the following to the bottom of the file:

.hero--full-height {
  
    max-height: 400px;

}

Adjust the value 400 to be whatever height you wish to make the slide show. This will not effect your mobile site however. 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

0 Likes
Tourist
8 0 3

Hey guys - do this apply if I want to reduce the height of the hero image so that the logo / cart / menu are all on a strip of white at the top? I.e. I just want to have a 'thinner' hero image, something like this:

https://www.throttledownspeedco.com

Any help would be much appreciated!

Cheers,

Adam

3 Likes
Shopify Partner
4 0 1

Is there a way to edit the slideshow images so that they do not cover the full width of the browser window? I would like to have some white padding either side of my slideshow if possible.

0 Likes
Shopify Expert
30 0 0

You simply need to wrap the slideshow element in a container that has a max-width as well as left and right margins.  This requires doing some minor html and css work.

Shopify Design, Development & Maintenance // 3five.com
0 Likes
Shopify Partner
4 0 1

What are the actual changes that need to be done to alter the width and height of the Brooklyn slideshow?

0 Likes
Shopify Expert
30 0 0

There are a few different options.  The most simple would be to just be aware of the size of the image you place in the slideeshow.  I currently don't have access to a brooklyn theme, but I believe it uses slick slider for the homepage slider.  Therefore, you can set the height and width of the entire slider by using in your CSS:

.slick-slider{

width: (your width);

height: (your height);

}

Shopify Design, Development & Maintenance // 3five.com
0 Likes
New Member
1 0 0

Hello! 

I would also appreciate an answer to this question, as it seems to have not been answered yet!  

My goal is for the slideshow height to be reduced, so that any information on the page that is currently "below the fold" can be partially visible.  

Although I know how to set a maximum pixel height for the slideshow using css, this doesn't actually solve the problem, since it does not work across multiple screen resolutions.  (750 pixels for me is different than 750 pixels for someone with a tiny laptop).

The goal is to reduce the height of the slideshow to say, 70% of the screen height.  This can't be done using CSS, because to my understanding, the slideshow is being stretched to full screen using javascript.  I'm not really sure how to edit this code in javascript, or where to find it in the first place.  

Thank you in advance for any help!

 

0 Likes
Shopify Expert
30 0 0

Hi, Shahed -

 

The most simple way to achieve this would be to simply use an image that has a reduced height.  If you set the height to a fixed amount as the width of the viewport changes all you're going to do is create problems with distortion.  Keep the width set to 100% and the height to auto and simply adjust the size of the images in your slideshow.  The height will in turn shrink on smaller devices because the width will also be shrinking.

 

 

Shopify Design, Development & Maintenance // 3five.com
0 Likes