What is social sharing/co-buying?

Difficulty Level: General Information     Tools Needed: Control Panel

Social sharing is a great way for your customers to share their purchases on your store on the social media channels of Facebook, Twitter, and Google+. This is a relatively new feature of e-commerce that encourages co-buying, where users share their purchases and influence their friends and followers to also purchase that same item. A recent study has shown that co-buyers can increase a brand's awareness by 93% across their audience, and on average, 49% of those co-buyers will purchase something they've seen from a friend. (Source)

BigCommerce makes it easy for your customers to socially share their purchases from your store and link back to it so that you hopefully get more purchases.

How Does it Work?

Whenever a customer successfully completes an order in your store, an invitation will display for them to share their purchase from your store.

2012-05-30_1529.png

If there are multiple products in the order, the customer will be able to choose which product to share.

2012-05-30_1536.png

Then, the customer will be taken to their chosen social media platform, and they'll be able to change up the exact text of their post/tweet.

 

How Do I Enable It?

Enabling social sharing in your store is as easy as copying and pasting in your template files.

1.) First, login to your store's control panel.
2.) Click on Design.

2012-05-30_1429.png

3.) Click on the Template Files tab.

2012-05-30_1430.png

4.) Scroll down to order.html and click Edit on it.

2012-05-30_1431.png

5.) Now, copy the variables from the box below, and paste them like you see in the picture.

%%Panel.ShareProductById%%
%%Panel.SimilarMultiProductsByCustomerViews%%

2012-05-30_1441.png

6.) Click Save.

2012-05-30_1525.png

7.) Then, in the left list under Other Template Files, click on styles.css.

2012-06-04_1031.png

8.) Paste the following code at the end of this file, like you see in the picture. (The line numbers for your template may differ from those shown.)

/* Begin: Social sharing button */

.sharebutton {
    border: 1px solid #ddd;
    cursor: pointer;
    padding: 3px 10px 5px 10px;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7', endColorstr='#749ae8');

    -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#F7F7F7,endColorStr=#DCDBDB)';
    background: -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#DCDBDB));
    background: -moz-linear-gradient(top,  #F7F7F7, #DCDBDB);
}
.Content .sharebutton a, .Content .sharebutton a:hover{
    font-weight: bold;

    text-decoration: none;
    text-transform: uppercase;
    color: black;
    font-size: 11px;
}

/* End: Social sharing button */

2012-06-04_1032.png

9.) Click Save.

2012-01-27_0952.png

 

Now, when your customers checkout in your store, they will get the option to socially share their purchase.

Ninja'd by Erika Jarvi

Attachments

No attachments were found.

9 votes 77% thumbs up 22% thumbs down

Did this article resolve the issue?

Was this article helpful?

Related Articles

No related articles were found.

Continue
Start your free trial

Start your free, no-risk, 15 day trial

Get your own store up and running in no time. No credit card required.

You can always change your store name later