1.4K Messages
•
262.9K Points
How do I create a custom panel?
The following video shows you how to create a custom panel that contains an image that you have uploaded into your image manager. This same process can be applied to any image that you wish to upload into a panel that you can then drag around within design mode.
Creating your panel 1. Open a text editor, such as Notepad or TextEdit.
2. Put in the code that you want your panel to contain. The video example 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>
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.
If you are creating a custom template file instead of a panel, such as category.html or product.html, the file name must have an underscore at the beginning. E.g. _category.html or _product.html.
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.
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 Design, then click the Edit HTML/CSS button in theThemes tab.
2. Select the template file you want to reference your panel from the list on the left. If you want it to be on default.html, like in the video, you can skip this step.
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.
4. Save the template file. Double-check your work by making sure your storefront is now showing your changes.
Creating your panel 1. Open a text editor, such as Notepad or TextEdit.
2. Put in the code that you want your panel to contain. The video example 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>
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.
If you are creating a custom template file instead of a panel, such as category.html or product.html, the file name must have an underscore at the beginning. E.g. _category.html or _product.html.
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.
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 Design, then click the Edit HTML/CSS button in theThemes tab.
2. Select the template file you want to reference your panel from the list on the left. If you want it to be on default.html, like in the video, you can skip this step.
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.
4. Save the template file. Double-check your work by making sure your storefront is now showing your changes.
No Responses!