Move arrows in collection slider

Store Design
, ,

Topic summary

A user is trying to reposition navigation arrows in a custom collection slider on their Shopify store. Currently, the arrows appear inside the collection images, making them difficult to see.

Desired outcome: Move arrows outside the image boundaries (as shown in attached mockup).

Two solutions proposed:

  1. Structural approach: Wrap .slider with .slider-track, add overflow: hidden, remove negative margins from arrow elements, and include media queries for mobile responsiveness. Includes complete revised HTML/CSS code.

  2. CSS-only approach: Use absolute positioning with negative left/right values (left: -40px, right: -30px) on arrow elements, adjust parent container positioning, and add relative positioning to .collection-slider. Targets screens 768px and wider.

Both solutions include code snippets and reference screenshots. The issue remains open with no confirmation of which approach was implemented or successful.

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

Hello,

I’ve a collection slider with a custom liquid block.

And I really have this problem with trying to move the arrows outside of the collection images.

the page it’s on: https://r1vex.myshopify.com/pages/om-oss

As you can see right now there inside of the images an it makes them hard to see, so where I’ve drawn the arrows is where I would want them to be:

Skärmavbild 2024-11-02 kl. 05.59.17.png
Skärmavbild 2024-11-02 kl. 05.59.17.png3386×1404 557 KB

Here is the full code for the custom liquid block:


  ## Skapa höstmys inomhus!
  
    
❮

    
      
![Collection 1|500x585](upload://bm7VCItcZjPNLSteVBHhCXVBWgK.png)

      
![Collection 2|500x585](upload://bI57VTkullEi5FZ370H2zc5OVcc.png)

      
![Collection 3|500x585](upload://9PZgJQSqiExrpY8jKCv36eaKw8e.png)

      
![Collection 4|500x585](upload://57YT2cj8FiBaUNtleCLBTwBbrlm.png)

      
![Collection 5|500x585](upload://z8tD3j91izs4rsCIVdpLZgd4K8P.png)

      
![Collection 6|500x585](upload://Au8y1P1ChXQZlIPTRcScZJWTfIi.png)

      
![Collection 7|500x585](upload://xpLkAJHNeyxydnoGfubQDKl2atk.png)

      
![Collection 8|500x585](upload://4srRM1a5wZzJMqTo0IexBFQZmTT.png)

      
![Collection 8|500x585](upload://4srRM1a5wZzJMqTo0IexBFQZmTT.png)
 
    

    ❯
2

I’ve wrapped .slider with .slider-track, added overflow: hidden to .slider-track, and removed the negative margins from .left-arrow and .right-arrow. Additionally, I’ve added some media queries to improve the mobile view.


  ## Skapa höstmys inomhus!
  
    
❮

    
      

        
![Collection 1|500x585](upload://bm7VCItcZjPNLSteVBHhCXVBWgK.png)

        
![Collection 2|500x585](upload://bI57VTkullEi5FZ370H2zc5OVcc.png)

        
![Collection 3|500x585](upload://9PZgJQSqiExrpY8jKCv36eaKw8e.png)

        
![Collection 4|500x585](upload://57YT2cj8FiBaUNtleCLBTwBbrlm.png)

        
![Collection 5|500x585](upload://z8tD3j91izs4rsCIVdpLZgd4K8P.png)

        
![Collection 6|500x585](upload://Au8y1P1ChXQZlIPTRcScZJWTfIi.png)

        
![Collection 7|500x585](upload://xpLkAJHNeyxydnoGfubQDKl2atk.png)

        
![Collection 8|500x585](upload://4srRM1a5wZzJMqTo0IexBFQZmTT.png)

        
![Collection 8|500x585](upload://4srRM1a5wZzJMqTo0IexBFQZmTT.png)
 
      

    

    ❯

Screenshot 2024-11-02 at 12.03.14 PM.png
Screenshot 2024-11-02 at 12.03.14 PM.png1622×625 245 KB

3

Hi @manbru ,

You can add this code in Custom CSS to do it:

@media screen and (min-width: 768px){
    .slider-arrow.left-arrow {
        position: absolute !important;
        left: -40px !important;
    }
    .slider-container {
        position: unset !important;
    }
    .collection-slider {
        position: relative !important;
    }
    .slider-arrow.right-arrow {
        position: absolute !important;
        right: -30px !important;
    }
}

You can refer to this screenshot here:

DaisyVo_0-1730537643404.png
DaisyVo_0-1730537643404.png1348×617 482 KB

Hope this can help!

Best,

Daisy