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.

Industries

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

Wireframes

Home Page

Featured Brands

Coding Instructions

Step 1. Add the brands 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:

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

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 list template

Create a new template under /assets/themes/THEME-NAME/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@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%/param%][%/ASSET_URL%]" alt="[@content_name@]"/></a>
</div>

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.

Learn more about setting up a brands page here.

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: