Knowledgebase: SocialCommerce
How Do I Use the Store's Social Links?

You can easily add Social Icons to your 3dcart site by simply providing the URL to your social media channels directly inside the 3dcart Online Store Manager. Here's how!

Tip
If you aren't using it already, Social Media is a great way to advertise your store and get exposure to millions of users. Best of all, most Social Media channels are free to sign up for! With the following information, you can link your store to:

  • Facebook
  • Twitter
  • Google+
  • Pinterest
  • YouTube
  • Tumblr

Adding your Social Icons

Log into your 3dcart Online Store Manager and proceed with the following steps:

  1. Go to Marketing ->SEO Tools
  2. Look for the "Social Links" section and enter the URLs for your specific Social Media channels.

Note
This feature requires special HTML coding to be present be present in both your CSS and frame.html template files. If your selected theme does not contain this coding, you will be presented with a message stating as much.

Click here to be taken to the part of this article that helps you add the required coding to your files.

  1. Save your SEO Tools page

Your store will now have your Social Media Icons added to it.

If Your Theme Does Not Have The Required Coding

As mentioned above, the use of your store's Social Icons will require special coding in both your store's CSS file and frame.html template. The coding is included on all new installs of themes, but for legacy users who might not want to change their theme, the following will assist you in adding the required coding.

Please Note
The following information is being provided solely as a courtesy. Please understand that 3dcart support is neither qualified nor trained to provide HTML editing support. If you are uncomfortable with editing HTML, we also have design services available which can provide this service for you. Please contact our Sales department for more information.

Adding the Required CSS coding

First you will need to add the following coding to your store's CSS file.

From your Online Store Manager:

  1. Go to Settings ->Design ->Themes & Styles
  2. Click on the "Edit Look/Colors (CSS)" button as shown to go into the Style Sheet Editor
  3. Once in the Style Sheet Editor, click on "Advanced Mode" at the top
  4. Add the following code to the end of your CSS file:

  1. Save your changes and proceed to the next steps.

Adding the Required HTML coding to your frame.html file

Next, you will need to add the HTML coding somewhere* on your frame.html file.

*Additional Information
We describe it as "somewhere" for the placement of the coding because frankly, the placement and where the icons should appear is entirely up to you. The only requirement is that it resides in your frame.html file and is not obstructed by other elements of your design. As long as the coding resides in your frame file, the 3dcart software knows which icons will be inserted - based on the URLs specified in the SEO Tools page.

From your Online Store Manager:

  1. Go to Settings ->Design ->Themes & Styles
  2. Click on the "Edit Template (HTML) button as shown to go into your theme folder's specific template editor.
  3. Select your frame.html file and click on its "Edit" button
  4. Add the following coding to it where you'd like to have the icons appear.

Alternate Placement of the Code

If you are not well-versed or comfortable with HTML editing, an alternative to altering your frame.html file would be to place the HTML coding into any of your store's banners sections. These are accessbile by going to Settings ->Design ->Header & Footer and placing the code in which ever banner you wish to use.

Tip
Don't forget to enable the banner after adding the code so that it displays!


Help Desk Software by Kayako fusion