> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Добавление или обновление значка замка на кнопке оформления заказа Upcart
# Введение
Добавление значка замка на кнопку оформления заказа — простой, но эффективный способ повысить доверие покупателей, показав, что их платежные данные защищены. Этот знакомый символ убеждает покупателей в защите их данных, помогая им чувствовать себя увереннее в процессе оформления заказа. В этом руководстве я покажу вам, как добавить значок замка на кнопку оформления заказа с помощью CSS, что повысит безопасность и улучшит общий пользовательский опыт.
Эти шаги отлично подойдут владельцам магазинов и разработчикам с базовыми знаниями CSS. Добавив этот небольшой, но значимый визуальный элемент, вы сможете привести кнопку оформления заказа Upcart в соответствие с дизайном вашего сайта, укрепить доверие и побудить покупателей завершить покупку.
Приступим!
## Начало работы: выберите значок замка
Сначала вам нужно выбрать значок замка, который вы добавите в свой магазин. Ниже мы предлагаем несколько готовых вариантов, но вы можете использовать и собственный. Чтобы использовать свой значок, загрузите его в раздел Files вашего магазина Shopify в меню **Settings > Files** и скопируйте его URL.
В Upcart нет отдельного поля для значка на кнопке оформления заказа. Вместо этого вы вставляете HTML-тег изображения в поле **Checkout button text**, которое отображает HTML, — возьмите один из фрагментов ниже и замените его `src` на URL вашего изображения.
### Вот значки замка, доступные для выбора:
HTML для добавления:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
HTML для добавления:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
HTML для добавления:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
HTML для добавления:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
HTML для добавления:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
## Размещение значка замка:
Выбрав значок замка, перейдите в Manage All Carts > Edit > Settings > Edit copy и найдите поле **Checkout button text**. Вы можете вставить код как перед словом «Checkout», так и после него. Кроме того, здесь вы можете заменить слово «Checkout» на другое, например «Secure Checkout» или аналогичное.
## **Доступ к настройкам 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`
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.upcart-custom-lock-icon {
height: 12px;
margin-right: 6px;
}
.upcart-checkout-button {
display: flex !important;
align-items: center;
justify-content: center;
}
```
## **Заключение**
Следуя этим шагам, вы успешно добавили значок замка на кнопку оформления заказа, благодаря чему покупатели будут чувствовать себя более защищенными и уверенными при совершении покупки. Это небольшое изменение может существенно повлиять на восприятие вашего магазина, помогая укрепить доверие и улучшить общий опыт покупок.
## Нужна дополнительная помощь?
Если вам нужна помощь с настройками, мы рекомендуем обратиться к эксперту Shopify по вопросам добавления HTML, CSS и даже JavaScript в ваш cart drawer.
[Найти экспертов Shopify](https://www.shopify.com/partners/directory)