Adding links to top-level product categories and their subcategories on a storefront page

Problem

Add a list of links to top-level product categories and their subcategories on a 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 { text-align: center; }
.catalog-item { width: 300px; height: 150px; display: inline-block; margin-bottom: 1em; margin-right: 1em; border: 1px solid; }
.catalog-item-container { width: 300px; height: 150px; display: table-cell; vertical-align: top; box-sizing: border-box; padding: 1em; }
.catalog-item-top { font-size: 2em; }
.catalog-item-subcategories { margin-top: 1em; }
.catalog-item a { text-decoration: none; }
.catalog-item a:hover { text-decoration: underline; }
</style>

<div class="catalog">
    {foreach $wa->shop->categories(0, 1, true) as $top_category}
        <div class="catalog-item">
            <div class="catalog-item-container">
                <div class="catalog-item-top">
                    <a href="{$top_category.url}">{$top_category.name|escape}</a>
                </div>
                <div class="catalog-item-subcategories">
                    {foreach $top_category.childs as $child_category}
                        <a href="{$child_category.url}">{$child_category.name|escape}</a>{if !$child_category@last}, {/if}
                    {/foreach}
                </div>
            </div>
        </div>
    {/foreach}
</div>

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