Browse by Topic

Creating a Custom Panel (Blueprint)

 

This feature requires knowledge of HTML/CSS. 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.

On a Blueprint theme, panels refer to sections of code that can be reused on several pages using a variable such as %%Panel.TopBanner%%. It makes it easier to move elements of a page around without having to copy and paste code. 

Creating your panel

1. Open a plain text editor installed on your computer, such as Notepad or TextEdit.

2. Put in the code that you want your panel to contain. The example below contains an image banner that links to another URL. Feel free to use the code below as a template and replace the values with your own information.

<div id="YourPanelNameHere">
  <h2>TextGoesHere</h2>
  <div>
    <a href="YourDestinationURLGoesHere">
    <img src="YourImageURLGoesHere">
  </a>
</div>

An html file with the above code filled out.

3. Save the file as FileName.html. The name can be anything, but it cannot contain spaces or special characters, and must end with a .html extension.

An html file in a folder on the computer.

Uploading your file into WebDAV

1. Connect to your store through WebDAV.

2. Open the Template folder, then the Panels subfolder.

3. Drag and drop your file from your computer into the Panels folder. You may need to re-enter your credentials.

The Template folder in CyberDuck

Referencing your panel

The panel now needs to be referenced in the template file you want to contain it. The location will vary depending on what the panel is and where you want it to appear.

1. In the BigCommerce control panel, go to Storefront Design › My Themes, then click the Edit HTML/CSS button.

Edit HTML/CSS

2. Select the template file you want to reference your panel from the list on the left.

The list of template files on the left of the HTML Editor

3. Locate where on the template file you want to have your panel referenced. Insert the following: %%Panel.FileName%%, where FileName is what you named your html file (without the .html at the end). This is case-sensitive, so make sure that it is typed in exactly.

The template file containing the panel reference

4. Save the template file. Double-check your work by making sure your storefront is now showing your changes.

You can now edit your custom panel from the HTML Editor. Just locate it in the Panels section in the lists on the left. It will also be in the Panels folder under Design Options › More › Template Files.

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?