How do I move the button on a slideshow in the envy theme on mobile display?

Store Design

Topic summary

A user is attempting to reposition a slideshow button to the bottom center on mobile displays in Shopify’s Envy theme. The button currently appears in the center of images, blocking product visibility.

Solutions Attempted:

  • Multiple CSS code snippets were suggested by different users, targeting theme.liquid and base.css files
  • Initial solutions successfully centered the button horizontally but failed to move it to the bottom
  • Code suggestions included justify-content: center !important and padding/bottom positioning adjustments

Current Status:

  • TerenceKEANE identified conflicting !important attributes in previous code as the root issue
  • Provided updated CSS targeting .slideshow-image-overlay .slider-caption with bottom padding and positioning
  • User reports the latest solution moved the button slightly downward, but adjusting values causes it to revert to original position

Outstanding Issue:
The problem remains unresolved—the button won’t stay at the bottom center regardless of CSS value adjustments. The discussion is ongoing with the user seeking additional guidance.

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

@lookoutpoint

Please go to

  1. Online store
  2. Themes → Edit theme
  3. Layout
  4. theme.liquid and paste this code before

If my solution works, then please like and accept it as a solution.