An archive block is a specific type of content block that will organize blog posts, products and events by category, tag, month, year, or author.

These blocks are great for things like a tutorial blog (yes, like this one!) but they aren’t very customizable using the site styles menu.

The three tutorials on this page will help you customize them to match your brand, from background and borders to link styles and even custom bullet points.

How to change the archive link font size

Here is a code that will change the font size & weight of the group name:

.archive-group-name-link {font-size: 20px; font-weight: bolder}

This code will change the font size and color for an archive item link:

.archive-item-link {font-size: 18px; color: purple}

How to add custom bullet points to an archive index

This is the code I used to add an arrow before the article links:

.archive-item-link:before {content:”→ “}

And last but not least, this code will add an arrow before the group link:

.archive-group-name-link:before {content:”→ “}

How to change the style of an archive block

Here is a code that will add a border and background color with a little bit of padding to an archive block:

.archive-group-list {background: rgba(100,0,100,0.1); padding: 15px!important; border: 5px solid purple; border-radius: 25px}

Here are the main code names from these tutorials. Combine these with any font, typography, border, background or other CSS styles you want to use to make it look perfect for your own site!

Entire Block

.archive-group-list

Group Name

.archive-group-name-link

Group Count

.archive-group-count

Archive Link

.archive-item-link

Dropdown

.archive-dropdown-toggle-label

Dropdown List

.archive-block-setting-layout-dropdown .archive-group-list