Brands Page

Brands Page

A page that shows a list of all product brands that are available, including pagination. Clicking on a brand will take you to a category page that shows all items related to the brand.


  • Health & Beauty
  • Fitness & Supplements
  • Alcohol
  • Music & Instruments
  • Sports & Recreation
  • Toys & Games
  • Animal & Petcare
  • Events & Party Supplies
  • Food & Beverages


Multi-Item Add

Coding Instructions

Step 1. Create the brands page template

Create a new template called brands.template.html in the folder /httpdocs/assets/themes/[THEME-NAME]/cms/.

Paste the below code into the template:

[%load_template file:'cms/includes/sidebar.template.html'/%]
    [%PARAM *header%]
        <ul class="breadcrumb" itemscope itemtype="" role="navigation" aria-label="Breadcrumb">
            <li itemprop="itemListElement" itemscope itemtype="">
                <a href="[@config:home_url@]" itemprop="item"><span itemprop="name">Home</span></a>
    [%PARAM *body%]
        <li itemprop="itemListElement" itemscope itemtype="">
            <a href="[@url@]" itemprop="item"><span itemprop="name">[@name@]</span></a>
    [%PARAM *footer%]
<h1 class="page-header">[@content_name@]</h1>
<p class="text-muted">
    [%IF [@content_author@]%]
    Author: [@content_author@]  
    [%if [@date_posted@] != 0000-00-00 00:00:00%]
    Date Posted:[%FORMAT type:'date'%][@date_posted@][%/FORMAT%] 

[%list type:'content' filter:'content_type=brand' template:'brand' limit:'999' sort:'content_name'%]
[%param *header%]
    <div class="row featured-brands">
[%param *footer%]

[%if [@content_short_description1@] or [@content_short_description2@] or [@content_short_description3@] or [@content_description1@] or [@content_description2@] or [@content_description3@]%]
    <section class="n-responsive-content" aria-label="Short Description">
    <section class="n-responsive-content" aria-label="Description">

Step 2. Create a new brand list template

If you have already added the "featured brands" function to the home page, you can skip this step.

Create a new template under /httpdocs/assets/themes/[THEME-NAME]/templates/list/content called brand.template.html, and paste the following code into it:

<div class="col-xs-6 col-md-2">
<a href="[@URL@]">
<img class="img-responsive block-center" src="[%asset_url type:'content' id:'[@content_id@]' default:'//'/%]" alt="[@content_name@]"/>

Additional Useful Steps

If you would like to add CSS that resizes and vertically aligns each logo within its container, paste the following code into /httpdocs/assets/themes/[THEME-NAME]/css/style.css :

.featured-brands img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    object-position: center;

Final Result

Multi-Item Add

Download Files

Download Files

Was this article useful?

Be notified when this page is updated. Optional.