How can I reduce the heigh of the slideshow on Homepage?

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

Topic summary

A user seeks to reduce their homepage slideshow height by approximately 30% on the Refresh theme.

Multiple solutions proposed:

  • Native theme settings approach (recommended): Navigate to Shopify Admin → Online Store → Themes → Customize → Template → Slideshow, then set “Slide height” to “small” in the section settings.

  • Custom CSS method: Add CSS code targeting .slideshow__text and .banner--small classes through the Custom CSS setting in the theme customizer. This adjusts padding and minimum height values.

  • Code injection approaches: Two responders suggested inserting CSS directly into theme.liquid file above the </head> tag, though these methods were later criticized.

Technical debate emerged: One contributor corrected others, noting that using section IDs as CSS selectors is problematic since they aren’t preserved between theme duplications. The Custom CSS feature in the customizer is identified as the most appropriate method for non-technical merchants to implement styling changes safely.

Status: Multiple working solutions provided; discussion remains open regarding best practices.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi there!

How can I reduce the heigh of the slideshow on Homepage?

I want to reduce like 30% of the existing height.

Theme: Refresh

Website: https://plenitudvital.es/

Thanks!

kingdom2_0-1729947613222.png
kingdom2_0-1729947613222.png1439×812 167 KB

2

@kingdom2 ,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above

If it helps you, please like and mark it as the solution.

Best Regards :blush:

3

Hi @kingdom2

I hope this message finds you well.

To adjust the height of the slideshow on your homepage, please follow these steps:

Step 1: Go to Shopify Admin > Online Store > Theme > Edit Code

Step 2: Search for the theme.liquid file

Step 3: Insert the following code above

Once done, you should see the updated slideshow height like this https://prnt.sc/QLC9lkyDw1FT

I hope this helps! :blush:

Best regards,

Daisy

4

Hi @kingdom2 ! Here is what you’ll need to do:

  1. Open Shopify admin dashboard

  2. Sales channel > online store

  3. Select the theme you want and click Customize

  4. On the left under Template > click Slideshow

  5. At the top of the Slideshow setting make sure Slide height is set to small

    NovakNorth906_0-1729949647115.png
    NovakNorth906_0-1729949647115.png277×193 2.75 KB

  6. Then scroll to the bottom of the section settings (same area as the Slide height setting) and click on Custom CSS

  7. Copy and Paste the following into that area

@media screen and (min-width: 750px) {
  .banner--small:not(.banner--adapt) {
    min-height: 20em;
  }
  .slideshow__text {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}​
  • Click Save

If I managed to help you then, don’t forget to Like it and Mark it as the Solution!

Kind regards,

Mark

5

@BSSCommerce-B2B Sorry but you should not use section IDs as css selectors. Those are not preserved between theme duplications. See my reply for correct way to accomplish this and apply css to only a specific section.

6

@DaisyVo Sorry but with the implementation of the Custom CSS setting in the customizer, answers should be directed to use that feature. This is the easiest way for a non-technical Shopify merchant to handle custom CSS.