Korzystanie z edytora brandingu w aplikacji Checkout Blocks
Możesz używać edytora brandingu w aplikacji Checkout Blocks, obsługiwanego przez Checkout Branding API, aby dostosować wygląd stron realizacji zakupu i kont bez konieczności modyfikowania kodu.
Za pomocą edytora brandingu możesz edytować kolory i elementy realizacji zakupu dla dowolnej konfiguracji realizacji zakupu. Zmiany wprowadzone w projekcie realizacji zakupu za pomocą edytora brandingu mają zastosowanie do wszystkich stron realizacji zakupu, w tym strony z podziękowaniem, strony statusu zamówienia i nowych stron kont klientów.
Aby uruchomić edytor brandingu z panelu administracyjnego Shopify, kliknij kolejno Aplikacje > Checkout Blocks, a następnie Edytor brandingu.
Na tej stronie
Dostosuj kolory realizacji zakupu
W sekcji Kolory możesz dostosować podstawowe kolory realizacji zakupu. Możesz również dostosować maksymalnie 4 schematy kolorów, które mają zastosowanie do poszczególnych sekcji, jeśli chcesz wprowadzić bardziej szczegółowe zmiany w projekcie. Możesz edytować typy kolorów, w tym kolory akcentujące (dla elementów interaktywnych, takich jak linki) i kolory marki (używane do elementów, takich jak przyciski podstawowe i dodatkowe).
Kroki:
Dostosuj kolory globalne
Z panelu administracyjnego Shopify przejdź do opcji Aplikacje > Checkout Blocks.
Kliknij opcję Edytor brandingu.
W sekcji Kolory kliknij opcję Kolory globalne.
Aby zastąpić 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.
- Wpisz kod koloru HEX w dostępnym polu.
Kliknij opcję Zapisz.
Dostosuj schematy kolorów
Z panelu administracyjnego Shopify przejdź do opcji Aplikacje > Checkout Blocks.
Kliknij opcję Edytor brandingu.
W sekcji Kolory kliknij opcję Schemat 1, Schemat 2, Schemat 3 lub Schemat 4, aby dostosować określony schemat kolorów.
Wybierz dowolne z poniższych elementów, które chcesz dostosować:
- Kolory główne
- Kontrolki formularza
- Przycisk podstawowy
- Przycisk dodatkowy
W sekcji Podstawowe 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.
- Wpisz kod koloru HEX w dostępnym polu.
Opcjonalnie: Jeśli edytujesz schemat dla opcji Kontrolki formularza, Przycisk podstawowy lub Przycisk dodatkowy, możesz również dostosować kolory dla zachowania interakcji Przy wyborze lub Po najechaniu 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.
- Wpisz kod koloru HEX w dostępnym polu.
Kliknij opcję Zapisz.
Dostosuj elementy realizacji zakupu
W sekcji Dostosowania edytora brandingu możesz edytować następujące elementy realizacji zakupu:
- Favicon: Wybierz ikonę wyświetlaną klientom na karcie przeglądarki podczas realizacji zakupu.
- Globalne: Dostosuj promień narożnika dla wszystkich elementów (pól formularza, przycisków i kart).
- Nagłówek i logo: Wybierz pozycję nagłówka na stronie realizacji zakupu, a także zdecyduj, czy wyświetlać okruszki chleba, link do koszyka i logo.
- Część główna: Zastosuj schematy projektu do głównego obszaru treści strony realizacji zakupu, w tym zdjęcia tła, szerokości obramowania i schematy kolorów.
- Podsumowanie zamówienia: Zastosuj schematy projektu do paska bocznego na stronie 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 na stronie realizacji zakupu, a także zdecyduj, czy wyświetlać regulaminy sklepu.
- Typografia: Wybierz rozmiar czcionki, rodzinę czcionek i grubość czcionki, rozmiar, kerning i wielkość liter dla maksymalnie 3 poziomów nagłówków.
- Przyciski: Wybierz wypełnienie, obramowania i style przycisków podstawowych i dodatkowych.
- Formularze: Dostosuj style dla pól formularza realizacji zakupu, takich jak pola wyboru, pola tekstowe i opcje wybrane z listy.
- Miniatury produktów: Dostosuj style obramowania i promienia narożnika dla obrazów produktów na stronie realizacji zakupu.
Kroki:
Z panelu administracyjnego Shopify przejdź do opcji Aplikacje > Checkout Blocks.
Kliknij opcję Edytor brandingu.
W sekcji Dostosowania kliknij dowolny z elementów, które chcesz dostosować, na przykład Nagłówek i logo.
Korzystając z dostępnych opcji dostosowywania, dostosuj element realizacji zakupu do swoich preferencji.
Kliknij opcję Zapisz.
Przełączanie konfiguracji realizacji zakupu
Gdy otwierasz edytor brandingu, domyślnie edytujesz konfigurację realizacji zakupu, która jest obecnie Aktywna. Możesz jednak zmienić konfigurację realizacji zakupu, którą chcesz edytować za pomocą edytora brandingu, a także tworzyć nowe konfiguracje realizacji zakupu.
Dowiedz się więcej o zarządzaniu aktywnymi i roboczymi konfiguracjami realizacji zakupu.
Kroki:
Z panelu administracyjnego Shopify przejdź do opcji Aplikacje > Checkout Blocks.
Kliknij opcję Edytor brandingu.
Kliknij nazwę bieżącej konfiguracji realizacji zakupu, aby otworzyć menu rozwijane zawierające listę aktywnej konfiguracji oraz wszelkich konfiguracji roboczych, a następnie wybierz konfigurację realizacji zakupu, którą chcesz dostosować:
- Wybierz istniejącą konfigurację, którą chcesz edytować.
- Kliknij ⊕ Utwórz nową konfigurację, aby przejść do ustawień realizacji zakupu w panelu administracyjnym Shopify.
Podgląd realizacji zakupu
Możesz wyświetlić podgląd zmian wprowadzanych w edytorze brandingu w dowolnym momencie, wybierając konfigurację realizacji zakupu, której podgląd chcesz wyświetlić, a następnie klikając opcję Podgląd. Edytor realizacji zakupu i kont zostanie uruchomiony w osobnej karcie ze wszystkimi zastosowanymi zmianami, aby można było zobaczyć, jak są one wyświetlane na stronie realizacji zakupu.
Kroki:
Z panelu administracyjnego Shopify przejdź do opcji Aplikacje > Checkout Blocks.
Kliknij opcję Edytor brandingu.
Wprowadź dowolne dostosowania kolorów lub elementów konfiguracji realizacji zakupu, które chcesz zmienić.
Kliknij opcję Podgląd.
Eksportowanie i importowanie konfiguracji realizacji zakupu
Konfiguracje realizacji zakupu można eksportować i importować za pomocą plików JSON.
Eksportowanie konfiguracji realizacji zakupu:
Z panelu administracyjnego Shopify przejdź do opcji Aplikacje > Checkout Blocks.
Kliknij opcję Edytor brandingu.
Wybierz konfigurację realizacji zakupu z zastosowanymi do niej dostosowaniami za pomocą edytora brandingu.
Kliknij kolejno opcje Więcej czynności > Eksportuj konfigurację.
Konfiguracja realizacji zakupu zostanie pobrana jako plik .json na urządzenie lokalne.
Importowanie konfiguracji realizacji zakupu:
Z panelu administracyjnego Shopify przejdź do opcji Aplikacje > Checkout Blocks.
Kliknij opcję Edytor brandingu.
Wybierz konfigurację realizacji zakupu, do której chcesz zastosować importowany profil brandingu.
Kliknij kolejno opcje Więcej czynności > Importuj konfigurację.
W oknie dialogowym Importuj branding realizacji zakupu prześlij plik JSON brandingu:
- Kliknij opcję Dodaj plik.
- Wybierz odpowiedni plik JSON ze swojego urządzenia.
- Kliknij opcję Importuj i kontynuuj.
Sprawdź wstępnie załadowaną konfigurację dostosowywania. W razie potrzeby zmodyfikuj ją.
Kliknij opcję Zapisz.
Resetowanie stylu realizacji zakupu do ustawień domyślnych
Podczas edycji koloru lub elementu realizacji zakupu za pomocą edytora brandingu możesz zresetować określoną wartość do wartości domyślnej, klikając przycisk Resetuj obok zmienionego koloru lub elementu.
W dowolnym momencie możesz zresetować cały branding konfiguracji realizacji zakupu do wartości domyślnych Shopify. Zresetowanie konfiguracji realizacji zakupu usuwa wszystkie dostosowania na wszystkich stronach edytora brandingu. Tej czynności nie można cofnąć.
Kroki:
Z panelu administracyjnego Shopify przejdź do opcji Aplikacje > Checkout Blocks.
Kliknij opcję Edytor brandingu.
Wybierz konfigurację realizacji zakupu, którą chcesz zresetować.
Kliknij Zresetuj do domyślnych.
W oknie dialogowym Zresetować do stylów domyślnych? kliknij Kontynuuj.