Как добавить свои иконки соцсетей

Бесплатная инструкция по добавлению иконок Discord, Telegram или Linkedin в раздел настроек темы Dawn от Shopify.

Актуально для версии темы Dawn 15.3.0

---

Если вы хотите избежать настройки кода, попробуйте тему Shrine.

Более 120 встроенных функций, которые помогают улучшить конверсию и увеличить средний чек без необходимости настраивать дополнительные приложения и платить за подписки. Всё настраивается без кода, что экономит время и ресурсы.

Shrine − 15% скидка

Ваш промокод: VECOMLAB

1. Подготовьте иконку в формате SVG

Перейдите в Figma и скачайте иконку в формате SVG.

2. Перейдите в редактор кода

Online Store → Themes → Edit code.

3. Загрузите иконку SVG в папку assets

Убедитесь, что файл называется icon-discord.svg

После загрузки код изображения будет выглядеть следующим образом:

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

SVG-код нужно изменить, чтобы он соответствовал стилям темы (цвет, размеры, анимация). Для этого:

1. Удалите параметры width="264" и height="200" — они задают фиксированные размеры и могут нарушить адаптивность.

2. Добавьте атрибут class="icon icon-discord" — это обеспечит применение общих стилей для иконок социальных сетей.

3. Удалите fill="none" и сразу после тега <path укажите fill="currentColor" — это позволит иконке автоматически подстраиваться под цвет родительского элемента.

Новый SVG-код (скопируйте его и вставьте в Shopify, заменив исходный код):

<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. Откройте файл social-icons.liquid в папке snippets

Перед тегом </ul> вставьте следующий код и сохраните изменения:

{%- 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. Откройте файл settings_schema.json в папке config

Найдите в файле строку:

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

Теперь найдите блок "settings": [. В этом массиве перечислены все доступные социальные сети.

Вставьте код в конец списка, перед закрывающей скобкой ].

{
    "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"
}

Важно: не забудьте поставить запятую перед добавленным кодом, если это последний элемент! Без неё вы получите ошибку при сохранении. На скриншоте это показано стрелкой.

6. Откройте файл en.default.json в папке locales

Найдите в файле первое упоминание "links": { , где перечислены все доступные социальные сети.

Найдите в файле первое упоминание блока:

"links": {

Внутри него перечислены все доступные социальные сети.

Вставьте следующую строку:

"discord": "Discord"

Не забудьте поставить запятую перед этой строкой, если добавляете её не первой в списке. На скриншоте это показано стрелкой.

7. Откройте файл en.default.schema.json в папке locales

Найдите в файле блок:

"social-media": {

Вставьте следующий код:

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

Обратите внимание:

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

Этот текст отображается только в интерфейсе настройки темы — ваши пользователи не увидят его на сайте.

8. Откройте настройки темы

Theme settings → Social media → Discord.

Добавьте ссылку на ваш Discord-сервер и сохраните изменения.

9. Откройте файл header.liquid в папке sections

Вы можете столкнуться с проблемой: новая иконка не отображается в шапке сайта (header).

Чтобы это исправить:

1. Найдите строку, которая начинается с:

{% if settings.social

1. В конец этой строки вставьте следующий код:

 or settings.social_discord_link != blank

1. Далее найдите строку:

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

1. После неё вставьте следующий код:

{{ settings.social_discord_link | json }}

1. Сохраните изменения.

10. Откройте файл header-drawer.liquid в папке sections

Вы также можете столкнуться с проблемой: новая иконка не отображается в мобильной версии сайта, в меню, которое открывается при нажатии на гамбургер.

Чтобы это исправить:

1. Найдите в файле строку:

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

1. Перед закрывающим тегом </ul> вставьте следующий код:

{%- 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. Сохраните изменения.

Теперь ваша новая иконка успешно добавлена на сайт.

Ответы на вопросы

Как добавить другие иконки?

Вы можете сделать это аналогичным образом. Просто замените discord или Discord в соответствующих участках кода на нужное название другой социальной сети.

---

Нужна помощь с настройкой? Свяжитесь с нами — мы всё сделаем за вас.