<!-- Категории --> <section id="catalog"> <div class="container"> <div class="block__title block__nav"> <a href="{CATALOG_URL}" class="title">Категории товаров</a> <div class="owl-nav"></div> </div> <div class="catalog__items owl-carousel"> {% FOR catalog_full %} {% IF catalog_full.LEVEL = 0 %} <div class="categories__item" data-id="{catalog_full.ID}"> <a href="{catalog_full.URL}" class="categories__image"><img src="{% IF catalog_full.IMAGE_MEDIUM %}{catalog_full.IMAGE_MEDIUM}{% ELSE %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=marketplace{% ENDIF %}" class="goods-image-medium"/></a> <a href="{catalog_full.URL}" class="categories__name">{catalog_full.NAME}</a> </div> {% ENDIF %} {% ENDFOR %} </div> </div> </section>
замените на:
<!-- Категории --> <section id="catalog"> <div class="container"> <div class="block__title block__nav"> <a href="{CATALOG_URL}" class="title">Категории товаров</a> <div class="owl-nav"></div> </div> <div class="catalog__items {% IF index_page %} index {%ENDIF%} "> {% FOR catalog_full %} {% IF catalog_full.LEVEL = 0 %} <div class="categories__item" data-id="{catalog_full.ID}"> <a href="{catalog_full.URL}" class="categories__image"><img src="{% IF catalog_full.IMAGE_MEDIUM %}{catalog_full.IMAGE_MEDIUM}{% ELSE %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=marketplace{% ENDIF %}" class="goods-image-medium"/></a> <a href="{catalog_full.URL}" class="categories__name">{catalog_full.NAME}</a> </div> {% ENDIF %} {% ENDFOR %} </div> </div> </section>
далее зайдите в Редактор шаблонов-->main.css и в самый конец кода вставьте:
.index .categories .categories__item {margin-bottom:20px;} .toolbar + .categories {padding-top: 30px;} .catalog__items.index {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-ms-flex-wrap: wrap;flex-wrap: wrap;text-align: center} .catalog__items.index .categories__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;margin: 0 4px 30px;border: 1px solid #dce4e9;text-align: center;width: 200px;background: #fff} .catalog__items.index .categories__item .categories__image {border-bottom: 0;margin: 0 10px 10px;line-height: 200px} .catalog__items.index .categories__item a.categories__image {display: block;overflow: hidden;height: 195px;} .catalog__items.index .categories__item a.categories__image img {max-width: 100%} .catalog__items.index .categories__item .categories__name {display: -webkit-box;display: -ms-flexbox;display: flex;margin: 0;padding: 10px;background: 0 0;text-align: center;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;border-bottom: 1px solid #dce4e9} .catalog__items.index .categories__item a.categories__name {display: block;margin: auto;overflow: hidden;font-size: 16px;height:60px;} .catalog__items.index .categories__item:hover a.categories__name {color: #7e6cd6}
Результат: