Customize arrow slideshow

firosyanammar14 · December 2, 2025, 9:53am

hi i have mini issues with horizon theme, i dont know this is theme issues or not but, i want to custom arrow like this, but i cant.

i change code at snippets slideshow-arrow.liquid then i try to test with background color red with important, instead a cyan color appears. thats make me confused.Screenshot-2025-12-02-162748 hosted at ImgBB — ImgBB

tim_tairli · December 2, 2025, 12:31pm

That’s because there is this code mix-blend-mode: difference; which makes arrows visible on any background, but also, yes, it will also kinda inverse your background color.

github.com/Shopify/horizon

assets/base.css

main


      
          /* Slideshow Arrows */
          slideshow-arrows {
            --cursor-previous: w-resize;
            --cursor-next: e-resize;
          
            position: absolute;
            inset: 0;
            display: flex;
            z-index: var(--layer-heightened);
            pointer-events: none;
            mix-blend-mode: difference;
            align-items: flex-end;
          
            &[position='left'] {
              justify-content: flex-start;
              padding-inline: var(--padding-xs);
            }
          
            &[position='right'] {
              justify-content: flex-end;
              padding-inline: var(--padding-xs);

firosyanammar14 · December 3, 2025, 3:10am

oh so this is the problem, thanks for the solution. my code has fixed

Topic		Replies	Views
Slideshow customization Store Design css	12	125	September 19, 2024
Slideshow background Store Design design , customizations , css	1	22	June 23, 2025
Dawn Slideshow - Add Arrow Overlays & Remove Paginations Store Design design , header , customizations , landing-page , shopify-themes	17	254	October 17, 2024
How can I make slideshow arrows more visible? Store Design design , customizations , landing-page	14	170	September 7, 2023
Changing Arrows on Slideshow (Debut Theme) Store Design	17	72	January 3, 2022

Customize arrow slideshow

Related topics