Today I want to share a very easy and useful way to add custom panels your Interspire website’s templates. I used Interspire to design V-EastOnline.com and have found it to be a very well-built and easy to use e-commerce solution.
One of the first things that I wanted to do when I started using Interspire was to create custom panels for the sidebars. I have found that a simple way to do this is to add the code that generates the panels directly to the default.html template file. You can also insert the code used to create a new panel in a text editor, save it and upload it to the server, and then add the code to call that panel to the default.html file. Let’s go over both of these ways.
The first thing we need to do is open the template files we will be working with. Sign into your Interspire admin panel, click Store Design (in the top right-hand menu), and then click the Browse Template Files button. Your template files should open in a new window or tab. The first file that opens is presumably default.html. (If it’s not, then find and open it).
If you want to simply add the codes to create a new custom panel directly to the default.html file, add this to the place where you want the new panel to appear:
<div id="SideCustomPanel"> <h2>New Items</h2> <div> <ul> <a href="http://www.yourwebsite.com/categories/sailplanes"><img src="http://www.yourwebsite.com/images/sailplane1_thumbnail.jpg" alt="" width="130" height="140" /></a> <a href="http://www.yourwebsite.com/categories/sailplanes /"> <strong>Sailplanes!</strong></a></ul> </div> </div>
Now, simply customize that code to create your panel. Save the file and you’re done!
The second way to add a custom panel to the template is to copy and paste the code we just talked about into your favorite text editor. Save the file as “SideCustomPanel.html” or whatever you wish to name the panel. Upload the file to your server, in the same folder as the other panels. Then open your Interspire website’s default.html file and add this line of code in the area where you want the new panel to appear:
Note: make sure that you use the name of the custom panel you just created! For instance, if your new panel is called “MyNewPanel.html”, then the code you would use is:
That’s it! That wasn’t so hard now, was it? As always, let me know if you have any questions, concerns or comments!
You can also learn how to create drop down or flyout menus for your Interspire shopping cart template’s sidebars in another post that I wrote.