I want to slow down the transition between slides because it’s way too fast. I’ve looked everywhere in the CSS and I don’t understand how to change it.
Please help!
Thanks
Topic summary
A user is trying to slow down the slideshow transition speed in Shopify’s Dawn 9.0.0 theme, finding the default animation too fast.
Initial Suggestions:
- One responder pointed to built-in customization options: Online Store > Theme > Customize > Slideshow settings
- Another provided custom CSS code to add to the base.css file, including an
autoplaySpeedparameter (set to 5000 milliseconds) to control transition duration
Implementation Issues:
The user reports the CSS solution isn’t working despite multiple attempts. Screenshots show the code was added to base.css, but no changes occurred. When a comment line was removed as suggested, it only changed the syntax highlighting colors without fixing the functionality.
Current Status:
The issue remains unresolved. The custom CSS approach appears to have syntax or compatibility problems, and it’s unclear whether the built-in theme customization options were explored as an alternative solution.
Hi @SearchGhost1738 , it has an option to change slide in your Online store > Theme > Customize > Slide show > Change slides every
Hello @SearchGhost1738 ,
You can try to follow these steps:
Go to Online Store → Themes → Actions → Edit code
Go to Assets → base.css file → add this following code at the bottom of page
$('.slideshow').slick({
// Existing slideshow options
autoplay: true,
autoplaySpeed: 5000, // Change this value to set the duration between slides (in milliseconds)
});
Save changes
Hope this can help you out.
Ali Reviews team.
1 Like
This didn’t work. Can you remove the comments and double check the punctuation?
Hi,
Is it still too fast or the code make it appear wrong?
It didn’t change anything. I think it’s a punctuation error. Does this need to go in my base.css?
You can try to add the code at the bottom of base.css file.
Remember that you can change the duration time to make it longer
I changed the duration but it didn’t do anything. It looks like it’s not correct in the base.css - I attached an image.
try to remove the line “//Existing slideshow options”
