Adding custom blocks to your theme

In this post we explore how to add custom icon blocks to your theme.

Many of our themes already display categories and sections in custom blocks.

Examples include Ruby, which has a border to add visual interest but no icons:

Ruby Zendesk theme

Ada, which features icon and a box shadow effect:

Ada Zendesk theme

And Thora, which uses custom category blocks with icons alongside static blocks to present important links and actions:

Thora Zendesk theme

These blocks are dynamically generated for categories and/or sections, but what if you want to display other links or content in a similar way?

The great news is that whether you’re looking to present categories and sections or arbitrary links and contents, our ever-growing Pattern Library contains elements that can be used or easily adapted.

The blocks found in our Category Lists section, for example, are designed to present categories but you could use the same blocks for literally any purpose.

  • <ul class="list-unstyled row justify-content-center mb-0">
      <li class="md:col-6 lg:col-4">
        <a class="block link-plain text-inherit p-5 h-full mb-4 text-center transition-fast md:mb-0 md:bg-transparent hover:bg-white hover:grow hover:shadow-lg" href="#">
          <img class="w-9" src="{{asset 'custom-block-image-1.svg'}}" alt="">
          <h2 class="h2">
            Custom block 1
          </h2>
          <p class="text-base">
            This is the text for the first custom block
          </p>
        </a>
      </li>
      <li class="md:col-6 lg:col-4">
        <a class="block link-plain text-inherit p-5 h-full mb-4 text-center transition-fast md:mb-0 md:bg-transparent hover:bg-white hover:grow hover:shadow-lg" href="#">
          <img class="w-9" src="{{asset 'custom-block-image-1.svg'}}" alt="">
          <h2 class="h2">
            Custom block 2
          </h2>
          <p class="text-base">
            This is the text for the second custom block
          </p>
        </a>
      </li>
    </ul>

The beautify of these patterns is that they can be used anywhere in your theme, not just in specific places like the Home page.