Телефон

В этой статье мы рассмотрим:

• Как изменить номер телефона на главной странице магазина
• Как добавить 2 и более номеров сразу
• Как добавить 2 и более номеров сразу для шаблона Modern
• Как задать цвет для номера телефона на главной
• Как изменить размер шрифта телефона
• Как изменить шрифта телефона
• Маска телефона
• Как указать номер телефона для мобильной версии
• Как указать номер телефона в зависимости от города
• Как сделать номер телефона кликабельным

По умолчанию, телефон на главной странице интернет-магазина на платформе AdvantShop выглядит следующим образом (рис.1):

Рисунок 1.

Указанный телефон магазина на видном месте – очень важный аспект для работы интернет-магазина.

Мы рассмотрим некоторые базовые вещи при редактировании номера телефона - например, как изменить сам номер, как задать цвет номера и прочее.

 

Как изменить номер телефона на главной странице магазина

Для этого в клиентской части переходим к трансформеру дизайна (рис.2).

Рисунок 2.

Далее переходим на вкладку "Настройки дизайна" и пролистываем вниз к блоку настроек "Телефоны" (рис.3).


Рисунок 3.

Здесь можем добавить или изменить номер телефона на главной странице (рис.4).

Рисунок 4.

Так же возможно добавить и изменить номер телефона через панель администрирования.
Для этого переходим в панель администрирования в пункт меню "Настройки - Общие настройки", далее во вкладке "О магазине" находим поле "Телефон" (рис.5).

Рисунок 5.

Собственно, это и есть наш номер телефона. В этом поле мы задаем тот номер, который нам нужен.

Задаём номер, к примеру, +7 (495) 123-00-00, сохраняем настройки, нажав кнопку "Сохранить" вверху страницы и смотрим на результат.

Телефон изменился (рис.6).

Рисунок 6.

 

Как добавить 2 и более номеров сразу

Возможно вывести в шапке сайта несколько номеров телефона.

Указать несколько номеров телефона можно через панель администрирования, пункт меню "Настройки - Общие настройки", далее во вкладке "О магазине" находим поле "Телефон".

Чтобы задать два номера, в данном пропишем 2 номера телефона, и между ними нужно добавить <br>.

Получится вот так:

+7 (495) 000 00 00<br>+7 (495) 222 88 88

Если нужно разукрасить телефоны, то код будет точно таким же, как и описано выше, но вначале нужно добавить <span style="color:#2798d2;"> и в конце </span>

Например, вот так:

<span style="color:#2798d2;">+7 (495) 000 00 00</span><br><span style="color:#2798d2;">+7 (495) 222 88 88</span>

Сохраняем (рис.7).

Рисунок 7.

Смотрим как отображается на главной странице (рис.8).

Рисунок 8.

И с цветом (рис.9).

Рисунок 9.

 

Как добавить 2 и более номеров сразу для шаблона Modern

У шаблона Modern для шапки сайта Тип 1, Тип 2 и Тип 3 (рис. 10) (в случае других шаблонов это зависит от вариативности конкретного шаблона, имеет ли он такую возможность) имеется другой способ указания нескольких номеров телефона.

Рисунок 10.

Несколько номеров на шаблоне Modern можно реализовать через трансформер дизайна в клиентской части, разместив дополнительный номер телефона (рис. 11-12).

Рисунок 11.

Рисунок 12.

Отлично, изменения применились.

Мы рассмотрели возможность шаблона Modern. В случае других шаблонов это зависит от вариативности конкретного шаблона, имеет ли он такую возможность

 

Как задать цвет для номера телефона на главной

Для этого так же переходим в панель администрирования, в пункт меню "Настройки – Общие настройки", далее во вкладке "О магазине" находим поле "Телефон".

Чтобы задать цвет, мы в это поле пропишем HTML-код с указанием цвета.

Например, вот такой:

<span style="color:#2798d2;"> …тут номер телефона… </span>

В нашем примере с номером получится вот так:

<span style="color:#2798d2;">+7 (495) 000-00-00</span>

Указываем (рис.13).

Рисунок 13.

Сохраняем и смотрим в клиентской части (рис.14).

Рисунок 14.

Цвет применился, отлично.

 

Как изменить размер шрифта телефона

Чтобы изменить размер шрифта, переходим в панель администрирования, в пункт меню "Настройки - Общие настройки", далее во вкладке "О магазине" находим поле "Телефон".

В поле пропишем HTML-код с указанием размера. Добавим в стили ещё один атрибут: font-size:32px;

Получится, вот так:

<span style="color:#2798d2; font-size:32px;">+7 (495) 000-00-00</span>

Указываем (рис.15).

Рисунок 15.

Проверяем (рис.16).

Рисунок 16.

Телефон теперь выглядит несколько крупно, но принцип работы понятен: можно менять размер, указывая не 32px, а скажем, 30px, 28px и т.д.

Как изменить шрифт телефона

Переходим в панель администрирования, в пункт меню "Настройки - Общие настройки", далее во вкладке "О магазине" находим поле "Телефон".

Чтобы задать цвет, мы в это поле пропишем HTML-код с указанием размера.

Добавим в стили ещё один атрибут font-family: Times New Roman; (атрибуты между собой разделяются через точку с запятой).

Получится, вот так:

<span style="color:#2798d2; font-size:16px; font-family: Times New Roman;">+7 (495) 000-00-00</span>

Изменяем (рис.17).

Рисунок 17.

Проверяем (рис.18).

Рисунок 18.

Отлично, шрифт изменился.

 

Маска телефона

Например, при регистрации (рис.19) и оформлении заказа (рис.20) в поле контактный телефон используется маска телефона, для того, чтобы клиенты точно ввели все цифры телефона. Особенно это необходимо, если клиенты не только из России, но и из других стран. 

Рисунок 19.

Рисунок 20.

Для того чтобы подключть маску, необходимо перейти в панель администрирования, пункт меню "Настройки - Системные настройки", далее выбираем вкладку "Общие", активируем настройку "Использовать маску ввода для телефона" (рис.21). 

Рисунок 21.

Маска подстраивается под страну при вводе номера. Например, если начинаем вводить номер Белорусии, маска выводится от формата номера (рис.22).

Рисунок 22.

Как указать номер телефона для мобильной версии

Номер телефона указывается в разделе "Настройки - Общие настройки" поле "Основной телефон в числовом формате" (рис. 23).

Рисунок 23.

Как указать номер телефона в зависимости от города

Для этого переходим в пункт меню "Настройки - Системные настройки", вкладка "Страны и Города", на открывшейся странице находим необходимую страну (рис.24).

Рисунок 24.

Далее находим область и переходим в редактирование (рис.25).

Рисунок 25.

На открывшейся странице в столбце "Номер телефона", либо "Номер телефона в мобильной версии" для необходимых городов можем задать номера телефонов (рис.26). В этом случае номер телефона будет меняться от города клиента.

Рисунок 26.

Как сделать номер телефона кликабельным

Для этого так же переходим в панель администрирования, в пункт меню "Настройки – Общие настройки", далее во вкладке "О магазине" находим поле "Телефон".

Чтобы сделать номер телефона кликабельным в это поле пропишем следующий HTML-код:
 

<a href="tel:+7 (495) 000-00-00;">+7 (495) 000-00-00</a>

Указываем (рис.27).


Рисунок 27.

Проверяем (рис.28).

Рисунок 28.

Все готово. Мы рассмотрели основные настройки номера телефона в магазине.