> ## 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.
# Dodawanie lub aktualizowanie ikony kłódki na przycisku checkoutu Upcart
# Wprowadzenie
Dodanie ikony kłódki do przycisku checkoutu to prosty, a zarazem skuteczny sposób na zwiększenie zaufania klientów — pokazuje, że ich dane płatnicze są bezpieczne. Ten znajomy symbol uspokaja klientów co do ochrony ich danych, dzięki czemu czują się pewniej podczas procesu zakupu. W tym poradniku pokażę Ci, jak dodać ikonę kłódki do przycisku checkoutu za pomocą CSS, co zwiększy poczucie bezpieczeństwa i poprawi ogólne doświadczenie użytkownika.
Te kroki są idealne dla właścicieli sklepów lub deweloperów z podstawową znajomością CSS. Dodając ten drobny, ale znaczący element wizualny, możesz dopasować przycisk checkoutu Upcart do wyglądu swojej strony, budując zaufanie i zachęcając klientów do finalizacji zakupów.
Zaczynajmy!
## Na początek: wybierz ikonę kłódki
Najpierw musisz wybrać ikonę kłódki, którą dodasz do swojego sklepu. Poniżej udostępniamy kilka gotowych, ale możesz też użyć własnej. Aby użyć własnej, prześlij ją do sekcji Files w swoim sklepie Shopify w **Settings > Files** i skopiuj jej adres URL.
W Upcart nie ma pola ikony dla przycisku checkoutu. Zamiast tego wklejasz tag HTML obrazka w polu **Checkout button text**, które renderuje HTML — weź jeden z poniższych fragmentów i podmień jego `src` na własny adres URL.
### Oto ikony kłódki, które udostępniamy do wyboru:
HTML do dodania:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
HTML do dodania:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
HTML do dodania:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
HTML do dodania:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
HTML do dodania:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```
## Umieszczanie ikony kłódki:
Po wybraniu ikony kłódki przejdź do Manage All Carts > Edit > Settings > Edit copy i znajdź pole **Checkout button text**. Możesz wkleić kod przed słowem "Checkout" lub po nim. Dodatkowo w tym miejscu możesz zmienić słowo "Checkout" na inne, na przykład "Secure Checkout" lub podobne.
## **Dostęp do ustawień Custom CSS**
Aby rozpocząć dostosowywanie CSS w swoim Upcart, wykonaj następujące kroki:
1. Otwórz aplikację **Upcart App** w swoim panelu.
2. Przejdź do **Cart Editor**.
3. Otwórz **Settings** i wybierz zakładkę **Custom CSS**. Settings to rząd zakładek, a nie jedna długa strona — jeśli nie widzisz Custom CSS, znajdziesz je pod **More settings**.
### **Zastosowanie Custom CSS, aby wyświetlić ikonę kłódki:**
Gdy znajdziesz się w sekcji Custom CSS, skopiuj i wklej poniższy kod, aby wyświetlić i umieścić ikonę kłódki. Pamiętaj, że im większa wartość paddingu, tym mniejsza będzie ikona.
1. Znajdź pole wprowadzania CSS.
2. Skopiuj i wklej poniższy kod do pola wprowadzania CSS:
3. Dostosuj `height` w `.upcart-custom-lock-icon`, aby zmienić rozmiar ikony. Dla większej kłódki polecamy `16px` lub `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;
}
```
## **Podsumowanie**
Wykonując te kroki, dodałeś ikonę kłódki do przycisku checkoutu, dzięki czemu Twoi klienci czują się bezpieczniej i pewniej podczas zakupów. Ta drobna zmiana może znacząco wpłynąć na postrzeganie Twojego sklepu, pomagając budować zaufanie i poprawiać ogólne doświadczenie zakupowe.
## Nadal potrzebujesz pomocy?
Jeśli potrzebujesz pomocy przy dostosowaniach, zalecamy konsultację z ekspertem Shopify w zakresie dodawania HTML, CSS, a nawet JavaScriptu do Twojego cart drawera.
[Zobacz ekspertów Shopify](https://www.shopify.com/partners/directory)