Dawn theme slide show

Store Design
, ,

Topic summary

A user is experiencing issues with the Dawn theme’s slideshow feature, where images appear zoomed in and blurry on the live site compared to the editor preview. They’ve shared comparison screenshots showing the discrepancy and asked whether they can replace the slideshow with a static image.

Current Status:

  • One responder noted there’s no actual slideshow on the site, just an image banner
  • Multiple users requested the store URL for troubleshooting
  • Store URL provided: labubuworld.shop

Proposed Solution:
A CSS fix was offered to prevent image zoom and blurriness:

  • Add transform: none !important and object-fit: contain !important to .slideshow__media img
  • Ensure proper width/height settings to maintain aspect ratio

Next Steps:
The original poster requested detailed implementation instructions, as they’re unfamiliar with code editing. One responder offered to provide step-by-step guidance via email. The issue remains unresolved pending implementation of the CSS fix.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

How come the slide show zooms in to the image on the website, compared to the editor what can i do? Also makes it blurry? Can i also change the slideshow to just a normal image? if i make it a slideshow again would it fix this?

Thanks so much!

Bunny2_0-1736936510427.png
Bunny2_0-1736936510427.png1386×688 163 KB

Bunny2_1-1736936517036.png
Bunny2_1-1736936517036.png1881×672 182 KB

1 Like
2

Hey @Bunny2 ,

I can help you with that! Could you please share your store URL along with the password (if it’s password-protected)? I’ll be happy to assist you further.

Looking forward to hearing from you soon. Thanks again!

Best regards,

Rajat

3

Hello, @Bunny2
There is no slideshow on your website, just an image banner…

Thanks!

4

@Bunny2

Please provide your store URL If your store is password protected then share the storefront password also.

Thanks!

5

Thanks here’s the url https://labubuworld.shop/

6

Thanks here’s the url https://labubuworld.shop/

7

Thanks here’s the url https://labubuworld.shop/

8

@Bunny2 ,

To refine your code and ensure the image is displayed correctly without zooming or blurriness, you can use the following adjustments:

  1. Remove Scaling and Fit the Image: Add object-fit: contain and ensure no zoom effect is applied.

  2. Update CSS:

.slideshow__media img {
  transform: none !important;
  object-fit: contain !important;
  width: 100%;
  height: auto;
}
  1. HTML (Your code looks good, just ensure it uses the full width correctly):

The CSS ensures the image maintains its aspect ratio and fits within the container properly without zooming in.

9

hey thanks could you give me more information on where to edit these like the exact steps not too familiar

Thanks!

10

@Bunny2 ,

Yes, I can certainly assist you with this! Feel free to reach out to me via email, and I’ll be happy to guide you through the exact steps to make the necessary edits. I’ll make sure to provide clear instructions for you to follow.