Categories Bottom Banner

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

If you want it to display on each Category / Brand / Search page:
To show Categories Bottom Banner 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" id="categoryBanner1">
<div class="container">
<div class="categoryBanner1__container">
<div class="categoryBanner1__carousel home-banner-carousel">
<div class="categoryBanner1-content">
<div class="wrapper-content">
<div class="categoryBanner1__img home-banner-image">
<a href="#" title="#MUST Have" aria-label="#MUST Have">
<img class="lazyload" src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg" data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/category-banner-bottom-1.jpg" title="#MUST Have" alt="#MUST Have" />
</a>
</div>
<div class="content">
<h4 class="sub-heading">Custom CMS Block</h4>
<h3 class="heading">Cosmo De Milance</h3>
<p class="text">Nullam aliquet vestibulum augue non varius. Cras nec congue elitos. Duis tristique del ante nec aliquam. Praesent urna tellus laoreet an cosmo lorem tellus ullamcorper fermentum facilisis deratum...</p>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
<div class="categoryBanner1-content">
<div class="wrapper-content">
<div class="categoryBanner1__img home-banner-image">
<a href="#" title="#MUST Have" aria-label="#MUST Have">
<img class="lazyload" src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg" data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/category-banner-bottom-2.jpg" title="#MUST Have" alt="#MUST Have" />
</a>
</div>
<div class="content">
<h4 class="sub-heading">Trend Now</h4>
<h3 class="heading">Lorem De Dorus</h3>
<p class="text">Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque non nulla nulla, nec tincidunt risus morbi ultricies est ditae odio ultrices imperdiet. Cras accumsan dorci maces cons deratum...</p>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
<div class="categoryBanner1-content">
<div class="wrapper-content">
<div class="categoryBanner1__img home-banner-image">
<a href="#" title="#MUST Have" aria-label="#MUST Have">
<img class="lazyload" src="https://cdn11.bigcommerce.com/s-q8olo630qr/content/loading/loading.svg" data-src="https://cdn11.bigcommerce.com/s-puuf0ho3a3/images/stencil/original/image-manager/category-banner-bottom-3.jpg" title="#MUST Have" alt="#MUST Have" />
</a>
</div>
<div class="content">
<h4 class="sub-heading">Beauty Accessories</h4>
<h3 class="heading">Milancelos Lynun</h3>
<p class="text">Nullam aliquet vestibulum augue non varius. Cras nec congue elitos. Duis tristique del ante nec aliquam. Praesent urna tellus laoreet an cosmo lorem tellus ullamcorper fermentum facilisis deratum...</p>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
</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