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.
1

I am trying to figure out how to move the button label 1 to the bottom center of each slide in the envy theme.

https://www.bbqstylegear.com/

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.

3

Hello @lookoutpoint

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

.action-buttons {
    justify-content: center !important;
}

Copy

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

4

This is Noah from PageFly - Shopify Page Builder App

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

5

This moved it to the center of the image, but did not move it to the bottom. On mobile it is still center and blocking the product. Do you have another idea?

Thanks!

6

When I tried this it moved it to the center, but not the bottom. Is there a way to move it center and bottom?

Thanks!

7

When I tried this it moved it to the center, but not the bottom. Is there a way to move it center and bottom?

8

Hi,

I’ve identified that you’re encountering an issue due to the presence of the “important” attribute in some of the previously implemented codes. The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I’ll help.

.slideshow-image-overlay .slider-caption {
    bottom: 0 !important;
    padding-bottom: 0 !important;
}
  1. Navigate to the ‘Edit Code’ option in your theme settings, then search for “custom.css” in the search bar.

TerenceKEANE_0-1713170739740.png
TerenceKEANE_0-1713170739740.png945×342 27.1 KB

9

Thanks for the help Terence, it moved the button down very slightly. But when I adjust the values, regardless of the number I input, it moves it back up to where it was. Any idea how to fix that?