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.

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.