Brand Associations

The logos of reputable companies that you're associated with/endorsed by, providing further customer confidence.

Note: We have used an ad_group for this example, but using a custom content type and a thumb_list may be another solution if you need to have more complex thumbnails or content behind each brand.

Wireframe

Brand associations


Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

  • Read through the Getting Started to get a better sense of how the Control Panel, Database and Front End store interact.
  • Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
  • Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Coding Instructions

Step 1: Setup the ad group

To add an advert you will first need to create an advert group.

  1. In the control panel, go to Setup & tools > All settings & tools > Webstore Advertising Groups.
  2. Setup a new advert group named brand-associations.

Step 2: Create adverts

Create an advert and set the "Group" to brand-associations.

Step 3: Add the code into the template

Navigate to the home page template /httpdocs/assets/themes/[THEME-NAME]/templates/cms/home.template.html, and paste the following code where you would like the advert to appear:

[%advert type:'text' limit:'6' ad_group:'brand-associations'%]
    [%param *header%]
        <section class="row text-center my-3" aria-label="Our Happy Customers">
            <div class="col-12">
                <h2>Our Happy Customers</h2>
                <div class="row align-items-center justify-content-center mb-2">
    [%/param%]
    [%param *body%]
                    <div class="col-6 col-md-4 col-lg-2">
                        <a href="[@url@]">
                            <img class="img-fluid" src="[%asset_url type:'adw' id:'[@ad_id@]'%][%param default%][%cdn_asset html:'0' library:'images'%]default_product.gif[%/cdn_asset%][%end param%][%/asset_url%]" alt="[@headline@]">
                        </a>
                    </div>
    [%/param%]
    [%param *footer%]
                </div>
            </div>
        </section>
    [%/param%]
[%/advert%]

Customising this Section

More information on how to customise this section can be found within the Advert Documentation.


Was this article useful?

Be notified when this page is updated. Optional.