How to make slideshow height smaller

Store Design
, , , ,

Topic summary

A store owner wanted to reduce the height of their homepage slideshow by approximately 20%.

Solution Provided:

  • Custom CSS code targeting .homepage-slideshow .swiper-slide with a fixed height of 700px
  • Code also adjusts the image/picture element heights within the slideshow

Implementation Methods:

  1. Add via Theme Customizer → Theme Settings → Custom CSS
  2. Alternatively, edit base.css directly in the theme code editor under Assets folder

Outcome:

  • The solution was successfully implemented and resolved the issue
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

https://softbeginningsboutique.com/

This is my store the password is Landon

Wondering how do I make the length/Height of this slideshow smaller would like to make it 20% less height would appreciate some help :)!

2

@JGBowie
try this css

.homepage-slideshow .swiper-slide {
    height: 700px;
}
.homepage-slideshow .swiper-slide img, .homepage-slideshow .swiper-slide picture{
eight: 700px;
}

How to Add This to Shopify YourYour Theme:

  1. Go to Shopify Admin → Online Store → Themes.
  2. Click “Customize” on your theme.
  3. In the theme editor, go to “Theme settings” (bottom left).
  4. Scroll down and click “Custom CSS”.
  5. Paste the above CSS code and save changes.

Alternative (Edit Theme CSS Directly):

  1. Go to “Online Store” → “Themes”.
  2. Click “Actions” → “Edit code”.
  3. Open base.css inside the assets folder.
  4. Paste the CSS at the bottom and Save.
3

Perfect worked !