Change size of banner on home page

Store Design
, , ,

Topic summary

A user seeks to reduce the height of their homepage banner to make it slimmer. The site in question is luyendykjewelry.com.

Solutions Provided:

Multiple community members offered CSS-based approaches:

  • One suggested modifying .Slideshow--fullscreen .Slideshow__Image with object-fit: unset !important;
  • Another provided code targeting specific slide content font sizes
  • A third recommended adjusting section#section-slideshow width to 75% with auto margins
  • An alternative solution mentioned using the EasyEdits app for visual, code-free adjustments

Current Status:

The original poster tested one solution and confirmed it successfully reduced the banner’s width. However, they now need additional help adjusting the banner’s height specifically, indicating the discussion remains ongoing with the core issue not fully resolved.

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

Hi everyone,

Is there a way to change the size of the banner on a home page?

I would like it to be slightly slimmer.

https://luyendykjewelry.com/

Thank you in advance!

2

Hi @Chrystel078

Can you show me what size you want for the banner?

3

Go to your online store → customize → settings → custom css and paste this code there

.Slideshow--fullscreen .Slideshow__Image{
    object-fit: unset !important;
}
4

Hi @Chrystel078 ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

body #Slide5c17cf78-8c94-44f7-bacc-97b73fa7bb11
  > div.Slideshow__Content.Slideshow__Content--bottomLeft
  > header
  > h3 {
  font-size: 24px !important;
  font-weight: 100 !important;
}

Here is the result:

DaisyVo_0-1735648373565.png
DaisyVo_0-1735648373565.png1854×800 218 KB

Please let me know if it works!

Best,

Daisy

5

Yes, you can adjust the size of the banner on your homepage by tweaking the CSS. Here’s how you can make it slimmer:

Steps to Adjust Banner Size1. Log in to Shopify Admin:

  • Navigate to Online Store > Themes > Edit Code.

  1. Locate the CSS File:

    • Open the theme.css or style.css file under the Assets folder.

  2. Find or Add the Banner Class: Use your browser’s Inspect Tool to identify the class name for the banner section (it might be something like .banner, .hero, or .slideshow).

  3. Add or Adjust Custom CSS: Add this CSS at the bottom of your file to make the banner slimmer:

section#section-slideshow{
    width: 75%;
    margin: auto;
}

  • Replace .banner with the actual class name for your banner if it’s different.

  • Save and Test:

    • Save your changes and refresh your homepage to check if the banner is now slimmer.

Easier Option with EasyEdits

If you’d like to make these changes without diving into code, EasyEdits lets you visually adjust banner sizes with drag-and-drop ease. You can make edits during the free trial and keep them forever. Fair disclaimer I am the developer, and can answer any questions!

Let me know if you need help refining the setup!

6

Thanks for the code.

It makes it less wide however. Can I also adjust the height of the banner with a similar code?