Featured Brands

Wireframe

Home Page

Featured Brands


Before you start the Featured Brands Tweak, run through our [%list%] tag preparation checklist below, to ensure you're ready to implement the Featured Brands Tweak.

[%list%] Tag Preparation Checklist

  1. Login to the filseserver for your website, using FTP.

  2. Open your theme folder /httpdocs/assets/themes/[THEME-NAME]/templates/ and check whether your theme contains a folder named list, similar to below:

  1. If the list folder is not present, or does not contain the files outlined below, follow the instructions located on the list tag page to add the required files for this tweak.

Of importance to this tweak are the file/s: [THEME-NAME]/templates/list/content/brand.template.html


IMPORTANT NOTE: If you have been a Neto customer since before July 6, 2017, or have had custom work completed on your theme you may have customisations within the thumbs folder of your theme. In order to keep your templates up to date we suggest copying your current thumbs template into the corresponding list folder (as per 'Step 3' in the '[%list%] Tag Preparation Checklist').


Coding Instructions

Step 1. Create a new brand page

Go to Webstore > Web 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.

Step 2. Add the brands list code into the home page template

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

Paste the following code into the template, where you would like the element to appear, most commonly this is below the homepageCarousel.

[%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 sort order, which will have to be set manually to show the desired logos.

  • The sort_direction:'desc' parameter can be added to the list function above to reverse the sort of the brands.

  • The URL id for the "Show All Brands" link will need to be substituted with the ID created in step 2, instead of the current 100.

Styling Instructions

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


If you cannot see the changes you have made to your site you can refresh your cache which will allow your changes to be seen.



Was this article useful?

Be notified when this page is updated. Optional.