Solved

HELP!!! Social Media Footer in Brooklyn Theme

mindlessness
Tourist
8 0 6

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!!

Accepted Solution (1)

PeanutButter
Shopify Partner
385 67 181

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

View solution in original post

Replies 16 (16)

PeanutButter
Shopify Partner
385 67 181

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 6

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
385 67 181

@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
385 67 181

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

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

PeanutButter
Shopify Partner
385 67 181

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 6

THANK YOU THANK YOU THANK YOU!!!

PeanutButter
Shopify Partner
385 67 181

@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
GoodKarmaCo
Excursionist
22 0 7

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).

Shopify GK Screenshot 1.png

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?

Shopify GK Screenshot 2.png

(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
Visitor
1 0 0

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
Visitor
1 0 0

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

Darek1
Tourist
9 0 3

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

SlickTok
Tourist
23 0 3

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
Visitor
2 0 1

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
Visitor
2 0 0

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
New Member
6 0 0

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