Categories Bottom: Brands Block

If you want it to show on all Category / Brand / Search pages:
To show Categories Bottom: Brands Block on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.

In field HTML block:

After that, input sample content below:
<div class="halo-block halo-home-section halo-bgGray" id="topBrands">
<div class="container">
<div class="topBrands--heading pos-relative text-left">
<h3 class="page-heading">Featured Brands</h3>
</div>
<div class="topBrands--carousel pos-relative c-6" data-col="5" data-row="2" data-dot="true" data-halo-load="init-carousel">
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 1">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/brand-1.png" alt="Brand 1"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 2">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/brand-6.png" alt="Brand 2"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 3">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/brand-2.png" alt="Brand 3"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 4">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/brand-7.png" alt="Brand 4"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 5">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/brand-3.png" alt="Brand 5"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 6">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-brand-8.png" alt="Brand 6"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 7">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/brand-4.png" alt="Brand 7"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 8">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-brand-9.png" alt="Brand 8"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 9">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/brand-5.png" alt="Brand 9"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 10">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-brand-10.png" alt="Brand 10"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 11">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/brand-1.png" alt="Brand 11"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 12">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/brand-6.png" alt="Brand 12"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 13">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/brand-2.png" alt="Brand 13"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 14">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/brand-7.png" alt="Brand 14"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 15">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/brand-3.png" alt="Brand 15"/>
</a>
</div>
<div class="item">
<a href="#" class="topBrands--item" aria-label="Brand 16">
<img src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-brand-8.png" alt="Brand 16"/>
</a>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Last updated