How to use custom images for Squarespace list section arrows
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About This Tutorial
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
Squarespace list sections are a great way to showcase content, but the default arrows might not always match your website's unique vibe. You can change the color using the design settings in Squarespace, and you can do even more with custom CSS!
This tutorial will teach you how to use custom CSS to change the arrow background shape, and arrow icon thickness and how to replace them with your own image.
Under this video are the codes shared and timestamps in case you want to jump ahead to a specific spot in the tutorial.
Not sure what a list section is? Check out this artcile for more info: insidethesquare.co/list
Squarespace Tutorial
Video Chatpers
01:19 How to changing the background shape to a square by removing the border radius on desktop and mobile
02:45 how to make a list section arrow icon thicker on desktop and mobile
03:11 How to replace the arrow icons with your own image:
Code Example
Here are the codes discussed in this tutorial video. Make sure that you use the correct code for your list section type and that you update the filler text for image-url-here if you are using your own image.
Turn the background circle into a square:
/* carousel square */
.user-items-list-carousel__arrow-button{
border-radius:0!important
}
.user-items-list-carousel .mobile-arrow-icon-background-area{
border-radius:0!important
}
.user-items-list-carousel .mobile-arrow-button{
overflow:visible!important
}/* banner square */
.user-items-list-banner-slideshow__arrow-button{
border-radius:0!important
}
.user-items-list-banner-slideshow .mobile-arrow-icon-background-area{
border-radius:0!important
}
.user-items-list-banner-slideshow .mobile-arrow-button{
overflow:visible!important
}Change the width of the arrow icon
/* arrow width & edge - carousel*/
.user-items-list-carousel__arrow-icon-path{
stroke-width:5px;
stroke-linecap:square;
}/* arrow width & edge - banner*/
.user-items-list-banner-slideshow__arrow-icon-path{
stroke-width:5px;
stroke-linecap:square;
}
Custom image - right arrow a horizontally version of the left copy
/* custom arrow - one image flipped - carousel */
.user-items-list-carousel__arrow-icon-foreground, .user-items-list-carousel .mobile-arrow-icon-background-area{
opacity:0;
}
.user-items-list-carousel__arrow-icon-background, .user-items-list-carousel .mobile-arrow-button{
background-image:url(image-url-here)!important;
background-size: cover;
background-color:transparent!important
}
.user-items-list-carousel__arrow-button--right .user-items-list-carousel__arrow-icon-background, .user-items-list-carousel .mobile-arrow-button--right{
transform:scaleX(-1)!important
}/* custom arrow - one image flipped - banner */
.user-items-list-banner-slideshow__arrow-icon-foreground, .user-items-list-banner-slideshow .mobile-arrow-icon-background-area{
opacity:0;
}
.user-items-list-banner-slideshow__arrow-icon-background, .user-items-list-banner-slideshow .mobile-arrow-button{
background-image:url(image-url-here);
background-size: cover;
background-color:transparent!important
}
.user-items-list-banner-slideshow__arrow-button--right .user-items-list-banner-slideshow__arrow-icon-background, .user-items-list-banner-slideshow .mobile-arrow-button--right{
transform:scaleX(-1)!important
}These codes can be used to feature a separate image for the left and right icons. Upload both images to your Custom Files and replace the placeholder URL for each.
/* custom arrow - carousel */
.user-items-list-carousel__arrow-icon-foreground, .user-items-list-carousel .mobile-arrow-icon-background-area{
opacity:0;
}
.user-items-list-carousel__arrow-button--left .user-items-list-carousel__arrow-icon-background, .user-items-list-carousel .mobile-arrow-button--left{
background-image:url(left-image-url-here)!important;
background-size: cover;
}
.user-items-list-carousel__arrow-button--right .user-items-list-carousel__arrow-icon-background, .user-items-list-carousel .mobile-arrow-button--right{
background-image:url(right-image-url-here)!important;
background-size: cover;
}/* custom arrow - banner */
.user-items-list-banner-slideshow__arrow-icon-foreground, .user-items-list-banner-slideshow .mobile-arrow-icon-background-area{
opacity:0;
}
.user-items-list-banner-slideshow__arrow-button--left .user-items-list-banner-slideshow__arrow-icon-background, .user-items-list-banner-slideshow .mobile-arrow-button--left{
background-image:url(image-url-here);
background-size: cover;
}
.user-items-list-banner-slideshow__arrow-button--right .user-items-list-banner-slideshow__arrow-icon-background, .user-items-list-banner-slideshow .mobile-arrow-button--right{
background-image:url(image-url-here)!important;
background-size: cover;
}