Adding a custom link to your shop's navigation

The navigation bar (your shop's main menu) helps shoppers browse your shop and your collections.

If you'd like to add a custom tab with a link to an internal or external page or site in your navigation bar which is not a product category, just follow this guide! 

If you are simply looking to add a product category though, please have a look at this guide instead.

P.S. We will be working in the Södermalm theme, but it will be a similar process in all our themes.

1. Start by going to Settings > Store Design in your dashboard.

newmenu_storedesign_wide.png

2. Click on the </>-icon to edit your shop's HTML and CSS. 

step2.png

3. Find the navigation section of your code. Look for the tag <nav id="main_navigation"> or <nav class="main_navigation">.

A few themes (such as Highline) might not use this nav id or class. Go straight to the following:

Locate the closing tag for the product category navigation, which looks like: {{/navigation}}. You'll want to place the code for your custom tab after this tag, if you want it to be displayed after your product categories.

step3.png

4. Find the spot where you wish to place your code. Note that the order in which you place the sections in your code for each new tab will then be reflected in your shop's navigation bar.

The entire navigation bar is constructed as a HTML list, contained between the <ul> </ul> tags.

Find these <ul> </ul> tags and create a new line under any existing </li> closing tab. To create a new tab in your navigation bar, add this block: 

<li class="column">

</li>

step4.png

5. Fill this block with an <a> tag  to create a link. You can link to both external pages or internal pages. First, let's link to a custom page within your Tictail shop.

<a href="{{store_url}}/mycustompage">

     My Custom Page

</a>

Remember to modify the tag to reflect the name of the custom page you've created (if you have not yet created a custom page to link to, you can find a link on how to do it at the end of this article).

step5.png

6. To add the link to an external site, such as your portfolio, a how-to guide or perhaps your Instagram account, you just need to create another <li> block below it with an <a> tag linking to an external site. We also need to set the target attribute to "_blank" which opens the link in a new tab instead of the same window.

To link to an external site, just copy and paste this block in your code: 

<a href="https://instagram.com/tictail/" target="_blank">

Tictail 

</a>

Make sure you replace the URL with the one you want to link to!

step6.png

7. And the end result? You'll have new tabs in your shop's navigation bar. 

step7.png

Awesome, right? If you click Tictail a new tab will open up and load Tictail's website and if you click My Custom Page your custom page will be loaded. 

If you want to create a custom page to link to in your Tictail shop simply follow the steps in this guide

Have more questions? Submit a request