How to Add Custom Bullet Points in Squarespace (the Easy Way)

CSS

Aug 3

This solution works for both Squarespace 7.0 and Squarespace 7.1

Custom List Bullets in Squarespace

I find myself using bullet points often on websites. They are a handy way to get across lots of information that is easy to read. But the built-in bullets sometimes seem too plain:

Here’s the code I use to level up the design by swapping out standard bullet points for something more custom. You’ll paste this into Design > Custom CSS if you are using Squarespace 7.0 OR Design > Custom CSS if you are using Squarespace 7.1:

/* custom bullets */
ul[data-rte-list] li>*:first-child::before {
    content: "\21AA";
    font-weight: 400;
    color: #994926;
}

Save your code. Your bullet points will now look like this:

You can change your new bullet point style easily by pasting in a different content code. This website is a great resource for finding those CSS codes.

If you want to only change the bullet points in a particular block or on a certain page, use the steps in this video to add that code.

Prefer a video walkthrough of the steps in this post? I’ve got you covered!