Кнопка Telegram на сайте InSales: код для вставки

Покупатель хочет задать вопрос прямо сейчас, а ваша форма обратной связи спрятана в подвале. Лечится одной кнопкой в углу экрана: никаких приложений и подписок, только код темы.

Что получится. Круглая кнопка Telegram, которая висит в правом нижнем углу на всех страницах и ведёт в ваш аккаунт из настроек магазина. На телефоне она сама поднимается над нижней панелью магазина.

Что понадобится

доступ к редактору кода темы вашего магазина;
ссылка на Telegram, указанная в настройках мессенджеров темы (из этого поля её берёт подвал, мы возьмём её же), поэтому ник в код вписывать не придётся;
пять минут и желание не ломать всё подряд, поэтому сначала копия файла.

Сначала копия. Перед правкой скопируйте содержимое файла layouts.layout.liquid в заметки. Если что-то пойдёт не так, вернёте как было за десять секунд.

Вставьте кнопку

Откройте в редакторе кода темы файл templates/layouts.layout.liquid и найдите в самом низу закрывающий тег </body>. Сразу перед ним вставьте блок ниже. Ссылку подставлять не нужно: код сам берёт Telegram из настроек магазина, а если там пусто, кнопка просто не показывается.

{% assign tg_link = '' %}
{% for messenger in block_lists.system--messengers.blocks %}
  {% if messenger.handle contains 'telegram' and messenger.link != blank %}
    {% assign tg_link = messenger.link %}
    {% break %}
  {% endif %}
{% endfor %}
{% if tg_link != blank %}
<a class="tg-fab" href="{{ tg_link | escape }}" target="_blank" rel="noopener noreferrer" aria-label="Написать в Telegram">
  <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor"
       stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"
       aria-hidden="true" focusable="false">
    <path d="M21.5 3 2.6 10.3l6.1 2.3 2.4 6.2 3.3-3.9 4.5 3.3L21.5 3Z"/>
    <path d="m8.7 12.6 12.8-9.6"/>
  </svg>
</a>
<style>
  .tg-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: #229ed9; color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
    transition: transform .15s;
  }
  .tg-fab:hover { transform: scale(1.06); }
  .tg-fab:focus-visible { outline: 3px solid #1c2d3a; outline-offset: 3px; }
  /* на телефоне поднимаем над нижней панелью магазина */
  @media (max-width: 767px) { .tg-fab { bottom: 76px; } }
</style>
{% endif %}

Нажмите «Сохранить» и обновите страницу магазина. Кнопка должна появиться справа внизу. Если её не видно, проверьте две вещи: блок вставлен до </body>, а не после, и Telegram заполнен в настройках мессенджеров темы.

Показывайте её только там, где нужно

Не хотите, чтобы кнопка мозолила глаза в корзине и оформлении заказа? Оберните блок условием: тогда она появится только в каталоге и карточках товаров.

{% if template contains 'product' or template contains 'collection' %}
  <!-- сюда вставьте блок с кнопкой из шага 1 -->
{% endif %}

Про переменную. template хранит тип открытой страницы: product, collection, cart и так далее. Условие contains нужно, потому что у некоторых страниц к названию что-то добавлено.

Подгоните под себя

Цвет, размер и положение меняются в CSS. Например, кнопка слева и в фирменном цвете:

.tg-fab {
  right: auto;
  left: 20px;
  background: #ff6429; /* ваш акцентный цвет */
}

Хотите вместо кнопки полноценный чат с историей обращений? Это уже другая история, и у нас есть что показать в каталоге. А если снова «что-то не так», напишите в чат на этом сайте.

Плавающая кнопка Telegram на сайте InSales за 5 минут

Что понадобится

Вставьте кнопку

Показывайте её только там, где нужно

Подгоните под себя