Adding "button" links to top-level product categories on a storefront page

Problem

Add a list of large button-like links to all top-level product categories, with their names and descriptions, to an arbitrary storefront page in Shop-Script.

Desired appearance

Solution

Create a new page in backend section "Storefront → Design → Pages", switch to the HTML editing mode, and add the code snippet suggested below.

<style>
.catalog-item { width: 400px; height: 220px; display: inline-block; margin-bottom: 1em; margin-right: 1em; border: 1px solid #ddd; }
.catalog-item a { display: block; text-decoration: none; }
.catalog-item a:hover { background: #f7f7f7; }
.catalog-item a:hover .catalog-item-name { text-decoration: underline; }
.catalog-item-container { width: 400px; height: 220px; display: table-cell; vertical-align: middle; padding: 1em; box-sizing: border-box; }
.catalog-item-name { font-size: 2em; text-align: center; }
.catalog-item-description { margin-top: 1em; }
</style>

<div class="catalog">
    {foreach $wa->shop->categories(0, 0, false) as $category}
        <div class="catalog-item">
            <a href="{$category.url}">
                <div class="catalog-item-container">
                    <div class="catalog-item-name">{$category.name}</div>
                    {if trim($category.description)}<div class="catalog-item-description">{$category.description}</div>{/if}
                </div>
            </a>
        </div>
    {/foreach}
</div>

Adjust button width and height in CSS selectors .catalog-item and .catalog-item-container.