Need help adjusting slideshow limits and image sizes in dawn Theme

Store Design
, , , ,
1

Hello Shopify Community,

I am currently using the Dawn theme for my store, and I need help with two adjustments to the slideshow section:

  1. Increasing the slide limit: By default, the slideshow allows up to 5 slides (dispositivos). I would like to increase this limit to 10 slides. Could anyone guide me on how to adjust the code or settings to achieve this?

  2. Reducing image sizes: I would like the images within the slides to appear smaller to create a more airy and spacious design. The goal is to allow more white space around the images without losing responsiveness or alignment.

If anyone has experience with similar adjustments in the Dawn theme or can point me to the correct code to edit (e.g., slideshow.liquid or CSS tweaks), I would greatly appreciate your help!

Thank you in advance for your support.

Labels: Shopify Themes, Customizations, Design, CSS

2

Hi @APhaedra

  1. In the slideshow.liquid file, the limit is currently set to 5. Change it to 10 as shown in this screenshot:
    https://prnt.sc/1ys5OnP_g2oM

  2. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl

  3. Paste the code provided into the Custom CSS section.

@media screen and (min-width: 768px){
.slideshow__media.banner__media.media > img {
    padding: 80px;
}
.slideshow__media.banner__media.media {
    background: white !important;
}
}

BF: https://prnt.sc/Rqfq1sv16X7H

AT: https://prnt.sc/HJzWzAAqgSyk

I hope this helps

Best,

Daisy

3

thank you Daisy it works now! Thank you¡¡¡¡¡

can you help me also with:2. Reducing image sizes: I would like the images within the slides to appear smaller to create a more airy and spacious design. The goal is to allow more white space around the images without losing responsiveness or alignment.

4

Hi @APhaedra

The code I provided you above already has the code to edit the second request

@media screen and (min-width: 768px){
.slideshow__media.banner__media.media > img {
    padding: 60px;
}

I reduced the padding even more, could you please try this code above?

Best,

Daisy

5

Hi @APhaedra

Is everything working good with the code?

If yes, please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Best,

Daisy