Big Cartel Theme Support

How do I edit my product page sharing links?

How do I edit my product page sharing links?

Using the built in sharing options

In your Aarcade admin theme settings, the sections Product Page Options and Social Network Options are used to set which sharing tools are displayed and their colour and shape respectively. To update these settings for your installed theme, see How do I edit my theme's styles and options?

Adding your own sharing options

To add custom sharing options we use the x-ic-after-product-sharing insert content method detailed in Insert Content - Product Page as follows:

1. Create a page in your Customize design > Pages Big Cartel admin area with the exact title:

x-ic-after-product-sharing

2. Important: Switch to HTML edit mode per How do I switch to HTML edit mode?

3. Get the social sharing code from the relevant social network support and paste it into the content edit area.

4. Finally we click the Done button and then click the Save link to apply our changes.

The text for your social sharing links can be easily set via custom CSS. The default CSS is as follows:

/* Text for product page sharing tools */
.share-link.facebook.like i:after {
	content: "Like";
}
.share-link.facebook.share i:after {
	content: "Share";
}
.share-link.twitter i:after {
	content: "Tweet";
}
.share-link.pinterest i:after {
	content: "Pin it";
}
.share-link.tumblr i:after {
	content: "Tumblr";
}
.share-link.google i:after {
	content: "1";
}
.share-link.email i:after {
	content: "Email";
}
.share-link.addthis i:after {
	content: "Share";
}

To change the default text, navigate to your custom style coding area - see Where do I add custom style code? - paste in the above CSS code and then edit it to your preference.

Be careful to only edit the text between the double quotes in this CSS.

As always, click the Done and then Save button to apply our changes when finished.

Setting the size of the sharing icons

The product sharing 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.

/* Set product sharing tool icon size */
.single .details-wrap > .share-nav .nav-menu {
	font-size: 24px;
}

Setting the colour of the sharing icons

The colour of the sharing icons, as well as your social icon links, is defined by the Social link icon text colour and Social link icon background colour settings in the Social Network Options section of your theme settings - refer to How do I edit or move my social icon links?.

In some cases, you may wish to apply different colours to your sharing icons. In this case, you can navigate to your custom style coding area - see Where do I add custom style code? - paste in the following CSS code, and then edit it to your preference.

/* Set product sharing tool icon colour */
.single .details-wrap > .share-nav .social-link i,
.single .details-wrap > .share-nav .share-link i {
	background-color: #ffaaaa;
	color: #cc0000;
}

You can use any valid colour value - see CSS-colour tutorial - for the background-color and color properties.

Click the Done and Save buttons to apply your changes.

AarcadeHow do I edit my product page sharing links?