BC Spark Documentation
Open a Store for FREEOther ThemesBuy Theme
  • Greeting
  • Theme Support
  • Full Theme Features
  • Installation
    • Installation
  • Header
    • Header Settings
    • Header Style
    • Top Promotion
    • Header Top
    • Store Logo
    • Custom Content
    • Quick Search
    • Dropdown Menu / Mega Menu
  • Footer
    • Footer Settings
    • Footer Style
    • Footer Top
    • Footer Bottom
  • Home Automotive
    • Main Carousel
    • Featured Categories
    • Product By Category Block
    • Product By Category ID 1-8
    • Popular Categories
    • Featured Brands with Video
    • Recent Posts
    • Brands Block
    • Contact Us Block
    • Policy Block
  • Home Tools
    • Main Carousel
    • Category Custom
    • Product Block 1
    • Product Block 2
    • Product By Category Block 1
    • Product By Category Block 2
    • Product By Category ID 1-8
    • Product Block 3
    • Popular Categories
    • Brands Block
    • Recent Posts
    • Customer Reviews
    • Policy Block
  • Home Motorcycle
    • Main Carousel
    • Featured Category
    • Popular Brands
    • Product By Category Block
    • Popular Categories 1
    • Product Block 1
    • Popular Categories 2
    • Product Block 2 + 3
    • Banner With Video
    • Recent Posts
    • Policy Block
  • Product Listing Page
    • Common Settings
    • Categories Top Banner
    • Categories Bottom: Custom Content
    • Categories Bottom: Customers Review
    • Categories Bottom: Brands Block
  • Product Detail Page
    • Common Settings
    • Frequently Bought Together Function (Bundle Products)
    • Countdown
    • Sold In Last Function
    • Secure Images
    • Sticky Add To Cart Function
    • Product Tabs
    • Product Block
  • Sidebar
    • Display & Content Settings
  • Product Card
    • Common Settings
    • Product Badges
  • Checkout Page
    • Common Settings
  • Other Pages
    • Cart Page
    • Brands Page
    • Contact Us Page
    • FAQs Page
    • Blog Post Page
  • Other Features
    • Ask An Expert Form
    • Newsletter Signup Popup
    • Recently Viewed Popup
  • Editing Theme Files
    • Intro
    • Accessing Edit Theme Files
    • Editing Theme Files
    • Saving Theme Files
    • Applying New Theme to Storefront
    • Limitations
  • Knowledge Base
  • Changelog
Powered by GitBook
On this page
  1. Product Listing Page

Categories Bottom: Brands Block

PreviousCategories Bottom: Customers ReviewNextCommon Settings

Last updated 1 year ago

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:

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 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.

Please click the "Run Pen" button to be used