Adding Your Logo to Your Store's Footer (Blueprint)

These instructions apply to our free, legacy Blueprint themes that have not been customized. The BigCommerce Support Team may not be able 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.

Updating Footer.html

1. Go to Storefront Design › Design Options, then click Edit HTML/CSS.

Edit HTML/CSS button

2. In the list of Files used by this template on the left, select Footer.html.

The footer.html theme file.

3. Copy and paste the following code at the end of the file.

<!-- Footer Logo —>
<div id="FooterLogo">%%GLOBAL_HeaderLogo%%</div>

The edited footer.html template file.

4. Save your changes.

The Save button.

Updating custom.css

1. In the list of Other Template Files on the left, select custom.css.

The custom.css file.

2. Copy and paste the following code at the end of the file.

/* Footer Logo Alignment */
#FooterLogo {
display:inline-block;
width:100%;
float:none;
text-align:center;
margin:10px;
}​​​​​​​​​​​​​​​​​

The edited custom.css file.

3. Save your changes.

The Save button.

4. View your storefront.

Example (Classic Next theme)

Example of logo in footer of the Classic Next theme.

Was this article helpful?