Featured Brands with Video
Last updated
Last updated
Recommended Banner Size: 1920x920px and 380x130px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Featured Brands with Video on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
When you are happy with your changes, don't forget click Save HTML and Publish to repackage the edited theme.
After that, input sample content below:
<div class="halo-block halo-home-section" id="popularBrands">
<div class="popularBrands--header" data-halo-load="animation">
<div class="popularBrands--heading pos-relative text-center halo-fadeInUp" data-halo-animate="0">
<h3 class="page-heading">Shop Wheels + Rims</h3>
</div>
<div class="popularBrands--video">
<img class="popularBrands--image" src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-banner-video.jpg" alt="">
<div class="container">
<div class="popularBrands--body halo-fadeInUp" data-halo-animate="1">
<h3 class="title">Operate exceptionally well both on trails and highways</h3>
<p class="description">These tires are a good combo if you love doing street and trail riding. Built trail-tough yet also engineered for daily driving duties, the Fuel Off-Road 1-piece line is a true "no excuses" upgrade.</p>
<div class="button-group">
<a class="button button--transparent button--videos" href="#" data-reveal-id="halo-video-popup" data-url-video="https://www.youtube.com/embed/ZeKC2myhQf8?autoplay=1&mute=1" aria-label="Watch Video"><span>Watch Video</span></a>
<a class="button button--tertiary button--white" href="#" aria-label="View Products"><span>View Products</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="popularBrands--container" data-halo-load="animation">
<div class="popularBrands--heading pos-relative text-center halo-fadeInUp" data-halo-animate="1">
<h3 class="page-heading">Featured Brands</h3>
<a href="#" class="halo-link" aria-label="View All">View All</a>
</div>
<div class="popularBrands--carousel" data-halo-load="init-carousel">
<div class="item">
<article class="popularBrands--card pos-relative halo-fadeInUp" data-halo-animate="1">
<figure class="popularBrands--figure">
<img class="popularBrands--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-brand-car-1.jpg"
alt="Niche® Wheels">
</figure>
<div class="popularBrands--body">
<h4 class="title">Niche® Wheels</h4>
<div class="description">
<p>Designed for exceptional style & performance</p>
<svg>
<title>Niche® Wheels</title>
<desc>Niche® Wheels</desc>
<use xlink:href="#icon-chevron-right" />
</svg>
</div>
</div>
<a href="#" aria-label="Niche® Wheels"></a>
</article>
</div>
<div class="item">
<article class="popularBrands--card pos-relative halo-fadeInUp" data-halo-animate="2">
<figure class="popularBrands--figure">
<img class="popularBrands--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-brand-car-2.jpg"
alt="Niche® Wheels">
</figure>
<div class="popularBrands--body">
<h4 class="title">BBS® Wheels</h4>
<div class="description">
<p>Ready to outperform & outlast the competition</p>
<svg>
<title>BBS® Wheels</title>
<desc>BBS® Wheels</desc>
<use xlink:href="#icon-chevron-right" />
</svg>
</div>
</div>
<a href="#" aria-label="BBS® Wheels"></a>
</article>
</div>
<div class="item">
<article class="popularBrands--card pos-relative halo-fadeInUp" data-halo-animate="3">
<figure class="popularBrands--figure">
<img class="popularBrands--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-brand-car-3.jpg"
alt="Niche® Wheels">
</figure>
<div class="popularBrands--body">
<h4 class="title">Vorsteiner® Wheels</h4>
<div class="description">
<p>Make a bold statement of style and strength</p>
<svg>
<title>Vorsteiner® Wheels</title>
<desc>Vorsteiner® Wheels</desc>
<use xlink:href="#icon-chevron-right" />
</svg>
</div>
</div>
<a href="#" aria-label="Vorsteiner® Wheels"></a>
</article>
</div>
<div class="item">
<article class="popularBrands--card pos-relative halo-fadeInUp" data-halo-animate="1">
<figure class="popularBrands--figure">
<img class="popularBrands--image"
src="https://cdn11.bigcommerce.com/s-x94ftgg4r2/images/stencil/original/image-manager/halo-brand-car-4.jpg"
alt="Niche® Wheels">
</figure>
<div class="popularBrands--body">
<h4 class="title">Daventry Meers®</h4>
<div class="description">
<p>Crafted with a strong commitment to luxury</p>
<svg>
<title>Daventry Meers®</title>
<desc>Daventry Meers®</desc>
<use xlink:href="#icon-chevron-right" />
</svg>
</div>
</div>
<a href="#" aria-label="Daventry Meers®"></a>
</article>
</div>
</div>
</div>
<div id="halo-video-popup" class="modal halo-video-popup" data-reveal></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.
Please click the "Run Pen" button to be used
