Tweak Library

Featured Brands

A list of featured brands logos, which increase customer confidence through recognition. When clicking on a logo, they will be taken to a category page that shows all products identified with the brand. A "view all brands" link is also in place, which will take you to a newly created page that shows all brands.


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


Home Page

Featured Brands

Coding Instructions

Step 1. Add the brands thumb_list code into the home page template

Open the home page template: /assets/themes/THEME-NAME/cms/home.template.html

Paste the following code into the template:

[%thumb_list type:'content' content_type:'brand' template:'brand' limit:'6' sortby:'sortorder'%]
    [%param *header%]
        <h2 class="text-center">Featured Brands</h2>
        <div class="row featured-brands">
    [%param *footer%]
        <a href="[%url type:'content' id:'100'/%]">Show All Brands</a>

Notes on the above code

  • If there are more than 6 brands uploaded in the cPanel, the logos that show are defined by the sortorder, which the customer will have to set manually to show the appropriate logos.

  • The URL id for the "show all brands" link will be available after the new brands page is set up.

Step 2. Create a new brand thumb template

Create a new template under /assets/themes/THEME-NAME/thumbs/content called "brand.template.html", and paste the following code into it:

<div class="col-xs-6 col-md-2">
    <a href="[@URL@]"><img src="[%ASSET_URL type:'content' id:'[@content_id@]' default:'[@config:imageurl@]/pixel.gif'%][%/ASSET_URL%]" alt="[@content_name@]"/></a>

Step 3. Create a new brand page

Go to Webstores > Information Page and click "Add New" to create a new content page for your brands. Call it something meaningful like "Brands" and click "Continue". Note the ID of the page and substitute this ID for the "100" number in the supplied code above.

Additional Useful Steps To add CSS to re-size and vertically-align 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

Featured Brands Final Result

1 related articles found: