How to remove the sliding effect from the slideshow

Store Design
, , , , , , , , , , , , ,

Topic summary

A user wants to remove the sliding transition effect from their Shopify store’s slideshow, making images change instantly when clicking navigation arrows instead of animating between slides.

Initial troubleshooting attempts:

  • Checked slideshow.liquid, component-slider.css, and component-slideshow.css files
  • Did not locate the transition settings in these files

Proposed solution:
Add custom CSS code through Shopify Admin → Online Store → Themes → Customize → Theme Settings/Custom CSS:

.slideshow slide {
  transition: none !important;
}

This removes the animation delay, creating an instant “pop” effect when switching images.

Alternative approach if initial code fails:
Some themes use different class names, so try:

.flickity-slider {
  transition: none !important;
}

Status: Solution provided but not yet confirmed as implemented or working. The issue remains open pending user testing.

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

Hey guys, so basically I added a slideshow to my store and it has that basic slide transition effect when you click on the arrows, but I’d like to remove it, is that possible?

I just want it so when someone clicks the arrows, the photo instantly changes, without any transition effect, it just pops to the next one.

Here’s my store: https://creationwithtim.com/products/cinematiq-lut-collection-copy
(Just scroll all the way down to find the slideshow section)

Thanks for the help,
Tim

1 Like
2

Hi,

Hope this will help

  • Find slideshow’s CSS and JavaScript files.
  • Change transition from ‘0.5s’ or anything else to “none”.
  • Save and refresh.
3

I couldn’t find it anywhere.

I checked:

  • slideshow.liquid

  • component-slider.css

  • component-slideshow.css

But didn’t find anything.

4

Go to your Shopify Admin

Click on Online Store Themes then click Customize on your active theme

In the theme editor, look for Theme Settings or scroll to the bottom left menu and click Custom CSS or Custom code depending on your theme

Add the following CSS code:

css

Copy

Edit

Remove transition effect from slideshow *

.slideshow slide

transition: none !important;

What this does:

It removes the sliding animation, so when someone clicks the next/previous arrow, the image just switches instantly no delay, no animation, just a clean pop effect.

Not working?

Some themes use different class names for the slideshow. If the code above doesn’t work right away try using this alternative:

css

Copy

Edit

.flickity slider

transition: none !important;

Or share your theme name and I’ll help adjust it!