Knowledgebase: SocialCommerce
How can I add the "Share Your Purchase - Facebook" function to my store?

If your store is integrated with 3dcart's Facebook Connect add-on, you can also utilize a "Share Your Purchase" function on your store.

This function will create a simple ajax pop up window that will encourage your shoppers to share news of their purchase with both their Facebook friends and Twitter followers upon completion of a purchase. This presents yet another way in which you can use Social Media channels to drive business to your store!

Note
As mentioned, you will need to have 3dcart's Facebook Connect add-on installed in order to use the "Share your Purchase" feature. If you do not currently have 3dcart's Facebook Connect add-on, please click here for details on ordering it.

Adding the "Share Your Purchase" Script to your Checkout Page

The first step in the process will be to retrieve the necessary coding that is required for the "Share Your Purchase" feature. To begin, log into your 3dcart Online Store Manager.

  1. Using the left hand navigation menu, go to Modules
  2. Next, use the search bar at the top to search for "Facebook Connect" to bring up the module.
  3. Click on "Change Settings"

Along with your Facebook App ID and Secret keys, you will see a series of text variables that will be used for your "Share your Purchase" options.

These are:

  • Share Message - Facebook
    The basic sharing message that will be displayed on your shoppers' Facebook feeds, including the product name, your store name, and a brief description of the product.
  • Share Message - Twitter
    The basic sharing message that will be displayed on your shoppers' Twitter feeds, including the product name and your store name.

 

Tip
You may edit these messages however you see fit, but please keep in mind that there are certain character limitations that come into play with Social media postings. (i.e. Twitter has a well-known 140 character limit)

Also, please note that only the following 3 dynamic product variables work within the message text:

  • [store_name]
  • [name]
  • [description]

Below the "Share Message" areas, you will then see two specific scripts that will be used for the "Share Your Purchase" feature. Each of these scripts will behave on your store differently, so select the entire code for one (CTRL-A) and copy it (CTRL-C) to your computer's clipboard.

The two options are:

  • Display the Share Your Purchase Window Automatically
    Upon completion of the sale, an ajax modal window will open up automatically and encourage your shopper to share their purchase. The pop up window will give the option of either posting the share to Facebook or Twitter.
  • Display the Share Your Purchase Button
    At the final checkout page, your shoppers will see a button that will then open up the ajax modal pop up window described above.

Additional Information
The "Share Your Purchase" modal window is based on the simplemodal jQuery plugin. As such, you can edit its display placement options relatively freely. For more information on this, please review the simplemodal settings by clicking here.

You can also edit the template used by the modal to customize the look and feel of the actual pop up window. The template used for this feature is located via FTP at "web/assets/templates/common-html5/shareyourpurchase.html"

(Please note that 3dcart support will not be able to assist in the customization or designing of the modal window or its template)

Activating "Share Your Purchase"

Once you've selected and copied the script that you'd like to use, you will now need to place it onto your store's Checkout 4 template. To do this, please use the following steps.

From your Online Store Manager:

  1. Go to Content ->Titles & Content
  2. Look for "Checkout #4" and click on its "Edit" button
  3. Paste (CTRL-V) the copied script code into the "Footer" section at the bottom
  4. Click "Save" at the top right to commit your changes.

Help Desk Software by Kayako fusion