Skip to main content

​
Введение

Добавление значка замка на кнопку оформления заказа — простой, но эффективный способ повысить доверие покупателей, показав, что их платежные данные защищены. Этот знакомый символ убеждает покупателей в защите их данных, помогая им чувствовать себя увереннее в процессе оформления заказа. В этом руководстве я покажу вам, как добавить значок замка на кнопку оформления заказа с помощью CSS, что повысит безопасность и улучшит общий пользовательский опыт. Эти шаги отлично подойдут владельцам магазинов и разработчикам с базовыми знаниями CSS. Добавив этот небольшой, но значимый визуальный элемент, вы сможете привести кнопку оформления заказа Upcart в соответствие с дизайном вашего сайта, укрепить доверие и побудить покупателей завершить покупку. Приступим!

​
Начало работы: выберите значок замка

Сначала вам нужно выбрать значок замка, который вы добавите в свой магазин. Ниже мы предлагаем несколько готовых вариантов, но вы можете использовать и собственный. Чтобы использовать свой значок, загрузите его в раздел Files вашего магазина Shopify в меню Settings > Files и скопируйте его URL. В Upcart нет отдельного поля для значка на кнопке оформления заказа. Вместо этого вы вставляете HTML-тег изображения в поле Checkout button text, которое отображает HTML, — возьмите один из фрагментов ниже и замените его src на URL вашего изображения.

​
Вот значки замка, доступные для выбора:

HTML для добавления: Белый сплошной значок замка рядом с текстом Checkout на темной кнопке
HTML для добавления: Белый контурный значок замка рядом с текстом Checkout на темной кнопке
HTML для добавления: Белый контурный замок с замочной скважиной рядом с Checkout на темной кнопке
HTML для добавления: Черный сплошной значок замка рядом с текстом Checkout на светло-голубой кнопке
HTML для добавления: Черный замок с замочной скважиной рядом с Checkout на светло-голубой кнопке

​
Размещение значка замка:

Выбрав значок замка, перейдите в Manage All Carts > Edit > Settings > Edit copy и найдите поле Checkout button text. Вы можете вставить код как перед словом «Checkout», так и после него. Кроме того, здесь вы можете заменить слово «Checkout» на другое, например «Secure Checkout» или аналогичное. Редактирование текста кнопки оформления заказа в Upcart для размещения значка замка

​
Доступ к настройкам Custom CSS

Чтобы приступить к настройке CSS для вашего Upcart, выполните следующие шаги:
  1. Откройте приложение Upcart в панели управления.
  2. Перейдите в Cart Editor.
  3. Откройте Settings и выберите вкладку Custom CSS. Settings — это ряд вкладок, а не одна длинная страница; если вы не видите Custom CSS, она находится в разделе More settings.

​
Применение пользовательского CSS для отображения значка замка:

Оказавшись в разделе Custom CSS, скопируйте и вставьте приведенный ниже код, чтобы отобразить и разместить значок замка. Обратите внимание: чем больше значение отступа, тем меньше будет значок.
  1. Найдите область ввода CSS.
  2. Скопируйте и вставьте следующий код в область ввода CSS:
  3. Измените height в .upcart-custom-lock-icon, чтобы задать другой размер значка. Для более крупного значка замка рекомендуем 16px или 20px

​
Заключение

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

​
Нужна дополнительная помощь?

Если вам нужна помощь с настройками, мы рекомендуем обратиться к эксперту Shopify по вопросам добавления HTML, CSS и даже JavaScript в ваш cart drawer. Найти экспертов Shopify