Moving Banners to Custom Locations (Blueprint)

 

This requires editing the code of your store. See Getting Help for avenues of assistance.

These instructions only apply to our free, legacy Blueprint Themes that have not been customized. As always, we recommend backing up your current theme customizations before making any changes.

Normally, a marketing banner can be placed at the top or bottom of the page. It may not be the ideal spot for your banners. This guide provides instructions for moving banners to custom locations on the homepage, category, brand and search results pages of free Blueprint themes.

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

Edit HTML/CSS link

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.

Getting Help

Don't feel comfortable adjusting your design or want to work with an expert? Check out our BigCommerce Partner Directory or ask your question in the BigCommerce Community Design Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

Was this article helpful?