Ctrlk
Join our newsletterShopify โ€“ $1/month
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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 Shopify Dawn theme.

Relevant for Dawn theme version 15.3.0

If you want to avoid coding, try the Shrine theme.

Shrine offers over 120 built-in features that help improve conversion rates and increase the average order value, without the need to configure additional apps or pay for subscriptions. Everything is customizable without code, saving you time and resources.

Use Shrine โˆ’ 15% OFF

Your discount code: VECOMLAB

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:

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):

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

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

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

In the file, locate the following line:

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 ].

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.

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

Insert the following line:

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:

Paste the following code:

Note:

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:

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

  1. Then, find the line:

  1. Insert the following code after that line:

  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:

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

  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 ShopifyNextHow to Add Payment Method Icons to the Cart Drawer

Last updated