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.

Industries

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

Wireframe

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'/%]
[%breadcrumb%]
    [%PARAM *header%]
        <ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList" role="navigation" aria-label="Breadcrumb">
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                <a href="[@config:home_url@]" itemprop="item"><span itemprop="name">Home</span></a>
            </li>
    [%/PARAM%]
    [%PARAM *body%]
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a href="[@url@]" itemprop="item"><span itemprop="name">[@name@]</span></a>
        </li>
    [%/PARAM%]
    [%PARAM *footer%]
        </ul>
    [%/PARAM%]
[%/breadcrumb%]
<h1 class="page-header">[@content_name@]</h1>
<p class="text-muted">
    [%IF [@content_author@]%]
    Author: [@content_author@]  
    [%/IF%]
    [%if [@date_posted@] != 0000-00-00 00:00:00%]
    Date Posted:[%FORMAT type:'date'%][@date_posted@][%/FORMAT%] 
    [%/IF%]
</p>

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

[%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">
        [@content_short_description1@]
        [@content_short_description2@]
        [@content_short_description3@]
    </section>
    <section class="n-responsive-content" aria-label="Description">
        [@content_description1@]
        [@content_description2@]
        [@content_description3@]
    </section>
    <hr>
[%/if%]
</div>

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:'//cdn.neto.com.au/assets/neto-cdn/images/default_product.gif'/%]" alt="[@content_name@]"/>
</a>
</div>

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.