How can I separate the navigation arrows in a slideshow code?

Shopify Discussion
,

Topic summary

A user seeks help modifying CSS code for slideshow navigation arrows in Shopify. They want to separate the arrows to opposite sides of the slideshow, referencing a screenshot example.

Initial Solution Attempted:

  • Another user (darioaladuz) provided CSS code to adjust arrow positioning using flexbox properties
  • Code targets .slideshow-component .slideshow__controls with display flex and space-between justification

Current Status:

  • User confirmed they’re on a free Shopify trial
  • Store password was shared for troubleshooting access
  • Initial code appeared to work visually, but user clarified arrows still need further separation
  • A revised CSS solution was provided adjusting position, width, and transform properties
  • Unresolved: User reports the latest code modification “didn’t work”

The discussion remains open with the positioning issue not yet solved. Multiple code snippets and an image attachment are central to understanding the desired layout.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
8

Ah I see, in that case, change the following code like so:

slideshow-component .slideshow__controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
1 Like