How can I decrease the slideshow height in studio theme?

Store Design

Topic summary

A user seeks to reduce the slideshow height in Shopify’s Studio theme.

Proposed Solution:
A PageFly representative provides CSS customization steps:

  • Navigate to: Online Store → Theme → Edit Code
  • Open: Assets → component-slideshow.css
  • Add custom CSS targeting the slideshow banner component
  • Modify the height value (example shows 400px) and min-height property

The solution involves directly editing theme code files to override default slideshow dimensions. The response includes a code snippet, though the formatting appears corrupted in the original post. No follow-up confirms whether this resolved the issue.

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

Reduce slideshow height in studio theme

2

Hi @Aadhiss ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-slideshow.css->paste below code at the bottom of the file:

slideshow-component .slideshow.banner {
  height: 400px; /* Change this value to your desired height */
  min-height: unset;
}

Hope my answer will help you.

1 Like