Moving Banners to Custom Locations (Blueprint)

These instructions apply to our free, legacy Blueprint themes that have not been customized. The BigCommerce Support Team may not be able to assist with issues that occur after applying them to a previously customized theme. As always, we recommend backing up your current theme customizations before making any changes.

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce approved agencies or our Community. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.


This guide provides instructions for moving banners to custom locations on the homepage, category, brand and search results pages of free BigCommerce themes.

1. Go to Storefront Design › Design Options and click on Edit HTML/CSS.

Edit HTML/CSS button

2. In the list of Other Template Files on the left, select the .html file that corresponds to the page you’d like to customize.

  • default.html — Homepage
  • category.html — Category pages
  • brand.html — Brand pages
  • search.html — Search results page

Because all category and brand pages use a single .html layout file (i.e. category.html and brand.html, respectively), customizing the location of banners in these files will apply your customization to all category or brand pages.

List of other template files.

3. Locate the variable that corresponds to the banner (top or bottom) you would like to customize.

  • %%Banner.TopBanner%% — Variable for banners whose location is set to Top of Page
  • %%Banner.BottomBanner%% — Variable for banners whose location is set to Bottom of Page

Banner location

4. Highlight and cut the variable , then paste it in its new location in the file.

Use Control X or Command X to cut text out of a file, and Control V or Command V to paste it somewhere else.

5. Save your changes.

The Save button.

Example

Moving the homepage top banner from below the carousel to above it.

Before:

default.html

The default.html file before editing.

Homepage Banner Location

The homepage banner location before editing.

After:

default.html

The default.html file after editing.

Homepage Banner Location

The homepage banner location after editing.

Was this article helpful?