Skip to content

Instantly share code, notes, and snippets.

@pablogiralt

pablogiralt/social-media-icons-brooklyn-shopify-theme.md

Last active January 18, 2021 16:46
Show Gist options
  • Save pablogiralt/34768dbe209b9c9bae44adafe3478153 to your computer and use it in GitHub Desktop.
Save pablogiralt/34768dbe209b9c9bae44adafe3478153 to your computer and use it in GitHub Desktop.
Download ZIP
Add social media icons (Spotify and TikTok) to Brooklyn Shopify theme
Raw
social-media-icons-brooklyn-shopify-theme.md

Add social media icons (Spotify and TikTok) to Brooklyn Shopify theme

What you will get:

You will be adding new social media icons (not available in default theme) to your footer:

Step by Step Guide

1. Add the fields for Spotify and TikTok links in theme settings

Open the Config/settings_schema.json file and just after the field for Fancy, which ends around 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:

2. 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
      %}

3. 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 %}

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

5. 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:

6. 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 }});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment