Korzystanie z edytora brandingu w Checkout Blocks

Możesz użyć edytora brandingu w Checkout Blocks, obsługiwanego przez Checkout Branding API w celu dostosowania estetyki stron realizacji zakupu i kont bez konieczności modyfikowania kodu.

Możesz użyć edytora brandingu, aby edytować kolory i elementy realizacji zakupu dla dowolnej konfiguracji realizacji zakupu. Zmiany wprowadzone w projektowaniu realizacji zakupu za pomocą edytora brandingu mają zastosowanie do wszystkich stron realizacji zakupu, w tym strony z podziękowaniami, strony statusu zamówienia i nowych stron kont klientów.

Aby uruchomić edytor brandingu w panelu administracyjnym Shopify, kliknij opcję Aplikacje > Checkout Blocks, a następnie kliknij Edytor brandingu.

Na tej stronie

Dostosuj kolory strony realizacji zakupu

W sekcji Kolory możesz dostosować podstawowe kolory strony realizacji zakupu. Możesz także dostosować do 4 schematów kolorów, które mają zastosowanie do poszczególnych sekcji, jeśli chcesz wprowadzić więcej zmian w swoim projekcie. Możesz edytować typy kolorów, w tym kolory akcentów (dla elementów interaktywnych, takich jak linki) i kolory marki (używane dla elementów takich jak przyciski główne i dodatkowe).

Kroki:

Customize global colors

W panelu administracyjnym Shopify kliknij opcję Aplikacje > Checkout Blocks.
Kliknij Edytor brandingu.
W sekcji Kolory kliknij Kolory globalne.
Aby nadpisać dowolny istniejący kolor realizacji zakupu, w sekcji Kolory globalne kliknij ikonę ⊕, a następnie wybierz kolor, wykonując jedną z następujących czynności:
- Użyj selektora kolorów, aby wybrać kolor.
- Wprowadź kod koloru HEX w dostępnym polu.
Kliknij opcję Zapisz.

Customize color schemes

W panelu administracyjnym Shopify kliknij opcję Aplikacje > Checkout Blocks.
Kliknij Edytor brandingu.
W sekcji Kolory kliknij Schemat 1, Schemat 2, Schemat 3, lub Schemat 4, aby dostosować określony schemat kolorów.
Wybierz dowolny z następujących składników, które chcesz dostosować:
- Kolory główne
- Kontrolki formularza
- Przycisk główny
- Przycisk dodatkowy
W sekcji Baza kliknij ikonę ⊕ obok typu koloru, który chcesz dostosować, a następnie wybierz kolor, wykonując jedną z następujących czynności:
- Użyj selektora kolorów, aby wybrać kolor.
- Wprowadź kod koloru HEX w dostępnym polu.
Opcjonalnie: Jeśli edytujesz schemat dla Elementów kontrolnych formularza, Przycisku głównego lub Przycisku dodatkowego, możesz także dostosować kolory dla zachowania interakcji Wł. wybór lub Wł. najechanie kursorem. Kliknij ikonę ⊕ obok typu koloru, który chcesz dostosować, a następnie wybierz kolor, wykonując jedną z następujących czynności:
- Użyj selektora kolorów, aby wybrać kolor.
- Wprowadź kod koloru HEX w dostępnym polu.
Kliknij opcję Zapisz.

Dostosuj elementy realizacji zakupu

W sekcji Dostosowania w edytorze brandingu możesz edytować następujące elementy realizacji zakupu:

Ikona Favicon: Wybierz ikonę, która wyświetla się klientom na karcie przeglądarki podczas realizacji zakupu.
Global: Dostosuj promień zaokrąglenia naroża dla wszystkich elementów (dane wejściowe formularza, przyciski i karty).
Nagłówek i logo: Wybierz pozycję nagłówka podczas realizacji zakupu, a także określ, czy mają być wyświetlane znaki takie jak okruszki chleba, link koszyka i logo.
Główny: Zastosuj schematy projektowe do głównego obszaru realizacji zakupu, w tym zdjęć tła, szerokości obramowania i schematów kolorów.
Podsumowanie zamówienia: Zastosuj schematy projektowania do paska bocznego realizacji zakupu, zawierającego podsumowanie zamówienia klienta, w tym zdjęcia tła, szerokości obramowania i schematy kolorów.
Stopka: Wybierz szerokość stopki podczas realizacji zakupu, a także to, czy mają być wyświetlane zasady sklepu.
Typografia: Wybierz rozmiar czcionki, rodzinę czcionek i grubość czcionki, rozmiar, kerning i rozmiar liter dla maksymalnie 3 poziomów nagłówków.
Przyciski: Wybierz wypełnienie, obramowania i style przycisków głównych i dodatkowych.
Formularze: Dostosuj style dla wejść do formularza realizacji zakupu, takich jak pola wyboru, pola tekstowe i wybrane opcje z listy.
Miniatury produktów: Dostosuj style obramowania i promienia rogu dla obrazów produktów na stronie realizacji zakupu.

Kroki:

W panelu administracyjnym Shopify kliknij opcję Aplikacje > Checkout Blocks.
Kliknij Edytor brandingu.
W sekcji Dostosowania kliknij dowolny z elementów, które chcesz dostosować, np. Nagłówek i logo.
Korzystając z dostępnych opcji dostosowywania, dostosuj element realizacji zakupu do swoich preferencji.
Kliknij opcję Zapisz.

Przełącz konfiguracje realizacji zakupu

Po otwarciu edytora brandingu, edytujesz konfigurację realizacji zakupu, która jest obecnie domyślnie Aktywna. Możesz jednak zmienić konfigurację realizacji zakupu, którą chcesz edytować za pomocą edytora brandingu, a także utworzyć nowe konfiguracje realizacji zakupu.

Dowiedz się więcej o zarządzaniu konfiguracjami realizacji zakupu w wersji aktywnej i roboczej.

Kroki:

W panelu administracyjnym Shopify kliknij opcję Aplikacje > Checkout Blocks.
Kliknij Edytor brandingu.
Kliknij nazwę bieżącej konfiguracji realizacji zakupu, aby otworzyć menu rozwijane zawierające listę aktywnych konfiguracji, a także wszelkie wersje robocze konfiguracji, a następnie wybierz konfigurację realizacji zakupu, którą chcesz dostosować:
- Wybierz istniejącą konfigurację, którą chcesz edytować.
- Kliknij ⊕ Create new configuration (Utwórz nową konfigurację), aby nastąpiło przekierowanie do ustawień Realizacji zakupu w panelu administracyjnym Shopify.

Wyświetl podgląd realizacji zakupu

Możesz wyświetlić podgląd zmian wprowadzonych w edytorze brandingu w dowolnym momencie, wybierając konfigurację realizacji zakupu, którą chcesz wyświetlić, a następnie klikając Podgląd. Edytor realizacji zakupu i kont uruchamia się na osobnej karcie ze wszystkimi zastosowanymi zmianami, dzięki czemu możesz wyświetlić podgląd ich wyświetlania na stronie realizacji zakupu.

Kroki:

W panelu administracyjnym Shopify kliknij opcję Aplikacje > Checkout Blocks.
Kliknij Edytor brandingu.
Dostosuj kolory konfiguracji strony realizacji zakupu lub elementy strony realizacji zakupu.
Kliknij Podgląd.

Eksportowanie i importowanie konfiguracji strony realizacji zakupu

Możesz eksportować i importować konfiguracje strony realizacji zakupu za pomocą plików JSON.

Eksportuj konfigurację realizacji zakupu:

W panelu administracyjnym Shopify kliknij opcję Aplikacje > Checkout Blocks.
Kliknij Edytor brandingu.
Wybierz konfigurację realizacji zakupu z zastosowanymi dostosowaniami za pomocą edytora brandingu.
Kliknij Więcej czynności > Export configuration (Eksportuj konfigurację).

Konfiguracja realizacji zakupu jest pobierana jako .json na urządzenie lokalne.

Importuj konfigurację realizacji zakupu:

W panelu administracyjnym Shopify kliknij opcję Aplikacje > Checkout Blocks.
Kliknij Edytor brandingu.
Wybierz konfigurację realizacji zakupu, do której chcesz zastosować zaimportowany profil brandingu.
Kliknij opcję Więcej czynności > Importuj konfigurację.
W oknie dialogowym Importuj branding realizacji zakupu załaduj plik JSON brandingu:
1. Kliknij Dodaj plik.
2. Wybierz odpowiedni plik JSON z urządzenia.
3. Kliknij opcję Importuj i kontynuuj.
Sprawdź wstępnie załadowaną konfigurację dostosowania. Zmodyfikuj ją w zależności od potrzeb.
Kliknij opcję Zapisz.

Przywróć styl realizacji zakupu do stylu domyślnego

Edytując kolor lub element realizacji zakupu za pomocą edytora brandingu, możesz przywrócić konkretną wartość do wartości domyślnej, klikając przycisk Reset obok zmienionego koloru lub elementu.

W dowolnym momencie możesz zresetować cały branding konfiguracji strony realizacji zakupu do wartości domyślnych Shopify. Zresetowanie konfiguracji strony realizacji zakupu powoduje wyczyszczenie wszystkich dostosowań na wszystkich stronach edytora brandingu. Tej czynności nie można cofnąć.

Kroki:

W panelu administracyjnym Shopify kliknij opcję Aplikacje > Checkout Blocks.
Kliknij Edytor brandingu.
Wybierz konfigurację strony realizacji zakupu, którą chcesz zresetować.
Kliknij przycisk Przywróć ustawienia domyślne.
W oknie dialogowym Przywrócić style domyślne? kliknij przycisk Kontynuuj.