Aarfie custom web development and maintenance services are discontinued – read more

Looking for our new Big Cartel themes – visit Aarcade

 
 

AARFIE SUPPORT

How do I add custom links to my Big Cartel theme menus?

If you purchased or upgraded your Big Cartel theme after 29th November 2011, please refer to Aarcade Support instead of the following article.

close message

Refer to support article How do I add a link from my Big Cartel shop back to my web site or blog? for the basic addition of a Back to Site link.

Navigate to the Design > Pages section of your shop admin and click the page title Layout.

Layout Page

Accessing the Layout page code

On the following page, scroll through the text box content until you find the custom navigations links area that you wish to add a link to. These areas will be marked with the tags as follows.

Page Navigation

{{ START CUSTOM PAGE NAVIGATION LINKS }}
<!-- <li><span>|</span><a href="[LINKURL]"><span>[LINKTEXT]</span></a></li> -->

{{ END CUSTOM PAGE NAVIGATION LINKS  }}

Category Navigation

{{ START CUSTOM CATEGORY NAVIGATION LINKS }}
<!-- <li><a href="[LINKURL]"><span>[LINKTEXT]</span></a></li> -->

{{ END CUSTOM CATEGORY NAVIGATION LINKS  }}

For example, locating the custom page navigation links area:

Big Cartel Custom Navigation Links

Locating the Custom Page Navigation Links area in the Layout page code

Adding A Custom Link

To add a new link, copy the sample code provided within the section starting with <li and ending with li>. Be careful not to copy the complete sample code – you must not include the starting <!– or the ending –>, for example:

{{ START CUSTOM PAGE NAVIGATION LINKS }}
<!-- <li><span>|</span><a href="[LINKURL]"><span>[LINKTEXT]</span></a></li> -->

{{ END CUSTOM PAGE NAVIGATION LINKS  }}

and paste the copied code on a new line below the sample code:

{{ START CUSTOM PAGE NAVIGATION LINKS }}
<!-- <li><span>|</span><a href="[LINKURL]"><span>[LINKTEXT]</span></a></li> -->
<li><span>|</span><a href="[LINKURL]"><span>[LINKTEXT]</span></a></li>

{{ END CUSTOM PAGE NAVIGATION LINKS  }}

Important: Do not copy your code from the example above. You must copy the equivalent sample code from your own theme’s Layout page, as this sample code will differ depending upon your theme.

Never alter your theme’s sample code.

In the line of code you just pasted, replace [LINKURL] with your external URL (e.g. http://facebook.com/aarfie – don’t forget the http part of your URL) and replace [LINKTEXT] with the text for your link (e.g. Facebook). For example:

{{ START CUSTOM PAGE NAVIGATION LINKS }}
<!-- <li><span>|</span><a href="[LINKURL]"><span>[LINKTEXT]</span></a></li> -->
<li><span>|</span><a href="http://facebook.com/aarfie"><span>Facebook</span></a></li>

{{ END CUSTOM PAGE NAVIGATION LINKS  }}

Repeat the copy, paste and edit steps as required.

Click the Save button when you have finished adding your custom navigation links.

Adding Links To Big Cartel Navigation

Adding custom external links to your Big Cartel theme page navigation

Adding Custom Links to the Start of Menus

Following the instructions above, your custom links will be added to the end of your Big Cartel page and/or category navigation. To add custom links to the start of these menus, select all of the applicable custom navigations links area, including the start and end tags. For example:

Selecting Custom Navigation Area

Copy the custom navigations links area to your clipboard by clicking Copy in your browser’s Edit main menu or using a keyboard shortcut (e.g. command + C for Apple or control + C for Windows).

Scroll slowly UPWARDS through the Layout code, and locate the first occurrence of the <ul> HTML tag. For example:

Locate Opening List Tag

The accompanying code may look different, depending upon your theme. Some <ul> tags may even include a class or other attributes. For example:

Locate Opening List Tag With Class

Once you have located the first occurrence of the <ul> tag, look for the text

{% assign is_first = 'yes' %}

AFTER the <ul> tag. Then create a new line under this text and paste your clipboard content by clicking Paste in your browser’s Edit main menu or using a keyboard shortcut (e.g. command + V for Apple or control + V for Windows). For example:

Paste Custom Navigation Area

Finally change the text

{% assign is_first = 'yes' %}

to

{% assign is_first = 'no' %}

For example:

Assign is_first Equals No

You can now use this copied custom navigation area to add custom links to the start of your navigation area, in the same way as described in the previous sections of this article.

Navigation with a Separator Character

If your navigation area has a separator character, for example:

Link One / Link Two / Link Three

Then you will need to manually remove this character from the first (and only the first) custom link you create in your newly copied custom navigation area. For example:

Adding Custom Links Before

may result in:

/ Visit Aarfie / Jon's Place

In this case you will need to locate and remove the separator in the first link, for example:

<li>{{ top_nav_sep }}<a href="http://aarfiesx.com"><span>Visit Aarfie</span></a></li>

for some themes this will appear differently, for example:

<li><span class="bul">/</span><a href="http://aarfiesx.com"><span>Visit Aarfie</span></a></li>

With the first separator removed, our example becomes:

<li><a href="http://aarfiesx.com"><span>Visit Aarfie</span></a></li>

which, in the code, will appear like:

Custom Links Added After

Note that the second custom link (and any following custom link) should still have the separator code intact.

Last Modified: 29th June, 2011

Other ‘Big Cartel’ Articles...

Big Cartel support articles generally relate to Aarfie-developed Big Cartel themes purchased from the shop or created for a custom project.