Add Discord icon link to footer social media icons in DAWN template?

[alexthemeborne]

Can anyone help with this, I tried following the more general guide here: 

https://community.shopify.com/c/shopify-design/social-media-add-social-media-icons-via-assets/td-p/6...

but if anyone can be more specific to Dawn that would be amazing?

Alternatively is there a way to replace one of the existing backend options i.e Tumblr with the discord logo?

Seeing as one is able to put whatever link they like

[alexthemeborne]

Good solution found here:

https://www.youtube.com/watch?v=_UdPkfeT6G8

[Bird_on_a_Wire]

Thanks @alexthemeborne that video tutorial worked for me too!

[jesseriddle]

I followed along the video, but if you're looking for a Discord specific solution without watching the whole video, this is what I did to accomplish the task.

!!! IMPORTANT: Ensure you've taken a backup of your theme prior to making these changes !!!

Adding Discord URL

1. Click Themes, under Online Store
2. Click Customize
3. Click the "Gear Icon" from the left-hand navigation
4. Scroll through the items in the left-hand navigation until you find "Social Media"
5. Type/Paste your Discord URL into the Tumblr URL field.
6. Click Save

Swapping Tumblr Icon for Discord

1. Click Themes, under Online Store
2. To the left of the Customize button, click the three dot button.
3. Click Edit Code
4. Click "Snippets" within the left-hand navigation
5. Scroll down until you see icon-tumblr.liquid
6. Click icon-tumblr.liquid
7. Add HTML comments around the Tumblr SVG HTML snippet.
8. Add the Discord SVG Snippet (located below) above the HTML snippet we commented out in the last step.
9. Click Save

Discord SVG Snippet

<svg width="auto" height="auto"aria-hidden="true" focusable="false" class="icon" viewBox="0 0 400 400">
  <path fill="currentColor" fill-rule="evenodd" d="M137.109 48.213 C 100.767 55.318,62.951 68.954,57.911 76.771 C 17.294 139.764,0.391 195.606,0.391 266.797 C 0.391 301.298,0.355 301.019,5.239 304.616 C 26.156 320.016,53.951 335.143,78.885 344.695 C 91.258 349.435,102.473 353.138,103.164 352.711 C 103.877 352.270,110.938 342.479,110.938 341.931 C 110.938 341.729,112.143 339.772,113.617 337.582 C 120.515 327.331,125.532 316.406,123.341 316.406 C 121.544 316.406,95.603 304.169,93.164 302.171 C 91.685 300.960,91.922 300.475,95.326 297.739 L 98.465 295.217 109.193 299.470 C 171.567 324.195,239.129 323.499,295.424 297.551 L 300.645 295.144 304.272 297.639 C 306.266 299.011,307.769 300.543,307.612 301.044 C 307.284 302.084,287.520 312.278,281.641 314.439 C 275.936 316.536,275.311 317.284,276.609 320.456 C 279.098 326.538,293.757 350.080,296.442 352.309 C 298.128 353.708,324.408 344.028,344.203 334.717 C 365.397 324.747,397.352 304.474,398.699 300.143 C 400.119 295.575,400.240 248.773,398.869 234.375 C 395.612 200.186,385.917 161.946,373.759 135.328 C 372.723 133.060,371.875 131.006,371.875 130.765 C 371.875 129.584,357.384 101.582,353.087 94.458 C 339.921 72.635,340.028 72.757,330.469 68.686 C 309.882 59.919,285.499 52.615,260.573 47.750 C 255.536 46.766,256.046 46.240,250.274 58.358 C 246.244 66.821,245.019 68.765,243.929 68.429 C 232.415 64.884,167.667 64.873,156.122 68.414 C 155.100 68.727,153.743 66.575,149.783 58.359 C 144.056 46.478,144.435 46.781,137.109 48.213 M138.584 175.762 C 168.677 180.690,179.840 222.936,156.880 244.999 C 126.528 274.163,84.134 234.936,103.043 195.183 C 109.380 181.859,124.699 173.488,138.584 175.762 M271.762 175.817 C 297.581 180.007,310.801 214.341,295.690 237.964 C 274.606 270.923,229.015 252.419,231.444 211.888 C 232.654 191.707,246.229 177.261,266.016 175.097 C 266.445 175.050,269.031 175.374,271.762 175.817" clip-rule="evenodd"/>
</svg>

Example of Discord Implementation by Replacing Tumblr Icon

<svg width="auto" height="auto"aria-hidden="true" focusable="false" class="icon" viewBox="0 0 400 400">
  <path fill="currentColor" fill-rule="evenodd" d="M137.109 48.213 C 100.767 55.318,62.951 68.954,57.911 76.771 C 17.294 139.764,0.391 195.606,0.391 266.797 C 0.391 301.298,0.355 301.019,5.239 304.616 C 26.156 320.016,53.951 335.143,78.885 344.695 C 91.258 349.435,102.473 353.138,103.164 352.711 C 103.877 352.270,110.938 342.479,110.938 341.931 C 110.938 341.729,112.143 339.772,113.617 337.582 C 120.515 327.331,125.532 316.406,123.341 316.406 C 121.544 316.406,95.603 304.169,93.164 302.171 C 91.685 300.960,91.922 300.475,95.326 297.739 L 98.465 295.217 109.193 299.470 C 171.567 324.195,239.129 323.499,295.424 297.551 L 300.645 295.144 304.272 297.639 C 306.266 299.011,307.769 300.543,307.612 301.044 C 307.284 302.084,287.520 312.278,281.641 314.439 C 275.936 316.536,275.311 317.284,276.609 320.456 C 279.098 326.538,293.757 350.080,296.442 352.309 C 298.128 353.708,324.408 344.028,344.203 334.717 C 365.397 324.747,397.352 304.474,398.699 300.143 C 400.119 295.575,400.240 248.773,398.869 234.375 C 395.612 200.186,385.917 161.946,373.759 135.328 C 372.723 133.060,371.875 131.006,371.875 130.765 C 371.875 129.584,357.384 101.582,353.087 94.458 C 339.921 72.635,340.028 72.757,330.469 68.686 C 309.882 59.919,285.499 52.615,260.573 47.750 C 255.536 46.766,256.046 46.240,250.274 58.358 C 246.244 66.821,245.019 68.765,243.929 68.429 C 232.415 64.884,167.667 64.873,156.122 68.414 C 155.100 68.727,153.743 66.575,149.783 58.359 C 144.056 46.478,144.435 46.781,137.109 48.213 M138.584 175.762 C 168.677 180.690,179.840 222.936,156.880 244.999 C 126.528 274.163,84.134 234.936,103.043 195.183 C 109.380 181.859,124.699 173.488,138.584 175.762 M271.762 175.817 C 297.581 180.007,310.801 214.341,295.690 237.964 C 274.606 270.923,229.015 252.419,231.444 211.888 C 232.654 191.707,246.229 177.261,266.016 175.097 C 266.445 175.050,269.031 175.374,271.762 175.817" clip-rule="evenodd"/>
</svg>

<!-- Original SVG Code
<svg aria-hidden="true" focusable="false" class="icon icon-tumblr" viewBox="0 0 20 20">
  <path fill="currentColor" fill-rule="evenodd" d="M11.997 18c-2.26 0-3.954-1.235-3.954-4.198V9.061H6V6.489C8.26 5.867 9.201 3.787 9.314 2h2.344v4.068h2.73V9.06h-2.73v4.128c0 1.235.584 1.667 1.516 1.667h1.318V18h-2.495Z" clip-rule="evenodd"/>
</svg>
-->

[EcomGraduates]

Hello there  

1. Locate the section where the other social media icons are listed and copy the HTML code for one of the icons, for example, the Facebook icon.

2. Paste the copied HTML code below the Facebook icon and replace the Facebook URL with your Discord invite link. You can find your Discord invite link by logging into your Discord account and navigating to your server settings.

3. Edit the icon class name to match the Discord icon. You can use a font icon library like Font Awesome to find the appropriate class name for the Discord icon.

4. Customize the styling of the Discord icon to match the other social media icons in the footer, including size, color, and hover effects.

5. Save the changes and preview your website to ensure that the Discord icon link is displaying correctly.

[shopdevs]

I used this as a solution, after struggling for a while to find the right SVG code. All the other SVG code may work, but remember to pay attention to your SVG box. All the other Shopify boxes are very small, like 0 0 32 32. The Discord SVGs are all large, like 0 0 640 560. I used the Font Awesome SVG code, since it was most simple. Remember to adjust your SVG box size, especially if you have all your icons in a single file, like what we have. 

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

```