There are multiple kinds of links on your storefront. If you're interested in changing the category links in your navigation menu, see our the "Managing Categories" section of our article on categories.

If you're interested in changing links in your main homepage section, see "Changing Your Main Homepage Image".

If you're interested in changing links to article pages you added to your navigation menu, see the "Displaying Articles" section of our article on site content and text articles.

For changing footer links in premium themes, you'll need to get into the raw HTML code to change where clickable links point to. Luckily, in most cases you'll find that this process isn't too complex.

Identifying Link Elements

The HTML element that specifies a clickable link generally looks like this: 

<a href="#">

...where the # sign is a placeholder, to be replaced by the actual web address to which you'll be linking. This tag will be referred to here as an A Tag, or as an HREF. For a tutorial introduction to HREFs, click here.

Moving on, let's look at a simple homepage example. Below you'll find a selection of code from the homepage of one of our premium themes. As you look over this, don't worry about deciphering all the individual lines of code -- just skim through and try to find all the HREF tags.

<div id="homepage">
<a href="#" class="left"><img src="/v/vspfiles/templates/Essence/images/homepage/mainLeft.jpg" alt="homepage promo"/></a>
<a href="#" class="right"><img src="/v/vspfiles/templates/Essence/images/homepage/main.jpg" alt="homepage promo"/></a>
<div class="clear">
</div>
</div>
<div id="homepagePromos">
<a href="#"><img src="/v/vspfiles/templates/Essence/images/homepage/p1.jpg" alt="Our Newest Fragrance. Click to Buy."/></a>
<a href="#"><img src="/v/vspfiles/templates/Essence/images/homepage/p2.jpg" alt="Free Shipping on orders over $50. Click to learn more."/></a>
<a href="#" class="end"><img src="/v/vspfiles/templates/Essence/images/homepage/p3.jpg" alt="Luxury Jewelry. Click to Shop Now."/></a>
<div class="clear">

If you counted correctly, you should have seen a total of five HREFs.

This is an important concept to pick up on. Generally HREFs will show up in a one-to-one correspondence with the items on your homepage. That means you don't need to know HTML to make these changes -- you just need to be able to find the HREF tags and sort out what order they are applied in. The ordering will generally progress from left to right, and then from top to bottom, just like the words you're reading.

Important

Be sure to copy out the stock homepage code from your theme into a TXT document, and save it on your computer as a backup. This way, you'll be able to restore your changes in the event that something goes wrong.

Once you've identified the HREFs and their ordering, changing out the links is fairly easy. Let's say you want to set up a link on your homepage for your About Us page. The address within your store for that page would look like this:

http://www.yourstore.com/aboutus.asp

Thus, setting up an HREF to link there would look like this:

<a href="http://www.yourstore.com/aboutus.asp">

However, there's one trick that will make this even simpler. In the Volusion platform you can use relative links, which only need to include the suffix part of the address, aka the part after the .com. 

Let's see what that looks like. Instead of: 

<a href="http://www.yourstore.com/aboutus.asp">

...you can just do this: 

<a href="/aboutus.asp">

Easy, huh?

Tutorial

Let's do one more example, from start to finish. For this example we'll use a theme which comes with just one main homepage promo. We're going to edit the promo so that it links to our Pain Relief category (just an example). To find the URL for this category, we'll go to the storefront and navigate to the Pain Relief category page. Once there, we can observe that this URL shows up in the address bar:

http://www.yourstore.com/SearchResults.asp?Cat=1814

We'll save that for a bit later. For now, let's look at the homepage code, by going to the homepage of the store, mousing-over the central area of the page, and hitting the blue 'Edit' button that shows up on the hover. The code will show like so:

<style type="text/css">
#content_area {padding: 0 9px; width: 960px;}
td#left_nav {display:none !important;}
</style>
<a href="#">
<img src="v/vspfiles/templates/launchpad_v2/images/homepage/main_graphic.jpg" width="960" height="326" alt="Meet Our Reformulated Nutritional Family." /></a>
<img src="v/vspfiles/templates/launchpad_v2/images/homepage/FeaturedProducts.gif" width="215" height="43" alt="Featured Products" />

There's just one HREF there, which is what we should expect! So all we need to do is take the suffix part from the category URL above, and paste it in place of the # sign. The new code should look like this:

<style type="text/css">
#content_area {padding: 0 9px; width: 960px;}
td#left_nav {display:none !important;}
</style>
<a href="/SearchResults.asp?Cat=1814">
<img src="v/vspfiles/templates/launchpad_v2/images/homepage/main_graphic.jpg" width="960" height="326" alt="Meet Our Reformulated Nutritional Family." /></a>
<img src="v/vspfiles/templates/launchpad_v2/images/homepage/FeaturedProducts.gif" width="215" height="43" alt="Featured Products" />

That's it! Just one change, and you're done. Save changes, and the link in the homepage should now direct to the Pain Relief category.

Of course, this was just an example, with an imaginary store. With your own store, you may need to do more work to get multiple category URLs, and may need to play with the ordering of the HREFs a little bit until you get it just right. But, the general procedure is there.

Did this answer your question?