Conclusion subcategories pictures

It happens that the owners of an online store have a desire not to dump all the goods on the buyer in the section, but to lead it through the category page, where there will be a tile of subcategories with beautiful images, to a specific subsection. So the visitor will look at the delicious previews of the product and quickly determine what he wants to buy. If such a structure is relevant for you, wellcome, we will tell you how to do it on the default OkayCMS template.

Making the subcategory display module as pictures

To display all visible subsections as images and without headings, you need to make the following changes:

1. In the file design / okay_shop / css / style.css

add to the end

 / * subcats_images_in_products * /
.subcategories .product_name {
    font-size: 19px;
    text-align: center;
}
@media (max-width: 1199px) {
    .subcategories .preview {
        border-top: 1px solid # e8e8e1;
    }
}
/ * / subcats_images_in_products * /

It can be found in the admin panel, or you can immediately start working with the file manager, because we will need it for the next two steps.

2. Create a subcategories_content.tpl file in the design / okay_shop / html / folder

with content like this:

 {* subcats_images_in_products *}
{foreach $ category-> subcategories as $ sub}
    {if $ sub-> visible}
        <div class = "subcategories no_padding products_item col-sm-6 col-xl-3">
            {include file = "subcategories_list.tpl"}
        </div>
    {/ if}
{/ foreach}
{* / subcats_images_in_products *}

3. Create a subcategories_list.tpl file in the design / okay_shop / html / folder,

and in it

 {* subcats_images_in_products *}
{* Subcategories preview *}
<div class = "preview fn_product">
    <div class = "fn_transfer clearfix">
        {* Subcategories image *}
        <a class="preview_image" href="<<<<<<<<<<<<<catalog/<<<<<<<<<<<<<
            {if $ sub-> image}
                <img src = "{$ sub-> image | resize: 320: 320: false: $ config-> resized_categories_dir}" alt = "" title = "
                <img width = "320" height = "320" src = "design /  /images/no_image.png" alt = "" title = "
        <a class="product_name" data-product="  "href ="  catalog /  "> 
{if $ set_canonical || $ self_canonical}
    {if $ category}
        {$ canonical = "/ catalog / 
    {elseif $ brand}
        {$ canonical = "/ brands / 
    {elseif $ page-> url == 'discounted'}
        
    {elseif $ page-> url == 'bestsellers'}
        
    {elseif $ keyword}
        
        

{if $ category-> level_depth == 1}
    {$ subs = $ category-> subcategories}
    {foreach $ subs as $ sub}
        {if $ sub-> visible}
            {$ count_subs_visible = $ count_subs_visible + 1}
        {/ if}
    {/ foreach}
    {if $ count_subs_visible == 0}
        {* Sidebar with filters *}
        <div class = "sidebar sidebar_top">
            {include file = 'features.tpl'}
        </div>
    {/ if}
{else}
    {* Sidebar with filters *}
    <div class = "sidebar sidebar_top">
        {include file = 'features.tpl'}
    </div>
{/ if}
{* / subcats_images_in_products *}
<div class = "{* subcats_images_in_products *} {if $ category-> level_depth! = 1} products_container {elseif $ count_subs_visible == 0} products_container {/ if} {* / subcats_images_in_products *}">
    {* The page heading *}
    {if $ keyword}
        <h1 class = "h1"> <span data-language = "products_search">  </span>  </h1>
    {elseif $ page}
        <h1 class = "h1">
            <span data-page = ""> 
        <h1 class = "h1"> <span data-category = ""> {if $ category-> name_h1 | escape}   </span>  
    {if $ current_page_num == 1 && ($ category-> annotation || $ brand-> annotation)}
        <div class = "block padding">
            {* Brief description of the category *}
            
            
    {if $ category-> level_depth == 1 && $ count_subs_visible! = 0}
    {* Subcategories list *}
    <div id = "fn_products_content" class = "fn_categories products clearfix">
        {include file = "subcategories_content.tpl"}
    </div>
    {else}
	{* / subcats_images_in_products *}
        {if $ products}
            {* Product Sorting *}
            <div class = "fn_products_sort">
                {include file = "products_sort.tpl"}
            </div>
        {/ if}
        {* Product list *}
        <div id = "fn_products_content" class = "fn_categories products clearfix">
            {include file = "products_content.tpl"}
        </div>
        {if $ products}
            {* Friendly URLs Pagination *}
            <div class = "fn_pagination">
                {include file = 'chpu_pagination.tpl'}
            </div>
        {/ if}
        {if $ page-> body}
            <div class = "block padding">
                
        {if $ current_page_num == 1 && (! $ category ||! $ brand) && ($ category-> description || $ brand-> description)}
            <div class = "block padding">
                {* Category description *}
                
                
        {if $ browsed_products}
            <div class = "h2">  </div>
            <div class = "browsed clearfix">
                {foreach $ browsed_products as $ browsed_product}
                    <div class = "browsed_item col-xs-6 col-sm-3 col-lg-6">
                        <a href=""<$lang_link>products/  ">
                            {if $ browsed_product-> image-> filename}
                                <img src = "" alt = "" title = "
                                <img width = "50" height = "50" src = "design /  /images/no_image.png" alt = "" title = "

PS
Do not forget to add the images to all subcategories in the settings (Catalog → Categories) so that the client sees beautiful previews, and not stubs for photos.

The display on devices will be something like this:

We received a module for displaying tiles of subsections, made by hand, and you can familiarize yourself with ready-made add-ons here .