Adding a Spotify icon to the social media section in the footer?

Hello!

I was just curious if there was a backdoor way to go about adding a Spotify icon to the social media section in the footer?

Thanks in advance for any feedback.

Kindly,
Justin

Hey @justintimothy
There are a few steps involved, I’ve outlined them below:

First, you would add the Spotify option to your theme Schema via the settings_schema.json file. Within this file, you will need to find where the list of social icons begin, which is around line 730.
Here you will see code blocks looking like the below:

You will find the end of the code block, highlighted by the arrow in the screenshot above. At the end of the list, you will add a comma and create a new list entry, similar to the ones above, but replacing the social media platform name with Spotify. You would end up with code like the below:

,
      {
        "type": "text",
        "id": "social_spotify_link",
        "label": "spotify",
        "info": "https:\/\/spotify.com\/shopify"
      }

You can also see the screenshot below:

The next step will be the most difficult, which will be to find an svg file for your icon. First, you will create a new snippet file for your icon. If you view the Snippet folder, you can see the existing icon snippets:

You would follow the naming conventions and name your new snippet file icon-spotify.liquid. Within this file you would paste your SVG code, which will likely look as shown below:

After adding the SVG code, you would also need to add the classes below:
class=“icon fill-current”

Your SVG code would now look like the below:

The final step will now be to modify your social-icons.liquid file. Within this file, on the first line, you’ll see the code block below:

{%- assign social_accounts = 'Facebook, Twitter, Pinterest, Instagram, Snapchat, TikTok, Tumblr, YouTube, Vimeo, LinkedIn, Email' | split: ', ' -%}

You’ll then add Spotify to the end of the list, which would result in the block below:

{%- assign social_accounts = 'Facebook, Twitter, Pinterest, Instagram, Snapchat, TikTok, Tumblr, YouTube, Vimeo, LinkedIn, Email, Spotify' | split: ', ' -%}

Next, you’ll see a group of when blocks for each icon:

Here you’ll add a when statement for your new Spotify icon, which will look as shown below:

These are quite a few steps so if you wish, you can submit a ticket to our support portal and we’ll help out :slight_smile:

As always, this was incredibly helpful! The directions were perfect, and it worked just great for me. I still need to find a good .svg file for this. The ones I tried to make are showing up as a solid box, but it functionally works. Thanks so much! I’ll spare y’all another ticket…for now!

1 Like