Dawn theme custom slideshow troubleshooting & Customization - urgent

Store Design
, , , , , , ,

Topic summary

A user implemented custom slideshow code in the Dawn theme but encountered a layout problem where thumbnail images below the navigation arrows are overlapping other page sections.

Proposed Solutions:

Solution 1 (Moeed):

  • Add custom CSS code to the theme.liquid file, placed above the </body> tag
  • Includes a screenshot showing the expected result after implementation

Solution 2 (Dotsquares):

  • Identified the root cause as a z-index conflict
  • Provided CSS targeting .custom-slideshow-thumbnails (z-index: 1) and .custom-slideshow-navigation (z-index: 2)
  • Suggested alternative fixes: increasing z-index values to 10 or wrapping thumbnails in a container with overflow: hidden

Status: The issue remains unresolved as the original poster has not confirmed which solution worked. Both responses offer CSS-based fixes but use different implementation approaches.

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

I’m using the Dawn theme, and I’ve added custom code for the slideshow section. However, the small slideshow images below the arrow navigation are overlapping the sections (reference image attached). It seems to be an indexing issue - could you please help me resolve it?

Screenshot 2025-03-18 132501.png
Screenshot 2025-03-18 132501.png422×648 50.9 KB

website: https://2512in.myshopify.com/

password: 2512

1 Like
2

Hey @Sivadarshan

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1742285490373.png
Moeed_0-1742285490373.png325×572 46.6 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

hi @Sivadarshan

It sounds like a z-index issue causing the small slideshow images to overlap other sections. Try this quick fix:

.custom-slideshow-thumbnails {  
    position: relative;  
    z-index: 1; /* Adjust as needed */  
}  

.custom-slideshow-navigation {  
    z-index: 2; /* Ensure arrows are above thumbnails */  
}

If the issue persists, try increasing the z-index value (z-index: 10;) or wrapping the thumbnails in a div with overflow: hidden;.