Shopify Social Network Tabs

Shopify Social Network Tabs

Shopify Social Network Tabs is an awesome application which will combine all your favourite social network profiles ,create their tabs and display them on front-end with a slider showing the tabs content. This app helps in making your store socially equipped with platforms like Facebook / Twitter / Instagram / Youtube / Pinterest / Tumblr and many more.

Features

  • Provides different social networks with feeds.
  • Displays latest posts of different social networks.
  • Provides you to set values for Social Networks,Styling and other settings like location,height,width etc.
  • The block showing tabs and their slider will be displayed anywhere in frontend according to the location you set.
  • Provides below given different social media tool access on one single tab.
    -Facebook Page
    -Google Latest +s.
    -LinkedIn – Company Profile, Member Profile, Company Insider & Jobs Plugins.
    -Facebook Like Box/Stream.
    -Facebook Recommendations.
    -Pins Flickr Gallery.
    -RSS Latest Posts.
    -Youtube channel.
    -Pinterest .
    -Latest Diggs.
    -Stumbleupon posts and views.
    -Last.fm Loved/Recent/Reply Tracker.
    -Dribble posts, views, likes and number of comments.
    -Vimeo posts, views, likes and number of comments.
    -Tumblr posts.
    -Deviantart Latest Posts.

Video Guide

Shopify Social Network Tab App Installation and configuration.

Installation

On Landing Page you will find the “install” button. Enter the shop url where you want to install the app.

1

Now you need to install the App:

2

Workflow

After the installation, you need to buy the monthly plan available for this app. Once the payment is done for the plan,the App will be listed here. :

3

Once the payment is done for the plan,the App will be listed here. :

4

After clicking on the app you will be redirected to the Home Page of the app.

5

Configuring the App

Follow the below screenshots to know the detailed configuration procedure :

To get “Social Network Tabs” window displayed on store , follow the below process :

    • Click on Online Store .
    • Go To Themes.
    • Click on Customize Theme button on the top right.

10

    • Select Edit HTML/CSS button from the Theme Option on Top Left.

11

    • Select any .liquid file from the Templates or Snippet where you want to show the Social Network Tab.
      Paste the below given code in any Liquid file where you want the “Social Network” tab & then click on save button to save the changes:

      {{ '//shopify.webkul.com/shopify-social-network-tabs/css/social.css' | stylesheet_tag }}
      {{ '//shopify.webkul.com/shopify-social-network-tabs/js/jquery.social.media.tabs.1.5.min.js' | script_tag }}
        <div id='wk_social_tabs'></div>

gsahjchckjb

Setting the Configuration Values for Social Network Tabs:

The Social Network Tabs Configuration page will consist of three tabs:

  • Social Networks
  • Settings
  • Styling
1. Social Network Configuration:

You can click on these tabs for changing the values of different settings.Default values are already set while installation of this application,you can change them according to your requirement.

tretrtr

For Example : If you want to set the values for Facebook Social Network,click on Social Networks Tab and then click on facebook icon tab which will get displayed after click Social Network Tab,fill the details and click on Save Credentials button.

2. Settings of Social Network Tabs:

to set Display Settings,click on Settings Tab,fill the details and click on Save & Continue button.
fsfs
ghgh

3. Styling of Social Network Tabs:

df zg
zdsfgfgbgvsdrgfv

So this was the whole process for displaying Social Network Tabs at your site’s front-end.

Front End View

The Social Network Tab will appear on store with all the social media tools configured at the backend and LIVE feeds.
dghf
nitika store

This is how “Social Network Tabs” app works .
Click Here on Shopify Social Network Tabs to get the app

Support

For any kind of technical assistance, just raise a ticket at : http://webkul.uvdesk.com/ and for any doubt contact us at support@webkul.com