HELP!!! Social Media Footer in Brooklyn Theme

[mindlessness]

Hi guys - I've tried so many different things and officially need help from an expert/professional. I built my entire store using the Brooklyn theme and love having the social media footers. I need to add my Tik Tok and Spotify to my site's footer, but those aren't options included in the Brooklyn theme. 

Please advise how I can go about adding those in so that the little Tik Tok and Spotify icons show up in my footer with links to my social accounts.

I also would love to add my Newsletter sign up to my footer if anyone can help me with that, too!

Thanks in advance!!

[PeanutButter · Accepted solution]

@mindlessness This would be the steps to accomplish this:

1. Make a copy of your theme and edit the copy of the theme.  Do not edit the live theme. 
You can preview the changes made to the copy of your theme and when you are happy with this, publish the copy.

2. Add the fields for Spotify and TikTok in theme settings
You have to be very careful when editing the settings schema as you can break things.
Open the settings_schema.json file and just after the field for Fancy, which ends at line 1947, add the following:

      {
        "type": "text",
        "id": "social_spotify_link",
        "label": {
          "cs": "Spotify",
          "da": "Spotify",
          "de": "Spotify",
          "en": "Spotify",
          "es": "Spotify",
          "fi": "Spotify",
          "fr": "Spotify",
          "it": "Spotify",
          "ja": "Spotify",
          "ko": "Spotify",
          "nb": "Spotify",
          "nl": "Spotify",
          "pl": "Spotify",
          "pt-BR": "Spotify",
          "pt-PT": "Spotify",
          "sv": "Spotify",
          "th": "Spotify",
          "tr": "Spotify",
          "vi": "Spotify",
          "zh-CN": "Spotify",
          "zh-TW": "Spotify"
        },
        "info": {
          "cs": "http:\/\/spotify.com\/Shopify",
          "da": "http:\/\/spotify.com\/Shopify",
          "de": "http:\/\/spotify.com\/Shopify",
          "en": "http:\/\/spotify.com\/Shopify",
          "es": "http:\/\/Spotify.com\/Shopify",
          "fi": "http:\/\/Spotify.com\/Shopify",
          "fr": "http:\/\/Spotify.com\/Shopify",
          "it": "http:\/\/Spotify.com\/Shopify",
          "ja": "http:\/\/Spotify.com\/Shopify",
          "ko": "http:\/\/Spotify.com\/Shopify",
          "nb": "http:\/\/Spotify.com\/Shopify",
          "nl": "http:\/\/Spotify.com\/Shopify",
          "pl": "http:\/\/Spotify.com\/Shopify",
          "pt-BR": "http:\/\/Spotify.com\/Shopify",
          "pt-PT": "http:\/\/Spotify.com\/Shopify",
          "sv": "http:\/\/Spotify.com\/Shopify",
          "th": "http:\/\/Spotify.com\/Shopify",
          "tr": "http:\/\/Spotify.com\/Shopify",
          "vi": "http:\/\/Spotify.com\/Shopify",
          "zh-CN": "http:\/\/Spotify.com\/Shopify",
          "zh-TW": "http:\/\/Spotify.com\/Shopify"
        }
      },
      {
        "type": "text",
        "id": "social_tiktok_link",
        "label": {
          "cs": "Tik Tok",
          "da": "Tik Tok",
          "de": "Tik Tok",
          "en": "Tik Tok",
          "es": "Tik Tok",
          "fi": "Tik Tok",
          "fr": "Tik Tok",
          "it": "Tik Tok",
          "ja": "Tik Tok",
          "ko": "Tik Tok",
          "nb": "Tik Tok",
          "nl": "Tik Tok",
          "pl": "Tik Tok",
          "pt-BR": "Tik Tok",
          "pt-PT": "Tik Tok",
          "sv": "Tik Tok",
          "th": "Tik Tok",
          "tr": "Tik Tok",
          "vi": "Tik Tok",
          "zh-CN": "Tik Tok",
          "zh-TW": "Tik Tok"
        },
        "info": {
          "cs": "http:\/\/tiktok.com\/Shopify",
          "da": "http:\/\/tiktok.com\/Shopify",
          "de": "http:\/\/tiktok.com\/Shopify",
          "en": "http:\/\/tiktok.com\/Shopify",
          "es": "http:\/\/tiktok.com\/Shopify",
          "fi": "http:\/\/tiktok.com\/Shopify",
          "fr": "http:\/\/tiktok.com\/Shopify",
          "it": "http:\/\/tiktok.com\/Shopify",
          "ja": "http:\/\/tiktok.com\/Shopify",
          "ko": "http:\/\/tiktok.com\/Shopify",
          "nb": "http:\/\/tiktok.com\/Shopify",
          "nl": "http:\/\/tiktok.com\/Shopify",
          "pl": "http:\/\/tiktok.com\/Shopify",
          "pt-BR": "http:\/\/tiktok.com\/Shopify",
          "pt-PT": "http:\/\/tiktok.com\/Shopify",
          "sv": "http:\/\/tiktok.com\/Shopify",
          "th": "http:\/\/tiktok.com\/Shopify",
          "tr": "http:\/\/tiktok.com\/Shopify",
          "vi": "http:\/\/tiktok.com\/Shopify",
          "zh-CN": "http:\/\/tiktok.com\/Shopify",
          "zh-TW": "http:\/\/tiktok.com\/Shopify"
        }
      },

Now you should see the 2 new fields in the theme settings:

 

3. Check if fields have been filled:
Then in Sections/footer.liquid around line 42:

Find the following code:

      {% if
        settings.social_twitter_link != blank
        or settings.social_facebook_link != blank
        or settings.social_pinterest_link != blank
        or settings.social_google_plus_link != blank
        or settings.social_instagram_link != blank
        or settings.social_tumblr_link != blank
        or settings.social_youtube_link != blank
        or settings.social_vimeo_link != blank
        or settings.social_fancy_link != blank
        or settings.social_snapchat_link != blank
      %}

And change it to:

      {% if
        settings.social_twitter_link != blank
        or settings.social_facebook_link != blank
        or settings.social_pinterest_link != blank
        or settings.social_google_plus_link != blank
        or settings.social_instagram_link != blank
        or settings.social_tumblr_link != blank
        or settings.social_youtube_link != blank
        or settings.social_vimeo_link != blank
        or settings.social_fancy_link != blank
        or settings.social_snapchat_link != blank
      	or settings.social_tiktok_link != blank
      	or settings.social_spotify_link != blank
      %}

4. Render the links

Still in Sections/footer.liquid around line 116 you will see the actual code which outputs the icons and links to social networks. 
There, in the position you desire you have to add the new links:

link to TikTok:

              {% if settings.social_tiktok_link != blank %}
                <li>
                  <a href="{{ settings.social_tiktok_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'TikTok' }}">
                    <span class="icon icon-tiktok" aria-hidden="true"></span>
                    TikTok
                  </a>
                </li>
              {% endif %}

link to Spotify:

              {% if settings.social_spotify_link != blank %}
                <li>
                  <a href="{{ settings.social_spotify_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Spotity' }}">
                    <span class="icon icon-spotify" aria-hidden="true"></span>
                    Spotify
                  </a>
                </li>
              {% endif %}

5. Get the icons:

The you will have to upload the icons for Tiktok and Spotify. I recommend you use icons in .svg format.  you can grap this 2 clicking in the SVG button:

https://www.flaticon.com/free-icon/spotify_2111685?term=spotify&page=1&position=2&related_id=2111685...
https://www.flaticon.com/free-icon/tiktok_3116490?term=tiktok&page=1&position=7&related_id=3116490&o...

Or you can search in that same website for the ones you fancy most.

6. Upload the icons to the Assets folder:

- Rename the icons to icon-spotity.svg and icon-tiktok.svg and upload the to Assets clicking in the Add new asset link:

7. Add the css to show the icons inside the links:

And Finally! add the following code at the end of theme.css.liquid:

.social-icons .icon-spotify,
.social-icons .icon-tiktok {
  width: 18px;
  display: inline-block;
  height: 18px;
  background-size: 100%;
  float: left;
  margin-right: 7px;
}


.icon-spotify {
  background: url({{ 'icon-spotify.svg' | asset_url }});
}

.icon-tiktok {
  background: url({{ 'icon-tiktok.svg' | asset_url }});
}

This is the final result in my copy of the Brooklyn theme:

 

If you would prefer that I implement this changes for you I can do this for free.  Please write me an email to pablo@peanutbutter.es

[mindlessness]

Thank you SO MUCH for this detailed explanation!!

Is there a delay between implementing the first chunk of code and seeing the Spotify and Tik Tok fields in theme settings? I implemented everything as instructed, start to finish, but the fields never showed up in my theme settings. 

[PeanutButter]

@mindlessness yes, this happened to me too.  Reload the theme customizer a couple of times to see if the fields appear and of not let me know

[PeanutButter]

@mindlessness did fields appear?

[mindlessness]

I continually refreshed over the weekend and the fields never appeared - do you know why this might've happened?

[PeanutButter]

You added a few typos when copying my code. I have fixed them and now new links are showing.

[mindlessness]

THANK YOU THANK YOU THANK YOU!!!

[PeanutButter]

@mindlessness Your welcome!

Could you please change the title of this thread to something more descriptive, like:

"Add social media icons (Spotify and TikTok) to Brooklyn Shopify Theme's footer"

[GoodKarmaCo]

Hey PeanutButter,

Thank you so much for this guide! I was able to use it and add Spotify and TikTok links to my Brooklyn theme footer. But I'm having some issues with the icons that I was hoping you could help me with (and might be useful for others too).

My original icons (Instagram and Twitter) follow the purple colour scheme of my website. But the new icons are their original colours (screenshot attached).

I tried editing the code in theme.scss.liquid using your last step to include new Instagram and Twitter logos:

.social-icons .icon-spotify,
.social-icons .icon-instagram,
.social-icons .icon-twitter,
.social-icons .icon-tiktok {
width: 18px;
display: inline-block;
height: 18px;
background-size: 100%;
float: left;
margin-right: 7px;
}

.icon-spotify {
background: url({{ 'icon-spotify.svg' | asset_url }});
}

.icon-tiktok {
background: url({{ 'icon-tiktok.svg' | asset_url }});
}

.icon-instagram {
background: url({{ 'icon-instagram.svg' | asset_url }});
}

.icon-twitter {
background: url({{ 'icon-twitter.svg' | asset_url }});
}

But instead of replacing the purple ones, they overlap (screenshot attached). How can I edit the code so that all the social media icons are either purple, or all the icons can be their original colours?

(website is wewantgoodkarma.com, Password: Wewantgoodkarma, but I'm building this on a copy theme right now so the changes aren't live yet). Thank you!

[MBy]

And L over run with chicken wing eating ladies. More peanut butter 😂 for the trunk 🙂 I don't think so 😅 I have a job at SAE institute of technology Atlanta soon 🔜 I am in capture response wanted you might want ad on his student loan I will call him in capture minutes ago to talk 🦜🦜 get Outlook I will be in tomorrow at Larry Tinsley dinning area tips on Saturday night 🌃 I can 🥫 it up from the trunk 🙂 I don't think so

[ouiyay]

I'm getting into trouble as well. can you help me?

[Darek1]

This is perfect!! I added another based on that tutorial! Thanks for the detail description!!!!

[SlickTok]

Hi,

Thank you so much for this, it really helped. 

However, I am having trouble with the way the icon is displaying on mobile. If you go to my store www.slicktok.co.uk you'll notice that the TikTok logo is appearing up against the left side of the screen, rather than beside the 'TikTok' text. It's displaying fine on desktop though.

Not sure if it makes a difference but I had to upload a .png file of the TikTok icon, rather than the .svg file due to needing a premium subscription to download it on the site you provided. I tried downloading a .svg icon from Google but it popped up with an error saying that the file couldn't be saved. Not sure if this would even cause a problem, but just to let you know incase it does.

Thanks in advance.

[RMoto]

I was having the same issue when browsing on a mobile device. I was able to fix it by changing the code in step 7: edit the float line from left to center.

[Panagiotis711]

I have same issue and I read about the coding. I will try to duplicate the theme and make it happen for me also but I am not a tech woman and I have to ask here first:)

I will duplicate the theme and after I will follow the process thta is here right? Asking because I saw people here to have issues and wondering before proceed if the coding is updated nowadays. 

 Thank you and wishing the best for all here thta we are stuglling to be better 🙂

[x10]

Hi peanut,  can you also provide the solution for Refresh Theme. thanks alot in advance