Big Cartel Theme Support

How do I edit or move my social icon links?

How do I edit or move my social icon links?

Enter / update your social network URLs

Your Aarcade admin license and theme settings are used to set which social icon links are displayed in your shop, and their colour and shape. To update these settings for your installed theme:

  1. Go to the Aarcade Admin > Licenses in your Aarcade admin area, and click the edit link for relevant license.
  2. In the Social Network Links section, enter the URL for all of the social networks you wish to display in your shop. Double check each URL is complete and loads your social network correctly when entered into a web browser address field.
  3. Save / update the changes you have made to your license.
  4. Go to the Aarcade Admin > Install in your Aarcade admin area, and click the edit / install link for the theme you have installed.
  5. In the section Social Network Options, make sure the Display social links option is checked.
  6. Finish updating your options and loading them to your Big Cartel shop as detailed in the support article How do I edit my theme's styles and options? (IMPORTANT: read all of the article to update correctly). Note that section Custom style coding (CSS) of that article explains how to maintain any custom CSS you have added.

The instructions in the following sections will only have an effect if you have added your social network links to your license, and enabled social network display, as detailed above.

To show / hide the social links built into your Aarcade theme, navigate to your custom style coding area — see Where do I add custom style code? — and add the following CSS as required.

Don’t forget to click the Done and Save links to apply your changes.

To hide the social icons in the header, add the following to your custom style coding area:

/* Hide header social icon links */
.nav-group .social-nav,
.nav-block .social-nav {
    display: none;
}

To reveal the social icon links in the header, delete the above style group (or any other style group that has a label indicating it is for hiding the icons) from your custom style coding area. If you do not see any style group, your theme may have the styles built in. In which case, add the following to your custom style coding area:

/* Show header social icon links */
.nav-group .social-nav,
.nav-block .social-nav {
    display: block;
}

Remember: If this custom CSS has no effect, and you can not get your social network links to appear, then you have not properly applied the six steps at the beginning of this article.

Return to these steps and apply each one carefully. Note that users often fail to complete step 6 correctly, so be sure to follow the referenced article from start to finish.

To show the social icons in the footer, add the following to your custom style coding area:

/* Show footer social icon links */
#footer .social-nav {
    display: block;
}

To hide the social icon links in the footer, delete the above style group (or any other style group that has a label indicating it is for showing the icons) from your custom style coding area. If you do not see any style group, your theme may have the styles built in. In which case, add the following to your custom style coding area:

/* Hide footer social icon links */
#footer .social-nav {
    display: none;
}

Displaying the social icons in other areas in your shop?

You can display your social icon links in your custom pages or anywhere in your shop — using the insert content method — by using the [[menu name="social"]] shortcode detailed in the support article Shortcodes - Navigation menus.

Setting the size of the social icons

The social icon links are created with a font. You can therefore increase or decrease the size of the icons by setting the font size. To do this, navigate to your custom style coding area — see Where do I add custom style code? — and add/edit the following CSS as required.

Setting the size of the header social icons.

/* Set header social icon size */
.nav-group .nav-menu.social-menu,
.nav-group .nav-menu.share-menu,
.nav-block .nav-menu.social-menu,
.nav-block .nav-menu.share-menu {
    font-size: 140%;
}

Note that we used a percentage setting in the above example, so that the icons will change size proportionally if we later adjust the size of the font of the parent menu area, e.g. changing the page menu font size. However, using a pixel value (see the following footer example below) is equally valid and will fix the size so that it is not affected by parent font size changes.

Setting the size of the footer social icons.

/* Set footer social icon size */
#footer .nav-menu.social-menu,
#footer .nav-menu.share-menu {
    font-size: 28px;
}

Setting the size of social icons displayed via shortcode.

/* Set footer social icon size */
.shortcode .nav-menu.social-menu,
.shortcode .nav-menu.share-menu {
    font-size: 200%;
}

Advanced customisation of social icons

If you prefer to use your own custom images for your social icons, you can do so via custom CSS. The first step is to hide the default icons and set the size of your replacement icon images, by adding the following to your custom style coding area — see Where do I add custom style code? — and editing the values to suit your preference:

/* Hide default icons on social, sharing
** and mobile social menus */
.nav-menu.social-menu i.glyph,
.nav-menu.share-menu i.glyph,
.nav-mobile-menu.social-mobile-menu i.glyph {
	display: none;
}
/* Set size and background properties for custom icons
** on social, sharing and mobile social menus */
.nav-menu.social-menu .link-text,
.nav-menu.share-menu .link-text,
.nav-mobile-menu.social-mobile-menu .link-text {
	position: static;
	display: block;
	width: 20px;
	height: 20px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

In the above example we have set our social icon size to 20px wide by 20px high. The next step is to add a line of custom CSS, after the above, for each of our custom social icons. For example:

/* Custom Facebook icon image */
.nav-menu.social-menu .facebook .link-text,
.nav-menu.share-menu .facebook .link-text,
.nav-mobile-menu.social-mobile-menu .facebook .link-text {
	background-image: url("http://mydropbox.com/my-facebook-icon.jpg");
}
/* Custom Twitter icon image */
.nav-menu.social-menu .twitter .link-text,
.nav-menu.share-menu .twitter .link-text,
.nav-mobile-menu.social-mobile-menu .twitter .link-text {
	background-image: url("http://mydropbox.com/my-twitter-icon.jpg");
}
/* Custom Instagram icon image */
.nav-menu.social-menu .instagram .link-text,
.nav-menu.share-menu .instagram .link-text,
.nav-mobile-menu.social-mobile-menu .instagram .link-text {
	background-image: url("http://mydropbox.com/my-instagram-icon.jpg");
}

Use your browser developer tools - refer to the web browser tutorial - to inspect each icon and find the correct class. The classes .facebook, .twitter and .instagram have been used in the above example. Additional classes include .pinterest, .tumblr, .google-plus, .google, .newsletter, .email, .etsy, .flickr, .vimeo, .youtube, .rss and .addthis.

The public URLs used in the above example - e.g. http://mydropbox.com/my-facebook-icon.jpg - must be replaced with the URL to your own custom images. For more information on uploading images and obtaining a public URL, refer to How do I upload images or files for my Big Cartel page content?.

Note that advanced customisation is not supported by Aarcade. For more information, refer to How do I customise my theme beyond the standard settings?

AarcadeHow do I edit or move my social icon links?