This tutorial is the second part of how to customise bullet points on your website.

You can read part 1 of this tutorial here - How to customise bullet points with an image in Squarespace

This method uses a unicode character or symbol. This is much easier and quicker. It's helpful to know the difference between ordered and unordered lists. In Squarespace, numbered lists are considered "ordered" because the numbers establish a sequence, while bullet points are considered "unordered."

This distinction matters when using CSS to target specific lists.

To change your bullet points, use "ul" in your CSS code.

To modify your numbered list, including changing the font or color, begin your snippet with "ol."

Complexity: Easy

In this example, you can, use almost any character you like. A great resource can be found here.
Below is a table of some use codes.

The two codes below effectively remove the default number or bullet point symbol.

Bullet Points aka Unordered Lists (UL)

Number Lists aka Ordered Lists (OL)

Step 1

Option 1

For this example we will add the css code of the Unordered Lists.

Also add the code you wish to use between content:” ”; In this example we will be using content:”\2605”;

Simply go to ‘Design’ and the ‘Custom CSS’, paste the code into the Custom CSS editor box.

Step 2

Option 2

We can repliacte the example used in Step 1, however in this case we will use the star for symbol and replace ‘\2605’ with the star symbol ★.

Step 3

Using an emoji as a bullet point

Simply copy the emoji of interest and paste within the between content:” ”; In this case we are using this emoji 🫵. You can checkout more at getemoji

Step 4

If you need to change the size and colour of the bullet point, you need to adjust the font-size and color values.

Step 5

A useful tool you can use to identify the #collection-id, #blockidnumber and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which we fully recommend.

The css used so far applies to entire website. If you use the Chrome Extension quarespace ID Finder to identify where you wish to apply the css code, you can apply the css to a specific page, section or block.

Use this code on a specific page

Use this code on a specfic section

Use this code on a specfic block

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.