Картинки категорий на главной в теме Flatty

Нужно добавить в home.html следующий код:

<div class="container nocontainer categories-list">
	{if !empty($theme_settings.home_cat_img_heading)}
		<div class="title-bg accent-font">
			{$theme_settings.home_cat_img_heading}
		</div>
	{/if}
	<ul class="thumbs">
		{foreach $wa->shop->categories(0, 0) as $c}
		{if $c.image}
		    <li class="list-item">	
		    	<div class="border accent-border">
		    	    <div class="image">
    					<a href="{$c.url}" title="{$c.name|escape}">
    						{if $c.image}
    							<img src="{$wa_url}wa-data/public/shop/categories/{$c.id}/{$c.id}{$c.image}" alt="{$c.name|escape}" />
    						{/if}
    					</a>
					</div>
					<div class="h4 accent-font">
					    <a href="{$c.url}" title="{$c.name|escape}">{$c.name|escape}</a>
				    </div>
				</div> 	
		    </li>
		{/if}
		{/foreach}
	</ul>	
</div>

Далее нужно создать новый файл темы style.shop.user.css:

.categories-list ul.thumbs {
    text-align: center;
}
.categories-list ul.thumbs li {
    width: 230px;
    display: inline-block;
    margin: 0 10px 15px 0px;
    vertical-align: top;
}
.categories-list ul.thumbs li div.border {
    padding: 10px;
    border: 1px solid #ccc;
}
.categories-list ul.thumbs .image {
    display: table;
    width: 100%;
}
.categories-list ul.thumbs .image a {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 200px;
}
.categories-list ul.thumbs .image img {
    max-width: 200px;
    max-height: 200px;
    vertical-align: middle;
}
.categories-list ul.thumbs .h4 {
    text-align: center;
    height: 41px;
}

И добавить строчку в файл head.html:

<link rel="stylesheet" href="{$wa_active_theme_url}style.shop.user.css?v{$wa_theme_version}" />