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 edit the social links in my Big Cartel shop?

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

Aarfie themes include primary custom options for displaying icons for your social links. These primary custom options will typically appear as follows:

{{ NETWORK AND SHARING }}
{% assign your_facebook_url = '' %}
{% assign your_twitter_url = '' %}
{% assign alternative_news_feed_url = '' %}
{% assign display_footer_facebook_like = 'no' %}
{% assign shop_facebook_like_links_to_your_facebook_url = 'no' %}

By reading and understanding the support article How do I use the Custom Options for my Big Cartel theme? you will be able to easily locate these primary custom options and successfully enter your preferred settings. For example:

{{ NETWORK AND SHARING }}
{% assign your_facebook_url = 'http://facebook.com/my-facebook-url' %}
{% assign your_twitter_url = 'http://twitter.com/my-twitter-url' %}
{% assign alternative_news_feed_url = '' %}
{% assign display_footer_facebook_like = 'yes' %}
{% assign shop_facebook_like_links_to_your_facebook_url = 'yes' %}

These settings should be sufficient for most purposes, however you can use the following instructions to further edit your social icon links if you desire.

Grayscale Icons

To use grayscale icons for your social links, navigate to the Design > Pages section of your shop admin and click the page titleĀ Layout.

Accessing the Layout page code

Accessing the Layout page code

On the following page, scroll through the text box content until you find the opening <div class="aarfie_social_icons small"> tag. If necessary, use your web browser’s find text function, typically located in your Edit > Find browser menu, and search for “aarfie_social_icons“.

<div class="aarfie_social_icons small">

Once you have located the above tag, add the class “black” as follows (ensure that there is a space either side):

<div class="aarfie_social_icons black small">

Click the Save button once you have finished editing your Layout page code.

Large Icons

Locate the <div class="aarfie_social_icons small"> tag as detailed in the previous section of this article,

<div class="aarfie_social_icons small">

and remove the “small” class as follows:

<div class="aarfie_social_icons">

Click the Save button once you have finished editing your Layout page code.

Extra Icons

To add extra social icons, locate the <div class="aarfie_social_icons small"> tag as detailed previously in this article. Immediately following this tag you will find each new line of code starts with an “if” code, for example:

{% if display_footer_facebook_like == 'yes' %}

Create a new line just ABOVE one of these “if” codes, depending upon where you want your extra icons to be displayed,

create new line here
{% if display_footer_facebook_like == 'yes' %}

and insert any of the following (use a new line for each one you add):

<a class="newsletterx" href="[Your Newsletter URL]"><span>Newsletter</span></a>

<a class="tumblrx" href="[Your Tumblr URL]"><span>Tumblr</span></a>

<a class="flickrx" href="[Your Flickr URL]"><span>Flickr</span></a>

<a class="youtubex" href="[Your YouTube URL]"><span>YouTube</span></a>

<a class="vimeox" href="[Your Vimeo URL]"><span>Vimeo</span></a>

<a class="skypex" href="skype:[Your Skype Name]?call"><span>Skype</span></a>

Be sure to replace the placeholder code with your own details, for example:

<a class="tumblrx" href="[Your Tumblr URL]"><span>Tumblr</span></a>

should become:

<a class="tumblrx" href="http://myblog.tumblr.com/"><span>Tumblr</span></a>

Click the Save button once you have finished editing your Layout page code.

Add Icons to your Page or Category Navigation

You can add your social icon links to the end of your Page or Category Navigation by copying all of the following code,

<li class="aarfie_social_icons custom small">
	{% if your_facebook_url contains 'http' %}<a href="{{ your_facebook_url }}" class="facebookx" target="_blank"><span>Facebook</span></a>{% endif %}
	{% if your_twitter_url contains 'http' %}<a href="{{ your_twitter_url }}" class="twitterx" target="_blank"><span>Twitter</span></a>{% endif %}
	{% if theme.show_products_feed and alternative_news_feed_url contains 'http' %}<a href="{{ alternative_news_feed_url }}" class="rssx" target="_blank"><span>RSS Feed</span></a>{% elsif theme.show_products_feed %}<a href="/products.rss" class="rssx" target="_blank"><span>Product RSS Feed</span></a>{% endif %}
	{% if display_footer_facebook_like == 'yes' %}{% if shop_facebook_like_links_to_your_facebook_url == 'yes' %}{% assign site_wide_like_url = your_facebook_url %}{% else %}{% assign site_wide_like_url = store.url %}{% endif %}<span class="facebooklike"><iframe src="http://www.facebook.com/plugins/like.php?href={{ site_wide_like_url }}&layout=button_count&show_faces=true&width=90&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe></span>{% endif %}		
</li>

and pasting it into either your Custom Page Navigation Links or Custom Category Navigation Links area. Refer to the support article How do I add custom links to my Big Cartel theme menus? to locate these areas.

You can edit the pasted code in the same way as described in the previous sections of this article.

Click the Save button once you have finished editing your Layout page code.

You may also need to fine tune the position of the social icons in your Navigation links. You can achieve this by pasting the following code in your custom style coding area:

.aarfie_social_icons.custom,
#top_slim_link li.aarfie_social_icons.custom,
#shop_menu_top li.aarfie_social_icons.custom,
.aarfie_social_icons.custom.small,
#top_slim_link li.aarfie_social_icons.custom.small,
#shop_menu_top li.aarfie_social_icons.custom.small {
	top: 5px;
	left: 5px;
	}

and adjusting the number values (negative values are allowed) as required to achieve the position you desire.

Click the Save button once you have finished editing your Style code.

Last Modified: 6th September, 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.