How do I customise the size of my slideshow banner so it doesn't take up so much space

Store Design
, , , , , , , , , , , , , ,

Topic summary

Goal: reduce the slideshow banner height on a Shopify theme so more products are visible below the fold.

Key requests and attempts:

  • The poster asked for specific custom CSS to decrease the banner’s height.
  • A responder requested the store URL to provide tailored CSS but no link was shared.
  • Another suggestion advised adding custom CSS in theme.liquid (above ). The provided approach affected only the text area (padding) inside the banner, not the slideshow’s overall height.
  • When the poster changed the suggested CSS from width to height, it only allowed increasing the banner size, not reducing it below its current height.

Current status:

  • No working CSS snippet has been provided that successfully reduces the slideshow banner height.
  • The issue remains unresolved; an exact, theme-specific CSS solution is still needed, likely requiring the site link or more theme details.

Notes:

  • Shared screenshots illustrate the issue and the limited effect of the attempted CSS changes.
Summarized with AI on December 19. AI used: gpt-5.
1

I just wish to edit the height to reveal the products below a little bit more

Screenshot 2024-09-18 at 23.35.11.png
Screenshot 2024-09-18 at 23.35.11.png2880×1800 911 KB

1 Like
2

Can you share a link to the website and I’ll write the CSS code needed to adjust the height.

3

Hello,

What is the Custom CSS code to do this

Thank you

4

hi david,

On both answers to my questions you have provided no code to help me, just that I should code it. Do you have a piece of code i can use?

5

Hi @lukafernada ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

6

this did not help me edit the height of the banner, just decrease padding of the writing in it:

IMG_0053.jpeg
IMG_0053.jpeg585×1266 63.9 KB

when i changed the ‘width’ to ‘height’ in your code, it would allow me to only increase it then, but not make it smaller than it already is. How can I do this?