Visit website

Dawn Theme Shopify: How to Add Your Own Social Media Icons

A free guide on how to add Discord, Telegram, or LinkedIn icons to the settings section of the Dawn theme.

1. Prepare the Icon in SVG Format

Go to Figma and download the icon in SVG format.

2. Go to the code editor

Online Store → Themes → Edit code.

3. Upload the SVG Icon to the assets Folder

Make sure the file is named icon-discord.svg

Once uploaded, the image code will look something like this:

<svg width="264" height="200" viewBox="0 0 264 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M223.542 16.748C206.205 8.81383 187.9 3.17544 169.103 0C166.534 4.60043 164.203 9.33281 162.127 14.1795C142.098 11.1624 121.735 11.1624 101.706 14.1795C99.6299 9.33281 97.3076 4.60043 94.7303 0C75.9152 3.21063 57.6014 8.84901 40.2465 16.792C5.79161 67.7662 -3.54999 117.474 1.12081 166.478C21.2994 181.387 43.8793 192.726 67.893 200C73.3027 192.726 78.0791 185.011 82.1957 176.936C74.3847 174.016 66.8551 170.418 59.6773 166.187C61.5685 164.815 63.4157 163.408 65.2014 162.035C107.476 181.915 156.418 181.915 198.702 162.035C200.505 163.513 202.352 164.921 204.226 166.187C197.039 170.436 189.483 174.034 181.664 176.963C185.771 185.038 190.557 192.743 195.966 200C219.998 192.752 242.595 181.422 262.782 166.504C268.262 109.671 253.414 60.4213 223.542 16.748ZM88.1156 136.342C75.1059 136.342 64.3481 124.528 64.3481 110.006C64.3481 95.4831 74.7277 83.5642 88.0716 83.5642C101.415 83.5642 112.085 95.4743 111.857 110.006C111.628 124.537 101.372 136.342 88.1156 136.342ZM175.788 136.342C162.752 136.342 152.047 124.528 152.047 110.006C152.047 95.4831 162.426 83.5642 175.788 83.5642C189.149 83.5642 199.74 95.4743 199.511 110.006C199.282 124.537 189.052 136.342 175.788 136.342Z" fill="#1C1C1C"/>
</svg>

You’ll need to edit the SVG code to match the theme’s style (color, size, animation). To do this:

  1. Remove the width="264" and height="200" attributes — these set fixed dimensions and may break responsiveness.

  2. Add the attribute class="icon icon-discord" — this ensures the icon uses the shared social media icon styles.

  3. Remove fill="none" and immediately after the <path tag, add fill="currentColor" — this lets the icon automatically adapt to the parent element’s color.

Updated SVG Code (copy and paste this into Shopify, replacing the original code):

<svg class="icon icon-discord" viewBox="0 0 264 200" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M223.542 16.748C206.205 8.81383 187.9 3.17544 169.103 0C166.534 4.60043 164.203 9.33281 162.127 14.1795C142.098 11.1624 121.735 11.1624 101.706 14.1795C99.6299 9.33281 97.3076 4.60043 94.7303 0C75.9152 3.21063 57.6014 8.84901 40.2465 16.792C5.79161 67.7662 -3.54999 117.474 1.12081 166.478C21.2994 181.387 43.8793 192.726 67.893 200C73.3027 192.726 78.0791 185.011 82.1957 176.936C74.3847 174.016 66.8551 170.418 59.6773 166.187C61.5685 164.815 63.4157 163.408 65.2014 162.035C107.476 181.915 156.418 181.915 198.702 162.035C200.505 163.513 202.352 164.921 204.226 166.187C197.039 170.436 189.483 174.034 181.664 176.963C185.771 185.038 190.557 192.743 195.966 200C219.998 192.752 242.595 181.422 262.782 166.504C268.262 109.671 253.414 60.4213 223.542 16.748ZM88.1156 136.342C75.1059 136.342 64.3481 124.528 64.3481 110.006C64.3481 95.4831 74.7277 83.5642 88.0716 83.5642C101.415 83.5642 112.085 95.4743 111.857 110.006C111.628 124.537 101.372 136.342 88.1156 136.342ZM175.788 136.342C162.752 136.342 152.047 124.528 152.047 110.006C152.047 95.4831 162.426 83.5642 175.788 83.5642C189.149 83.5642 199.74 95.4743 199.511 110.006C199.282 124.537 189.052 136.342 175.788 136.342Z" fill="#1C1C1C"/>
</svg>

4. Open the social-icons.liquid File in the snippets Folder

Paste the following code before the </ul> tag and save the changes:

{%- if settings.social_discord_link != blank -%}
  <li class="list-social__item">
    <a href="{{ settings.social_discord_link }}" class="link list-social__link">
      <span class="svg-wrapper">
        {{- 'icon-discord.svg' | inline_asset_content -}}
      </span>
      <span class="visually-hidden">{{ 'general.social.links.discord' | t }}</span>
    </a>
  </li>
{%- endif -%}

5. Open the settings_schema.json File in the config Folder

In the file, locate the following line:

"name": "t:settings_schema.social-media.name",

Next, find the block "settings": [ — this array contains all available social media platforms.

Paste your code at the end of the list, just before the closing bracket ].

{
    "type": "text",
    "id": "social_discord_link",
    "label": "t:settings_schema.social-media.settings.social_discord_link.label",
    "placeholder": "t:settings_schema.social-media.settings.social_discord_link.info"
}

Important: Don’t forget to add a comma before your inserted code if it’s the last item in the list! Otherwise, you'll get a saving error. This is shown with an arrow in the screenshot.

6. Open the en.default.json File in the locales Folder

Find the first occurrence of the "links": { block — this is where all available social media platforms are listed.

"links": {

Inside this block, you'll see entries for each platform.

Insert the following line:

"discord": "Discord"

Make sure to add a comma before the new line if you’re not adding it as the first item in the list. This is shown with an arrow in the screenshot.

7. Open the en.default.schema.json File in the locales Folder

Find the following block in the file:

"social-media": {

Paste the following code:

"social_discord_link": {
    "label": "Discord",
    "info": "https://discord.gg/z952Javh5V"
}

Note:

"info": "https://discord.gg/z952Javh5V"

This text is only visible in the theme editor interface — your store visitors will not see it on the live site.

8. Open the Theme Settings

Go to Theme settings → Social media → Discord.

Add the link to your Discord server and save the changes.

9. Open the header.liquid File in the sections Folder

You might encounter an issue where the new icon doesn’t appear in the site header.

To fix this:

  1. Find the line that starts with:

{% if settings.social

  1. At the end of this line, add the following code:

or settings.social_discord_link != blank

  1. Then, find the line:

"logo": {{ settings.logo | image_url: width: 500 | prepend: "https:" | json }},

  1. Insert the following code after that line:

{{ settings.social_discord_link | json }}

  1. Finally, save the changes.

10. Open the header-drawer.liquid File in the sections Folder

You might also encounter an issue where the new icon doesn’t appear in the mobile version of the site — specifically in the menu that opens when clicking the hamburger icon.

To fix this:

  1. Find the following line in the file:

<ul class="list list-social list-unstyled" role="list">

  1. Insert the following code before the closing </ul> tag:

{%- if settings.social_discord_link != blank -%}
    <li class="list-social__item">
        <a href="{{ settings.social_discord_link }}" class="list-social__link link">
            <span class="svg-wrapper">
                {{- 'icon-discord.svg' | inline_asset_content -}}
            </span>
            <span class="visually-hidden">{{ 'general.social.links.discord' | t }}</span>
        </a>
    </li>
{%- endif -%}

  1. Save the changes.

Your new icon is now successfully added to the site.

FAQs

How can I add other icons?

You can do it in the same way. Simply replace discord or Discord with the name of the social media platform you want to add in the corresponding parts of the code.

Need help with setup? Contact us — we’ll handle everything for you.

PreviousDawn Theme ShopifyNextDawn Theme Shopify: How to Add Payment Method Icons to the Cart Drawer

Last updated

Was this helpful?