Sections

Add custom blocks

Many of our themes already display categories and sections in custom blocks. They come in a variety of shapes and sizes and, like everything else in our themes, can be easily customized to your specific requirements.

In this article

Examples

The example below demonstrates the default look-and-feel of blocks that are used to represent categories in our Braxton theme. Custom blocks can adopt the same look-and-feel but be used for any purpose. For example, to present a link to the Submit a Request page.

  • <ul class="list-unstyled row justify-content-center mb-0">
      {{#each categories}}
        <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="{{url}}">
            <img class="w-9" src="{{asset @index prefix='category' suffix='.svg'}}" alt="{{name}}">
            <h2 class="h2">
              {{name}}
            </h2>
            {{#if description}}
              <p class="text-base">
                {{excerpt description}}
              </p>
            {{/if}}
          </a>
        </li>
      {{/each}}
    </ul>
    {{pagination}}

In the theme itself the images can be changed using theme settings. To ensure that the example is transferable between themes, the code for this example uses the {{asset}} helper to reference images within the theme Assets folder.

Our Ruby theme features card-style elements and uses a bottom border in the theme’s primary color to add visual interest. The responsive two column layout is produced using our rows and columns, but each element could have just as easily spanned the full width of the screen.

  • <ul class="list-unstyled row row-sm">
      {{#each categories}}
        <li class="lg:col-6 mb-5">
          <a class="card p-6 h-full bg-white border-bottom-primary border-bottom-3 text-inherit hover:no-underline" href="{{url}}">
            <h2 class="h3 m-0">
              {{name}}
            </h2>
            {{#if description}}
              <p class="mt-3 mb-auto">
                {{excerpt description}}
              </p>
            {{/if}}
          </a>
        </li>
      {{/each}}
    </ul>
    {{pagination}}

These are two examples of the near-infinite possibilities that exist. If you’d like to create your own truly unique blocks to display categories or custom links, consider starting with an example from our Pattern Library or one of our themes and use our utilities to tweak them to perfection.

Usage

To get started using custom blocks you use theme settings or examples from our Pattern Library. The Pattern Library opens up a world of possibilities, providing you with complete control over the block’s content and layout.

Our Braxton theme allows you to add up to 8 custom blocks to the Home page using theme settings. The images that you select for your categories in theme settings are the one used for the custom blocks, assigned based on their position on the page.

Once custom blocks are enabled you can add any HTML content to your blocks using dynamic content which offers unparalleled flexibility and native localization support. We don’t limit you to certain options that we define ahead of time. For example, you can add the custom block below to your Help Center by creating a dynamic content snippet called Custom block 1 and pasting in the code provided:

  • <h2>Submit a Request</h2><p>Our friendly customer service team is here to help</p><a href="https://www.my-website.com"></a>

If you include a <a> element with an href anywhere in your block content, as demonstrated in the example above, the resulting block will act as a link and take the visitor to the URL provided when it is clicked.

To create dynamic content for your custom blocks:

  1. Click on the Admin icon (Admin icon) in the sidebar, then select Dynamic Content.

  2. Click Add item.

  3. Enter a title for the dynamic content in the format Custom block X where X is the position of the block on the page (a number between 1 and 8).

  4. Select the default language.

  5. Enter the content to display within the block without line breaks.

Custom blocks with styles taken from our Pattern Library (or other themes) can be created in any theme and used in many different ways, for example to highlight contact options or other areas of the Help Center like the Community forum. By taking only the HTML from the Braxton example above without the Curlybar expressions we can use them for a completely different 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">
            Chat with us
          </h2>
          <p class="text-base">
            Our agents are ready to help you with your problem
          </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">
            Receive updates
          </h2>
          <p class="text-base">
            Sign up to get important product updates in your inbox
          </p>
        </a>
      </li>
    </ul>

The beauty of these patterns is that they can be used anywhere in your theme, not just in specific places like the Home page. You can also have as many as you like without being constrained to a predefined number.

Whether you’re looking to present categories and sections or arbitrary links and content, our ever-growing Pattern Library contains elements that can be used or easily adapted. Every theme purchase gives you complete access to all patterns, including our collection of category lists.

Questions or feedback about this guide? Let us know