Browse by Topic

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

 

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

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

While similar to Adding an Image that Appears on Every Page, the code snippet for the store's logo can be placed in the footer as well. The instructions below outline how to add this code to the footer and style it with CSS.

Updating Footer.html

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

Edit HTML/CSS link

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.

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 Ask a Design Partner Group for assistance. Due to our Design Policy, our Techincal Support is unable to edit code or make design changes.

Was this article helpful?