Category Images

Add top level category images in a gallery style display.

Wireframe

Category Images


Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

  • Read through the Getting Started Guide to get a better sense of how the Control Panel, Database and Front End store interact.
  • Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
  • Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Coding Instructions

Step 1: Open the Homepage Template

The homepage template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/cms/home.template.html.

Step 2: Add the Code into the Template

Paste the following code into the template where you would like the element to appear. This is most commonly placed below the banner:

<!-- Category Images -->
[%content_menu content_type:'category' sortby:'sortorder,name' show_empty:'1' limit:'6'%]
    [%param header%]
        <div class="row my-3">
            <div class="col-12 text-center">
                <h2>Our Categories</h2>
            </div>
    [%/param%]
    [%param *level_1%]
            <div class="col-6 col-lg-4 mb-3">
                <a href="[@URL@]">
                    <img class="img-fluid" src="[%asset_url type:'content' id:'[@content_id@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%/ param%][%/ asset_url%]" alt="[@headline@]" />
                </a>
                <a href="[@URL@]">
                    <h4 class="text-center pt-2">[@name@]</h4>
                </a>
            </div>
    [%/param%]
    [%param footer%]
        </div>
    [%/param%]
[%/content_menu%]

Final Result


Customising this Section

More information on how to customise this section can be found within the Content Menu Documentation.


Please Note: Ensure all categories have an image. See here for instructions on how to add an image to a product category.


Was this article useful?

Be notified when this page is updated. Optional.