How can I integrate a Discord link into my social media footer?

[lwdsh]

I run a Discord server, and its heavily related to my shop and its consumers, is there any way I can add a Discord icon in the social media footer that sends it to the Discord link?

[Don]

Hi there @lwdsh!

Don here from Shopify. 🙂

If you could let us know the name of the theme you are using for your store first, we can check out how you might be able to proceed here.

It will likely require some custom coding and you may need to supply a suitable Discord icon you are happy to use in your theme.

If you can just confirm the name of the theme you are using at the moment, we can determine where your next port of call will be. 🙂

Regards,

Don

[StoreMedics]

Like Don said, it will depend on your theme. Most likely will need someone with coding experience to add it.

More than happy to help with adding the discord icon to your store if you are in need of an expert!

Feel free to email us: hello@storemedics.com

[lwdsh]

I'm using the theme called Minimal 

[Edward-Newgate]

Hi @lwdsh 

Have you add Discord icon to your Shopify store successfully yet? If not, this article about adding a social media icon on Shopify may help you do it. As the title, In this post, we are going to show you the benefits of social media for marketing, and a simple guide to add social media icons or apps. I hope that you can do it smoothly and run a prosperous business. 

[lwdsh]

After the part where I upload the asset,  in my case "Discord.svg" file I am trying to use for the icon, it says to code in the location and thats pretty much it, but how would one go about doing this to add toward the bottom where the other social media icons are like instagram/rss/youtube/etc... 
I would like to have my discord icon among though leading to a discord invite to server page. 

[lwdsh]

Anyone also know why the icon.svg file isnt editable? 
I exported it and renamed it and then reuploaded it as icon2.svg as a new asset and now I can see the code for it for whatever reason. 

I' thinking is there any way I can change 35 for the RSS social media icon path to the path that my discord.svg is located? That way I can just change the icon for RSS to my Discord. Also for whatever reason my discord.svg image has 3 paths located in it instead of 1, not sure how to go about that as well. 

[Giancarlo1991]

I added the discord icon apply some changes to the theme's code. It was a bit tricky but it works.

Those are the steps I followed:

In `config/settings_data.json` I added this code line `"social_discord": "https:\/\/discord.com\/invite\/[your_channel]",`. E.g.:

````

"social_discord": "https:\/\/discord.com\/invite\/[your_channel]",

"social_discord": "https:\/\/www.instagram.com\/invite\/[your_channel]",

"social_discord": "https:\/\/twitter.com\/invite\/[your_channel]",

````

You can also skip this passage if you prefer to insert the link via the Shopify interface without touching directly the code.

In `config/settings_schema.json` I added:

```

{

   "type": "text",

   "id": "social_discord",

   "label": "Discord"

}

```

In `snippets/icon.liquid` I needed to add the Discord Icon:

```

{% when 'discord' %}

<svg focusable="false" width="{{ width | default: 12 }}" height="{{ height | default: 16 }}" class="{{ icon_class }}" viewBox="0 0 12 16">

<path fill-rule="evenodd" clip-rule="evenodd" d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0

.056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z" fill="currentColor"></path>

</svg>

```

I had to search for the icon's SVG code online and apply some little changes in order to make it compatible with the code of the other already existing icons.

I added this code before `{%- when 'twitter' -%}` code

And in the end in `snippets/social-media.liquid` I added before`{%- if settings.social_youtube != blank -%}`:

```

{%- if settings.social_discord != blank -%}

   {%- assign active_accounts = active_accounts | plus: 1 -%}

       <li class="social-media__item social-media__item--discord">

<a href="{{ settings.social_discord | replace_first: 'https://', '' | replace_first: 'http://', '' | prepend: 'https://' }}" target="_blank" rel="noopener" class="social-media__link" aria-label="{{ 'general.social.follow_label' | t: social_media: 'Discord' }}">

{%- render 'icon' with 'discord' -%}

</a>

</li>

{%- endif -%}

```