Modifying Dawn slideshow to fixed height, auto width

Technical Q&A
,

Topic summary

A user wants to modify Dawn theme’s slideshow to display images at a fixed height with proportional width scaling, instead of the default behavior that crops images to fill the container width.

Two solutions were proposed:

CSS approach (quickest):

  • Change object-fit: cover to object-fit: contain in .slideshow__media img
  • Set a fixed or max-height (e.g., 500px) with width: auto
  • Center the slideshow container using flexbox properties
  • Trade-off: letterboxing/white space around images with different aspect ratios

Liquid template approach (more control):

  • Modify the image_url filter in slideshow.liquid
  • Change crop parameter from "fill" to "fit" to prevent cropping
  • Allows Shopify’s CDN to serve pre-scaled images

Key files to modify:

  • component-slideshow.css
  • slideshow.liquid (optional)

Both responders offered to provide exact code snippets for Dawn v12 if needed. The discussion remains open for the original poster to test these solutions.

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

Hi,

I’m looking to modify the slideshow within Dawn so that rather than stretching the image to fill the width, and then cropping the top/bottom of the image (damned ugly, if you ask me), it will operate at a fixed height and scale the image width to fit with NO cropping. This seems to be the only option that was not included by the authors, but the most elegant (in my opinion).

I’ve been playing with the css and liquid, but to no avail. I think that if I can get the actual image’s dimensions, I can force a scale, but I can’t seem to find which liquid variables they would be.

I also tried removing any calculations, and running with a fixed height, but that didn’t seem to work either (there’s some other mystic voodoo at play! :wink: ).

Any ideas (use the stock-standard Dawn theme for reference as I haven’t made any useful changes to either the component-slideshow.css or slideshow.liquid files.

Thanks in advance.

3

Hey ,

Yeah, Dawn’s slideshow section is built to cover the container by default (background-size: cover logic), which is why you’re seeing the top/bottom crop. If you’d rather keep the full image visible at a fixed height, you can override that with a couple of changes.

Try this approach:

  1. Open component-slideshow.css and look for the .slideshow__media class. By default it uses object-fit: cover. That’s the culprit. Change it to:
.slideshow__media img {
  object-fit: contain;
  height: 500px; /* or whatever fixed height you want */
  width: auto;
  margin: 0 auto;
}
  1. Adjust the container so it doesn’t force the image to stretch full-width. In the same CSS file, tweak the .slideshow__slide to align items center:
.slideshow__slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
  1. If you want it truly locked to a fixed height across all screen sizes, set the max-height instead of height, so small screens don’t get huge blank bars:
.slideshow__media img {
  object-fit: contain;
  max-height: 500px;
  width: auto;
}

That way the width scales down proportionally, no cropping, no weird voodoo.

One caveat: if your images have wildly different aspect ratios, you’ll end up with some white/empty space around them. That’s just the trade-off when you don’t crop.

4

Hi there,

You’re right — by default Dawn’s slideshow is set to use a “cover” style background, which always fills the container but crops either the top/bottom or sides. Unfortunately, Dawn doesn’t ship with a built-in “contain” option (scale-to-fit, no cropping).

Here are two approaches you can try:

1. Adjust via CSS (quickest fix)

In your component-slideshow.css, look for the .slideshow__media (or similar depending on your Dawn version) and override it with something like this:

.slideshow__media img {
  object-fit: contain !important;
  height: 500px; /* set your fixed height */
  width: 100%;
  background-color: #fff; /* optional, fills gaps with a color */
}

  • object-fit: contain; ensures the full image is shown without cropping.

  • Setting a fixed height gives you a consistent section size.

  • You’ll see “letterboxing” (blank space on sides/top), but that’s unavoidable if you don’t want cropping.

2. Liquid-based dimension handling (more control)

Dawn does expose image dimensions through Liquid filters like image.width and image.height. In slideshow.liquid you’ll often see markup like:

{{ slide.image | image_url: width: 2000 | image_tag }}

You can adjust this to include both width and height:

{{ slide.image | image_url: width: 2000, height: 500, crop: "fit" | image_tag }}

The key is replacing "crop: fill" with "crop: fit". That tells Shopify to scale the image inside the given dimensions rather than cropping it.

Which to choose?

  • CSS route is faster and keeps things flexible.

  • Liquid route is cleaner if you want Shopify’s CDN to serve already “fit” images instead of scaling them in the browser.

If you’d like, I can drop in the exact override code for Dawn v12 (the latest release) so you can just paste it in without hunting through the theme files.