Re: How can we add Discord to social media?

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

lwdsh
Tourist
4 0 3

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?

Replies 7 (7)

Don
Shopify Staff
2787 199 398

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

Don | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

StoreMedics
Shopify Partner
62 6 15

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

We work on Shopify stores to improve, maintain, and build functionality across all store types.
- Reach Out To Us! | hello@storemedics.com
- Visit Our Site! | https://www.storemedics.com

If we helped, leave a Like / Accept Solution
lwdsh
Tourist
4 0 3

I'm using the theme called Minimal 

Edward-Newgate
Shopify Partner
570 22 61

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. 

Was my reply helpful? Click Like or Mark it as an Accepted Solution to let me know!
lwdsh
Tourist
4 0 3

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
Tourist
4 0 3

Anyone also know why the icon.svg file isnt editable? ozSR95e
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. 

2ffG6z5



















 

 

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. 

 

zkV6yPn

Giancarlo1991
Tourist
5 0 1

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

```