HELP!!! Social Media Footer in Brooklyn Theme

Solved
mindlessness
Tourist
8 0 4

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
Shopify Partner
330 65 136

This is an 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:

Screen Shot 2021-01-15 at 20.33.10.png

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:

Screen Shot 2021-01-15 at 20.58.43.png

 

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:

Screen Shot 2021-01-15 at 21.12.21.png

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

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
mindlessness
Tourist
8 0 4

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
Shopify Partner
330 65 136

@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

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
PeanutButter
Shopify Partner
330 65 136

@mindlessness did fields appear?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
mindlessness
Tourist
8 0 4

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

PeanutButter
Shopify Partner
330 65 136

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

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
mindlessness
Tourist
8 0 4

THANK YOU THANK YOU THANK YOU!!!

PeanutButter
Shopify Partner
330 65 136

@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"

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es