[TomatoCart] How to Integrate Social Media Buttons into Your Product Info Page

The significant way to boost your online sales is to integrate social media buttons into your product info page so that your customers could share the product to their friends efficiently. It means more and more your potential clients could see your good products on social platform. Once they arrive at your store with just one click, you may get their orders.

In this article, I will teach you how to integrate the ShareThis social widgets into the default glass gray template. If you are using the bootstrap template, don’t worry about it. I will also write an article for it.

ShareThis is the company for those wanting to make the world more connected, trusted and valuable through sharing. Firstly, you have to register an account by visiting http://www.sharethis.com

sharethis_1

Please click the website to go to select a style.

sharethis_style

I choose the fourth style and click it to go to customise tab.

sharethis_code

Please copy the code into your glass_gray template as follows:

Step 1: Go to templates > glass_gray > content > products > info.php.

— Find following code snippet:

<h1><?php echo $osC_Template->getPageTitle(); ?></h1>

— Add following code snippet before it:

<ul class="shareBtns clearfix">
    <li><span class='st_facebook_hcount' displayText='Facebook'></span></li>
    <li><span class='st_twitter_hcount' displayText='Tweet'></span></li>
    <li><span class='st_pinterest_hcount' displayText='Pinterest'></span></li>
    <li><span class='st_linkedin_hcount' displayText='LinkedIn'></span></li>
</ul>

— Add the following code at the bottom of file:

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "cdffec1e-92d9-4932-8827-98021eae4c31", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

Note: you should use the code copied from share this. The above code is mine got from share this platform.

Step 2. Go to templates > glass_gray > stylesheet.css.

— Add following code at the bottom of it:

.shareBtns li {float:left;margin: 0 5px;}
.shareBtns {margin: 10px 0;}

Note: if you are using the all.min.css rather than stylesheet.css to enhance the stores perform, just add above code into all.min.css.

That’s. After applying above changes, the social share buttons will be shown in your product info page.

glass_product

It will be useful to promote your products on social platforms. Please try it by yourself. If you can’t integrate it into store by yourself, don’t hesitate to contact us. We provide free technical support for Arvixe users.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

Your email address will not be published. Required fields are marked *


7 − = 1

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>