How can I change the zoom effect on my Dawn theme slideshow?

Store Design
, , , ,
1

Hi everyone,

I have a problem with Slideshow zoom effect.

Currently my Slideshow has “zoom in” effect, but I need to change it to “zoom out”

More information:

  1. My web page is using “Dawn” theme.

  2. Also I am using “Section store” app element “Slideshow #3”.

  3. Section store slideshow is a bit different from standard Shopify slideshow.

  4. Shopify community has similar question about slideshow, but provided code did not help me (no idea why).

https://community.shopify.com/post/2036447

I got stuck with that problem, please help me to change slideshow into “zoom out” effect (instead of zoom in).

My web page: https://avalanchesport.com/
Pass: password

My current CSS code (that is not working properly):

.swiper-slide-active img {
transform: scale(1.35);
opacity: 1;
transition: all 5s ease;
display: table !important;
margin: auto;

}

.swiper-slide-prev img {
opacity: 1;
transform: none;
}

Thank you in advance,

Shopify is the best!

slideshow.png
slideshow.png1839×864 213 KB

2

Hi @Avalanche ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Best regards,

Anthony

3

Hi @Beae_Cass ,

Thank you for your replay!
I have tested your code, it seems that slideshow images are changing their size now (image start and end size is different). That is not exactly what I would like to have.

More information:

  1. I have one webpage example, that has the correct zoom-out effect (without changing the image start and end size). I hope, this webpage, can help to understand my problem from different angle:
    https://spordipoiss.ee/

  2. Also, I have added the screen recording of my webpage, that shows the slideshow size change: Slideshow.mp4

  3. Maybe there is some other way how to use the same zoom-out effect (without image size change)? Like it was done for this webpage: https://spordipoiss.ee/

This problem is one of my last issues, I would happy if we can solve it.
Wish you all the best @Beae_Cass

4

Hi @Avalanche ,

Thank you for describing the problem in great detail, i have another solution you can try below, hope it works as you want:

Best regards,

Anthony

5

Hi @Beae_Cass ,
Thank you, web version view looks super perfect now!
But unfortunately slideshow looks differently on mobile version.

Sometimes images zoom out normally on mobile version (like in web version).
But in most cases slideshow image “zoom in” and then “zooms out”.
Seems like, mobile version does not take into account current css code.

More information:

  1. Shopify mobile view editor show slideshow correctly (like in web view).
  2. But there are slideshow effect differences on mobile device (Iphone).

3.1 I have checked classes in case mobile version use different ones.
3.2 Also tried to use code for mobile version:
@media only screen and (max-width:640px) { }

  1. I made a video recording from my device, maybe that will help:
    mobile slide.mp4

Thank you in advance!

6

It’s great to hear that the web version looks perfect now! However, the differences in slideshow behavior between desktop and mobile versions can be a bit tricky to debug. I can provide you with a code snippet that specifically targets mobile devices to ensure that the “zoom out” effect works consistently. You might need to test and adapt the code to your specific situation and theme :blush: .

Best regards.

Anthony

7

@Beae_Cass
Thank you, you did more than enough.
I will continue testing and then decided what option to choose.
Currently I can mark, that solution is accepted.

All the best @Beae_Cass