Category Images

Category Images

After completing this tweak your webstore will display top level category images, to accomodate customers who like to browse in a more visual way.

Wireframe

Category Images


Before you start, run through our [%list%] tag preparation checklist below, to ensure you're ready to implement the Category Images Tweak.

[%list%] Tag Preparation Checklist

  1. Login to the filseserver for your website, using FTP.

  2. Open your theme folder /httpdocs/assets/themes/[THEME-NAME]/templates/ and check whether your theme contains a folder named list, similar to below:

  1. If the list folder is not present, or does not contain the files outlined below, follow the instructions located on the list tag page to add the required files for this tweak.

Of importance to this tweak are the file/s: /httpdocs/assets/themes/[THEME-NAME]/templates/list/content/category.template.html


IMPORTANT NOTE: If you have been a Neto customer since before July 6, 2017, or have had custom work completed on your theme, you may have customisations within the thumbs folder of your website theme. In order to keep your templates up to date we suggest copying your current thumbs template into the corresponding list folder (as per 'Step 3' in the '[%list%] Tag Preparation Checklist').


Coding Instructions

Step 1. Add the category list code into the home page template

Open the home page template:

/httpdocs/assets/themes/[THEME-NAME]/templates/cms/home.template.html

Paste the following code into the template, where you would like the element to appear, most commonly this is below the homepageCarousel:

[%list type:'content' filter:'content_type=category' template:'category' limit:'12' sort:'content_name, sortorder'%]
    [%param *header%]
        <hr/>
        <h2 class="text-center">Our Categories</h2>
        <div class="row category-images">
    [%/param%]
    [%param *footer%]
        </div>
    [%/param%]
[%/list%]

Additional Useful Steps

To add CSS that re-sizes and vertically-aligns each category image within its container, paste the following code into /httpdocs/assets/themes/[THEME-NAME]/css/style.css at the end of the file:

.category-images img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    object-position: center;
}

Final Result

Category Images Final Result


If you cannot see the changes you have made to your site you can refresh your cache which will allow your changes to be seen.


Was this article useful?

Be notified when this page is updated. Optional.