Skip to main content

​
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: Biała wypełniona ikona kłódki obok tekstu Checkout na ciemnym przycisku
HTML do dodania: Biała konturowa ikona kłódki obok tekstu Checkout na ciemnym przycisku
HTML do dodania: Biała konturowa kłódka z dziurką od klucza obok Checkout na ciemnym przycisku
HTML do dodania: Czarna wypełniona ikona kłódki obok tekstu Checkout na jasnoniebieskim przycisku
HTML do dodania: Czarna kłódka z dziurką od klucza obok Checkout na jasnoniebieskim przycisku

​
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. Edycja tekstu przycisku checkoutu w Upcart w celu umieszczenia ikony kłódki

​
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

​
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