Category Banner

Add a full-width category banner, providing a way to visually identify the category.

Wireframe

Preparation Checklist

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

• Read through the Getting Started 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: Upload a category banner

The first step is to upload a test category banner. The best practice is to use "alt image 1", as the main image is often used for links to category pages and generally used in a square ratio (not so much a banner). You can find instructions on how to add a banner in this article.

Step 2: Add the code to the template

Paste the following code into the category template where you would like this element to appear:

[%set [@has_categorybanner@]%][%asset_url type:'content' thumb:'alt_1' id:'[@content_id@]' /%][%/set%]
[%if [@has_categorybanner@]%]
    <p><img src="[%asset_url type:'content' thumb:'alt_1' id:'[@content_id@]'/%]" class="img-fluid img-responsive"/></p>
[%/if%]

Note: The variable [@has_categorybanner@] ensures that if the image asset doesn't exist, it displays nothing. Alternatively, this variable can be dropped and the default image can be used to show a default "empty image" such as:

 <p><img src="[%asset_url type:'content' thumb:'alt_1' id:'[@content_id@]' default:'/assets/themes/skeletal/no-category.jpg'/%]" class="img-fluid img-responsive"/></p>