Промоматериалы для работы с рассрочками и кредитами в онлайн-магазине

Как Т⁠-⁠Банк предоставляет промоматериалы для рассрочек и кредитов?

Промоматериалы можете взять из гайда «Материалы для коммуникации с клиентами» PDF.

В нем найдете:

• макеты баннеров, шрифты, логотипы, кнопки и другие элементы;
• рекомендации для размещения рекламной информации;
• шаблоны для email-рассылки, SMM и другие материалы.

Как скачать материалы из Фигмы?

Как это сделать на примере с баннерами:

1. В гайде «Материалы для коммуникации с клиентами» перейдите на страницу 15 и нажмите на ссылку в строке «Макеты баннеров». Гайд «Материалы для коммуникации с клиентами» PDF

   

   Откроется Фигма. Если не работали в этом редакторе, сначала зарегистрируйтесь в нем.

2. Выберите один или несколько макетов. Справа прокрутите вниз до блока Export. В выпадающем списке выберите формат для скачивания, например SVG, и нажмите Export.

   

Готово, макет сохранится на компьютер. Если нужно, измените макет в любом фоторедакторе. Соблюдайте ограничения.

Как рассказать на сайте про рассрочку и кредит?

Для этого добавьте различные элементы интеграции на такие страницы сайта:

• на главную;
• в каталог товаров;
• в карточку товара;
• в чекаут и корзину;
• на посадочную страницу.

Элементы интеграции и примеры того, как они могут выглядеть на сайте, найдете в гайде «Материалы для коммуникации с клиентами» PDF.

Какие материалы для сайта есть в гайде с материалами для коммуникации?

Мы приложили все шаблоны, которые могут понадобиться: макеты баннеров, POS‑материалы, логотипы, материалы для страниц сайта. Все это можно скачать из Фигмы и Дропбокса по ссылкам из гайда. PDF

На странице 13 — готовый макет посадочной страницы с рекомендованными блоками и обязательной по законодательству информацией. Это юридические сноски, которые магазин обязан размещать, когда продает в рассрочку или кредит.

На этой же странице есть ссылка с макетами посадочных страниц, в том числе для мобильной версии. На странице с макетами также написали руководство, как использовать блоки и что можно изменить под себя. Например, дизайн списка товаров можно поменять, а юридические сноски — нет.

На странице 16 есть кнопки и теги, а также ссылка на исходники в Фигме. Теги — это некликабельные маркеры, которые сообщают о возможности купить в рассрочку или кредит. Их можно разместить рядом с названием или фотографией товара в карточке, меню и рекомендациях.

В гайде найдете рекомендованные варианты кнопок и тегов, а по ссылке — дополнительные.

Промоматериалы из гайда открываются в Фигме, на Яндекс- и Гугл⁠-⁠диске. Чтобы скачать материалы из Фигмы, используйте инструкцию.

Как правильно использовать промоматериалы из гайда?

В гайде с материалами для коммуникации собраны варианты кнопок и баннеров, оформленные по стандартам Т‑Банка. Вы можете менять макеты промоматериалов, соблюдая несколько ограничений. Гайд с материалами для коммуникации PDF

Как поставить логотип Т‑Банка на своем баннере?

Если ни один баннер из гайда с материалами для коммуникации вам не подходит, вы можете создать свой и разместить на нем логотип Т‑Банка в любом из углов композиции. Гайд с материалами для коммуникации PDF

При этом важно соблюдать несколько правил.

Как правильно использовать логотип Т‑Банка?

Ориентируйтесь на гайд с материалами для коммуникации. Если ваша ситуация в нем не описана, то достаточно применять несколько правил. Гайд с материалами для коммуникации PDF

Соблюдать расстояние вокруг логотипа

Используйте правило охранного поля, единицей отсчета которого служит высота щита.

Например, высота щита — 10 px. Значит, сверху, слева и справа должно быть расстояние 0,6 × 10 = 6 px, снизу — 0,5 × 10 = 5 px. Между щитом и названием бренда — 0,2 × 10 = 2 px.

Выбрать логотип

Есть три вида логотипа:

• Основной — состоит из слова «банк» и фирменного щита. Используйте, если на сайте достаточно места для размещения.
• Сокращенный — включает только фирменный щит. Используйте, если нужно разместить логотип в ограниченных пространствах или важно не использовать слово «банк».
• Шрифтовый — включает только название «Т‑Банк». Используйте, если на сайте нельзя поставить щит.

Избегать типичных ошибок

При использовании логотипов Т‑Банка нельзя:

• менять композицию внутри логотипа;
• менять пропорцию логотипа: растягивать его по ширине или длине;
• применять к логотипу любые эффекты;
• нарушать охранное поле;
• ставить логотип на фотографический фон;
• ставить логотип под углом;
• красить части логотипа в другой цвет;
• ставить логотип на градиентный фон;
• использовать текстовую часть без герба.

Что делать, если материалы не подходят?

Напишите об этом нам на почту tcbpromohelp@tbank.ru с темой письма «Вопрос по материалам для коммуникации. С вами свяжутся сотрудники банка и помогут решить вопрос.

Как вставить баннер Т‑Банка на сайт?

Инструкция ниже поможет вставить три популярных вида баннеров. Если вы захотите использовать другие баннеры из гайда с материалами для коммуникации, понадобится помощь разработчика. Гайд с материалами для коммуникации PDF

Потребуется выполнить четыре шага:

1. Если у вас самописный сайт, откройте файл с его HTML‑кодом в любом редакторе кода. Если ваш сайт сделан на Тильде, Вордпрессе, 1С‑Bitrix, конструкторе сайтов от Т‑Банка или в любой другой CMS — откройте редактор кода вашей CMS.
2. Вставьте код с файлом стилей из поля ниже в любое место между тегами <head> и </head>:

   <link rel="stylesheet" href="https://forma.tbank.ru/resources/static/banners/styles.css" />

3. Выберите нужный вид баннера и вставьте его код между тегами <body> и </body>. Расположение баннера на сайте будет зависеть от того, где вы разместили его код.

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

   Код для вставки вертикального баннера 675 × 1200 px

   <div class="tcb-banner tcb-banner--sm" style="width: 675px">

   • <div class="tcb-banner__inner">

     • <div class="tcb-banner__content">

       • <img

         • class="tcb-banner__logo"
         • src="https://cdn.tbank.ru/static/pfa-multimedia/images/c6185f0a-5316-4b4f-8184-20dd95bae5b0.svg"
         • alt="T‑Bank logo"
       • />
       • <p class="tcb-banner__title">В рассрочку удобнее</p>
       • <p class="tcb-banner__subtitle">Оформите на сайте<br/>за 2 минуты</p>
       • <p class="tcb-banner__disclaimer">0+, АО «ТБанк», лицензия № 2673</p>
     • </div>
     • <img

       • class="tcb-banner__3d"
       • src="https://forma.tbank.ru/resources/static/banners/backgrounds/1.png"
       • alt="T‑Bank banner background"
     • />
     • <div class="tcb-banner__gradient"></div>
   • </div>

   </div>

   Этот HTML‑код добавит на ваш сайт такой баннер размером 675 × 1200 px.

   

   Код для вставки квадратного баннера 1200 × 1200 px

   <div class="tcb-banner tcb-banner--md" style="width: 1200px">

   • <div class="tcb-banner__inner">

     • <div class="tcb-banner__content">

       • <img

         • class="tcb-banner__logo"
         • src="https://cdn.tbank.ru/static/pfa-multimedia/images/c6185f0a-5316-4b4f-8184-20dd95bae5b0.svg"
         • alt="T‑Bank logo"
       • />
       • <p class="tcb-banner__title">В рассрочку удобнее</p>
       • <p class="tcb-banner__subtitle">Оформите на сайте<br/>за 2 минуты</p>
       • <p class="tcb-banner__disclaimer">0+, АО «ТБанк», лицензия № 2673</p>
     • </div>
     • <img

       • class="tcb-banner__3d"
       • src="https://forma.tbank.ru/resources/static/banners/backgrounds/1.png"
       • alt="T‑Bank banner background"
     • />
     • <div class="tcb-banner__gradient"></div>
   • </div>

   </div>

   Этот HTML‑код добавит на ваш сайт такой баннер размером 1200 × 1200 px.

   

   Код для вставки горизонтального баннера 1920 × 1080 px

   <div class="tcb-banner tcb-banner--lg" style="width: 1920px">

   • <div class="tcb-banner__inner">

     • <div class="tcb-banner__content">

       • <img

         • class="tcb-banner__logo"
         • src="https://cdn.tbank.ru/static/pfa-multimedia/images/c6185f0a-5316-4b4f-8184-20dd95bae5b0.svg"
         • alt="T‑Bank logo"
       • />
       • <p class="tcb-banner__title">В рассрочку удобнее</p>
       • <p class="tcb-banner__subtitle">Оформите на сайте<br/>за 2 минуты</p>
       • <p class="tcb-banner__disclaimer">0+, АО «ТБанк», лицензия № 2673</p>
     • </div>
     • <img

       • class="tcb-banner__3d"
       • src="https://forma.tbank.ru/resources/static/banners/backgrounds/1.png"
       • alt="T‑Bank banner background"
     • />
     • <div class="tcb-banner__gradient"></div>
   • </div>

   </div>

   Этот HTML‑код добавит на ваш сайт такой баннер размером 1920 × 1200 px.

   

4. Сохраните HTML‑файл и загрузите его на хостинг или нажмите «Сохранить» в админке вашей CMS.

Готово, вы разместили баннер на своем сайте. Если вас не устраивает текст или изображение на баннере, его можно изменить.

Как изменить баннер Т‑Банка на сайте?

Ваши действия зависят от того, что вы хотите поменять.