How to add a link to a page

From Spiffy Stores Knowledge Base

This tutorial shows you how to use HTML to link to a page. If you need to create a link in your menu, please go to How to edit your Store Menus for instructions.

To add a link in the new editor, follow the instructions below.

  1. First get the web address of the page or file you want to link to. You can get this in most browsers by going to the page and copying the address of the page that is shown in the address bar of your browser. Make sure you copy it.
  2. Go to the page in your store's admin where you want to add the link and edit the text
  3. Highlight the text you want as the link and click the link icon in the toolbar
  4. In the popup, paste in your link
  5. Choose whether you want it to open in a new window or the current window
  6. Click save, and then save your page.




Adding Links Manually

As we have added an editor that allows you to click the link icon to add a link, most of the information below is no longer needed. If you do want to manually code a link however, you can do so in the source code view when editing your content.

  1. If you're not already logged in to your toolbox, log in and go to the "Pages & blogs" section.
  2. In your store's Toolbox, click on the page you want to edit, and then when the preview page opens, click the small edit link on the left.
  3. Click the source code view icon in the editor to edit the page's source code.
  4. Place the cursor where you want the link to be placed on the page.
  5. Type the following, inserting the address for the site you want to link to in place of "webpage.com":
    <a href="http://www.webpage.com">

    This tag indicates the location and name of the link. Be sure to close the tag by using the following tag...
    </a>

    Your link should look like this...
    <a href="http://www.webpage.com">Your link text here</a>


    If you want to make your link open in a new window, you should add the following code to your link...
    target="_blank"

    Your link should now look like this...
    <a href="http://www.webpage.com" target="_blank">Your link text here</a>

  6. Save the page. Now you'll be able to preview the page in your store and test the link you just created.
  7. Click the button in the top right that says "Preview this page". Your page should open up in a new tab, and you should see the link you've created there.
  8. Try clicking on the link. If it does not go to the page you want, verify the address is correct and edit your link to make sure you have created it properly.


How to add a link to a page you've created in your store

  1. If you're not already logged in to your toolbox, log in and go to the "Design & Assets -> Uploaded files" section.
  2. Go to the page you want to link to in your storefront. Copy the address of your page that you can see in the URL bar of your browser.
  3. In your store's Toolbox, go to the page you want to add the link to, and then when the preview page opens, click the small edit link on the left.
  4. Click the source code view icon in the editor to edit the page's source code.
  5. Click to place the cursor where you want the link to be placed on the page.
  6. Type the following, inserting the address of the page want to link to in place of "YOUR LINK HERE":
    <a href="YOUR LINK HERE">

    This tag indicates the location and name of the link. Be sure to close the tag by using the following tag...
    </a>

    Your link should look a bit like this... 
    <a href="http://www.yourlinkhere.com/pages/yourpage">Your link text here</a>


    If you want to make your link open in a new window, you should add the following code to your link...
    target="_blank"

    Your link should now look a bit like this...
    <a href="http://www.yourlinkhere.com/yourpage" target="_blank">Your link text here</a>

  7. Save the page. Now you'll be able to preview the page in your store and test the link you just created.
  8. Click the button in the top right that says "Preview this page". Your page should open up in a new tab, and you should see the link you've created there.
  9. Try clicking on the link. If it does not go to the page you wanted to link to, verify the address is correct and edit your link to make sure you have created it properly.

How to add a link to a file you've uploaded in your store

  1. If you're not already logged in to your toolbox, log in and go to the "Design & Assets -> Uploaded files" section.
  2. Upload the file you want to link to.
  3. In your store's Toolbox, go to the page you want to add the link to, and then when the preview page opens, click the small edit link on the left.
  4. Click the source code view icon in the editor to edit the page's source code.
  5. Place the cursor where you want the link to be placed on the page.
  6. Type the following, inserting the file name of the file you want to link to in place of "your_file_name_here.jpg":
    <a href="/files/your_file_name_here.jpg">

    This tag indicates the location and name of the link. Be sure to close the tag by using the following tag...
    </a>

    Your link should look like this... 
    <a href="/files/your_file_name_here.jpg">Your link text here</a>


    If you want to make your link open in a new window, you should add the following code to your link...
    target="_blank"

    Your link should now look like this...
    <a href="/files/your_file_name_here.jpg" target="_blank">Your link text here</a>

  7. Save the page. Now you'll be able to preview the page in your store and test the link you just created.
  8. Click the button in the top right that says "Preview this page". Your page should open up in a new tab, and you should see the link you've created there.
  9. Try clicking on the link. If it does not go to the file you wanted to link to, verify the file name is correct and edit your link to make sure you have created it properly.


How to add a link to an email address

  1. If you're not already logged in to your toolbox, log in and go to the "Pages & blogs" section.
  2. In your store's Toolbox, click on the page you want to edit, and then when the preview page opens, click the small edit link on the left.
  3. Click the source code view icon in the editor to edit the page's source code.
  4. Place the cursor where you want the link to be placed on the page.
  5. Type the following, inserting the email address you want to link to in place of both instances of "enquiries@email.com":
    <a href="mailto:enquiries@email.com">enquiries@email.com</a>
  6. Save the page. Now you'll be able to preview the page in your store and test the link you just created.
  7. Click the button in the top right that says "Preview this page". Your page should open up in a new tab, and you should see the link you've created there.
  8. Try clicking on the link. If it does not work properly, verify the address is correct and edit your link to make sure you have created it properly.


How to embed a PDF file... the right way!

An embedded PDF file displays embedded in the page you add it into. If you want to link to a PDF file, you should use the "how to link to a file" instructions above.

  1. If you're not already logged in to your toolbox, log in and go to the "Pages & blogs" section.
  2. In your store's Toolbox, click on the page you want to edit, and then when the preview page opens, click the small edit link on the left.
  3. Click the source code view icon in the editor to edit the page's source code.
  4. Place the cursor where you want the link to be placed on the page.
  5. Type the following, inserting the file name of the file you want to link to in place of "filename.pdf":

    <object data="/files/filename.pdf" type="application/pdf"><a href="/files/filename.pdf" target="_blank">click here to download the file</a></object>


  6. Save the page. Now you'll be able to preview the page in your store and test the change you just made.
  7. Click the button in the top right that says "Preview this page". Your page should open up in a new tab, and you should see the change you've just made.
  8. If the PDF file isn't displaying properly, verify your embed code to make sure you have created it properly. You might also want to verify the file name is correct by going to your uploaded files, and clicking on the file. A preview should pop up, with the file name displayed in italics.
Retrieved from "http://www.spiffystores.com.au/kb/index.php?title=How_to_add_a_link_to_a_page&oldid=9589"