Editing Custom Templates in Highwire
Go to Appearance > Your Store DesignSet the current design mode to "I want to use my own custom template", and then click save.
If you want to customize a stock theme, click on "Choose New Theme", select one, and then click "Apply to Custom Templates".
(Note: if you only want a few small changes to a stock theme, you may first want to choose the setting "I want to use a pre-built theme", and then at the bottom, "Modify this theme".)
To edit or install a custom template, click "Launch the custom template editor". This opens in a new window.
VERY IMPORTANT: If you already have a custom template installed, or after you have edited a custom template, click "Download Templates" at the top. This will save a copy of the template to your computer. This is necessary because you are eventually going to destroy your store if you do much with the template. Just accept the fact and be calm about it.
As long as you have a recent backup,
you can repair it instantly and then figure out the problem at your
leisure.Along the top of the edit screen are icons.
- "Publish" will save the page you are editing, and make it public on your site.
- "Save as Draft" will save it in the folder on the left named "Template Drafts", and it will not be public.
- "Preview Draft Mode" will let you see what the page will look like in your browser.
- "Versions" lets you revert to a recently saved version of the page.
Look at the code in the main box. This is mainly html code, with some Velocity templating code, which generates html code when certain conditions are met. (This is why the template you're looking at is different from the code you see when you use View > Page Source in your browser.)
The Velocity codes begin with # and have a lot of $ in them. You may also see some code inside {{ }}. DON'T TOUCH ANY OF THOSE unless you know what you're doing!
The html is the basic framework of the site. Colors, fonts, styles, and positions are provided by the style sheet (or sheets), which end in .css and are found under "Editable Files" in the left column.
The html page gets the stylesheet information from a link up at the top, in the head, that will look something like this:
<link rel="stylesheet" href="http://custom.buyitsellit.com/xxxx/main.css" type="text/css" media="screen" />
Now, you can edit the html code directly in the editor, but since as of this writing there's no Find feature in the editor, it's easier to do it in Notepad. Highlight the entire page of code, rightclick on it, and click "copy". Then open a new page in Notepad, click in it, rightclick, and click "Paste"
If you know what section or element you are looking for in Notepad, you can go to it quickly by using the Edit > Find feature.
The sections of your site are arranged within containers called "divs". For instance, if the side menu is called "Side", it will begin with the tag <div id="side"> and end with </div> . So if you wanted to add something to the Side menu, you would place it between those two tags.
NOTE: Divs are often nested several inside each other. So make sure you have found and counted the divs, to make sure you're inside the correct </div>.
NOTE: The name "Side" is given as an example. There are at this writing, three groups of stock Highwire themes, and the newest group uses different names for the divs. To see how your site is constructed, open it in your browser and then open View > Page Source. This will show you the functioning html code, and you can see inside what divs each section is placed.
When you have made your changes in Notepad, click Edit > Select All. Then rightclick on the highlighted text and click "Copy".
Go back to the Template Editor. Highlight the entire page of code, then rightclick on the highlighted text, and click "Paste".
Now at the top, click "Preview in Draft Mode". This will let you see what your page would look like if published. If you are satisfied, click "Publish"
