Please note that custom designs and premium themes may contain different links and may use slightly different code from what this article describes. If you aren't comfortable with HTML, or have any questions about your custom or premium theme's capabilities, please contact our Design team.
- Updating the Footer Content With the HTML Editor
- Editing the HTML Template
- Hiding a Footer Link
- Removing a Footer Link
- Editing a Footer Link Text
- Editing a Footer Link Address
- Adding a New Footer Link
- Footers in Premium and Designer Themes
- Further Information
Updating Footer Content With the HTML Editor
You can use the Easy Editor to update any actual page content that corresponds to the links in your store's footer as follows:
- Click the footer link of the article you want to edit, for example, "About Us" (sometimes referred to as "Company Info").
- Move the cursor over the body of the article; a blue outline and an Edit button should appear. If it doesn’t, hover over the Edit tab in the Volusion Toolbar at the top of the screen, then set the Storefront Editor switch to On.
- Click Edit to modify the article content.
- Enter your new content using the tools in your Easy Editor toolbar, then click Save.
- If the page appears to have a Title (bold) or Caption (italics) that you can't modify in the Easy Editor, you can edit that text from your Admin Area.
- Go to Design > Site Content, then look for the article you want to edit.
- Click the article's ID number on the left to access the full article details.
- Edit the Article Title and Article Caption fields. If you don't want to use these fields, you can leave them blank.
- Click Save.
To learn more about article management, see "Creating an Article on Your Website".
Editing the HTML Template
To customize your storefront footer, you'll need to modify your theme's html. Remember to archive your theme before making any changes to it.
- Go to Design > File Editor in your Admin Area.
- Select your current theme from the Shortcuts menu on the right, or select a different theme from the drop-down menu at the top of the page.
- Scroll down the edit window to the section containing the footer (<div id="footer">).
Hiding a Footer Link
If there are links in the footer that you don't want to be visible to customers, you can temporarily hide them from view. For example, if you are just opening your store and have not yet decided if you want an affiliate program, you can hide the Become an Affiliate link from view by putting <!-- at the beginning and --> at the end of a string of text.
- Locate the Become an Affiliate link in the code.
- Wrap the selection with special tags <!-- and -->.
- Click Save at the bottom of the page.
The line of code should look like this:
<!-- <li><a href="Config_FullStoreURLaffiliate_info.asp">Become an Affiliate</a></li> -->
That text is now treated as a comment rather than a piece of code. The Become an Affiliate no longer displays on your storefront.
To restore the Become an Affiliate link, remove the <!-- and --> tags from the HTML code and click Save.
Removing a Footer Link
If you are certain that you will not want to use one of the default links you can remove it as follows:
- Select the text containing the link you wish to remove, including the surrounding <li> ... </li> tags.
- Delete it.
- Click Save.
Editing Footer Link Text
To change the text in a link (for example, to change "About Us" to "About Our Company"), follow these steps:
- Locate the text you want to edit.
- Change "About Us" to "About Our Company". Be careful not to delete any of the code around the text.
- Click Save.
The link will still point to the same article, but the text displayed on the storefront will be updated.
Editing a Footer Link Address
There's a similar process for changing the article a link points to. Suppose you want to display a different "About Our Company" article during the holiday season.
- Find the URL to change. The URL is the text between the quotation marks following "<a href=".
- Replace that URL with the URL for the new page.
- Click Save.
When you return to your storefront and click on the link, you should now be directed to the new article.
Contact Us Link
The Contact Us footer link is usually set up in a slightly different way from other footer links. When clicked, this link is programmed to open a new email message in the default mail client on the visitor's device, pre-addressed to the inbox you specified under Settings > Company > Email in your Admin Area.
For more information, see "How to Edit the Contact Us Link in Your Theme Header or Footer".
Editing the Link for a Social Media Icon
Depending on the theme you've selected, you may also see clickable social media icons in the footer. By default, these links direct to Volusion's social media pages, and display the text "Follow (Your Company's Name) on (Social Network)" upon hover.
To make sure your customers can reach you on any social media platforms you use, you'll want to change the link for each social media icon. To update your Facebook URL, for example, do the following:
- Locate the section of your footer that contains the social media links. This section is usually titled <div id="social">, but you can also find the area by holding down CTRL + F on your keyboard and searching for the word "Facebook".
- Find the line with the current Facebook URL, which is located between the quotation marks following "<a href=".
- Replace that URL with the URL for your own company's Facebook page.
- Click Save.
When you return to your storefront and click on the Facebook icon, you should be directed to your company's Facebook page.
Adding a New Footer Link
You can also add a new link to the footer. For example, you might want to link to an article containing store policies and terms. In this example, the ID of the new article is 143.
- Locate where you want to insert the link and press Enter on your keyboard to insert a blank line.
- Type the code for a new link or copy an existing line and change the page name and URL.
- Click Save.
For more information on adding article pages, see "Creating an Article on Your Website".
Footers in Premium and Designer Themes
If you're editing a premium or custom theme, you may find that the layout of the footer is different. In many cases, however, the links will still have the same basic format:
Where <li> and </li> tell the browser how to display the link, "url" is the address of the article to be displayed and text is the clickable word or phrase in the footer.
If you're using a theme created by a third-party developer, contact them for assistance.
The footer also contains copyright information that links to your Terms article. You should leave this link as it is, but feel free to update the information within the Terms page and other informational pages.
If you would like assistance with the design of the footer, please check out our design services offerings.