Introduction

Thank you for choosing Social Count! Getting setup is easy, but in this guide, we'll show you exactly how to configure Social Count. Don't worry, it's very easy, just follow along and you'll have no problem!

When viewing changes to your settings, make sure to refresh your page twice in order to see the effected settings.

Getting Started #back to top

If you haven't already done so, install Social Count on your Shopify Store and authorize Social Count to connect with your shop. You can try out Social Count for 30 days before you will be billed.

Configuring Options #back to top

Setting up Social Count in you Shopify store takes a matter of minutes. The steps below outline the basic options that control the appearance of the app.

  1. Go to Shopify Admin -> Apps -> Social Count
  2. Select what icon type you would like to you. Social count comes with a great set of vector icons to use which keeps page load time down to a minimum. If you would like to use custom icons, you can add them in the next step.
  3. Select where you would like the fixed social count icons to appear. You can toggle this off in the next step
  4. Decide whether you want the fixed icons to be visible. You can adjust the background and border color of these icons here as well.

Using Custom Icons (optional) #back to top

To use custom icons with Social Count, you will need to enter the full url of the icon in the boxes provided.

  1. Navigate to Shopify Admin -> Settings -> Files.
  2. Click "Upload Files" and select your desired icons.
  3. Copy the urls of these icons and paste them in their corresponding boxes.
  4. Watch the video below to see exactly how this is done

Adding Custom Locations (optional)#back to top

If you want to show the social icons in more locations follow these steps:

  1. Copy the below snippet to your clipboard
                                      
  2. Log in to Shopify, and go to Online Store -> Themes -> [Your Theme] -> Actions -> Edit Code
  3. Open up your sections folder and find where you would like to display your social count. This is often put in the header.liquid, footer.liquid, or in theme.liquid under the templates folder.
  4. You may want to open your themes stylesheet and add some CSS to get it to look just how you like. Look for a file called theme.scss.liquid or style.css in the Assets Folder We provide basic styling automatically with the app, but you can create additional styles how you see fit.
  5. Here are some helper classes to get you started:
    *** Disclaimer: We strongly advise that only code savy merchants utilize the following CSS classes
                                      /* Make the box align to the right of its parent container */
                                      .sp__box {
                                        float: right;
                                      }
                                    

                                      /* Make the box align to the left of its parent container */
                                      .sp__box {
                                        float: left;
                                      }
                                    
                                      /* Make the box align to the left of its parent container */
                                      .sp__box {
                                        float: left;
                                      }
                                    
                                      /* Make the box align to the middle of its parent container */
                                      .sp__box {
                                        width: 200px;
                                        text-align: center;
                                        margin: auto;
                                      }
                                      .sp__box .sp__social-media-counts {
                                        display: inline-block;
                                      }
                                      .sp__box .sp__line {
                                        margin: 0 10px;
                                      }
                                    

Facebook #back to top

  1. Go to your Facebook page.
  2. If you already have a custom Facebook page @ Username set up, then simply copy the last part of the url after facebook.com to your clipboard and paste the page name into the box provided.
  3. If your unsure if you have set up a custom username (handle) for your facebook page, reference the following screenshots:

    Custom Handle is set up here:

    Custom Handle is not set up here - notice the long string of numbers and dashes at the end of the url. If your page looks like this, continue to the next step:

  4. If you have not yet set up a custom handle, you must do so by following these steps:
    • Log into Facebook and go to your business page.
    • In the left hand side, click "About"


    • Click on "Create Page @ Username"


    • Enter your desired custom page name, and click save.


    • Now you can use this username to show your follower count using Social Count. You must have at least 25 followers to be able to set up a custom Facebook username.

Instagram #back to top

  1. Go to your instagram page.
  2. Find your profile name and copy it to your clipboard.
  3. Enter you instagram profile name in the box provided

Twitter #back to top

  1. Go to your twitter home page.
  2. Find your handle, which is located under your profile picture
  3. Enter you twitter handle without the "@" symbol in the box provided

Finish #back to top

Congratulations! You have now successfully configured Social Count.

Check it out on your store simply by going to your homepage! When viewing changes to your settings, make sure to refresh the page twice in order to see the correct changes!