How can I create an image banner slideshow in Dawn theme?

Store Design

Topic summary

A user wants to create an auto-rotating image banner slideshow in Shopify’s Dawn theme without visible control buttons, while retaining admin settings for duration and text.

Solution Provided:

  • Use Dawn’s built-in slideshow section with images configured normally
  • Hide control buttons by adding custom CSS code (.slideshow__controls { display: none; }) in the theme editor’s Custom CSS field
  • This preserves auto-rotation functionality while removing visible controls

Ongoing Issue:
The slideshow images display approximately 30% shorter on mobile compared to standard image banners, despite using identical image files. The user seeks CSS code to adjust mobile height to match the image banner section.

Status: The control button issue is resolved, but the mobile sizing discrepancy remains unaddressed. One participant suggested a video tutorial for an alternative slider approach, though no specific solution for the height problem has been confirmed.

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

I am currently customizing the Shopify Dawn theme and I want to create an image banner slideshow. I don’t need any keys to control the slideshow, only the settings option in the admin panel for the duration and the text setup. I tried using the slideshow section, but I didn’t like it because when I removed the control buttons, the images stopped swapping.

2

Hey @KingDiox ,

Revert any coding changes you made to the slideshow section, and then set it up normally, with the different images you want. If you don’t want any text or buttons to show over top of it, then leave those fields blank.

From there, click into the the main “Slideshow” section from the left-hand menu within the theme editor. Then on the right-hand side, under “Custom CSS”, add the following code:

.slideshow__controls {
  display: none;
}

slideshow without controls.png
slideshow without controls.png1862×411 82.6 KB

This will achieve what you’re wanting, where the slides can still auto-rotate, but the buttons at the bottom don’t show.

Cheers,

Stephen

1 Like
3

Hey thank you for the controls, do u know how can I make the slideshow image to have the same size as the image banner on mobile.

image.png
image.png590×1606 144 KB

4

I think that would just require you to use the same sized images.

Ex. if you’re using 1200x400 in the image banner, then you’d want to use 1200x400 for the images in the slideshow (to make them the same sizes).

5

I ve used the same images, the problem is that the height on mobile is 30% smaller than the usual banner, is there’s are any css code that I can simply modify to change the size?

6

Here is a way to display a slider of images which you can try. Without using any App: