How to use custom images for Squarespace list section arrows
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
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:
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:
Change the width of the arrow icon
Custom image - right arrow a horizontally version of the left copy
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.