Skip to main content
Ustawienia brandingu pozwalają dostosować wygląd i styl twojego checkoutu — od kolorów i typografii po przyciski, pola formularza i układ strony. Te narzędzia ułatwiają dopasowanie designu checkoutu do tożsamości twojej marki.

​
Jak uzyskać dostęp

Otwórz pulpit Checkout w Aftersell i kliknij Edit branding u góry strony.
Edytowanie brandingu w tym miejscu wymaga planu Shopify Plus. Shopify pozwala aplikacjom odczytywać i zapisywać branding checkoutu wyłącznie na planie Plus, więc na innych planach tych ustawień nie da się zapisać. Jeśli twój sklep nie jest na Plus, wprowadź te same zmiany w edytorze checkoutu Shopify: Settings → Checkout → Customize w panelu administracyjnym Shopify.
Pulpit Checkout Aftersell ze strzałką wskazującą przycisk Edit branding Edytor jest podzielony na trzy grupy: Design system, Customizations i Advanced.

​
System projektowy

Ustawienia systemu projektowego to fundament. Komponenty w całym checkoucie dziedziczą z nich wartości, chyba że bardziej szczegółowe ustawienie je nadpisze.

​
Kolory globalne

Kolory twojej marki i kolory systemowe, używane w całym sklepie i w doświadczeniach post-purchase. Komponenty korzystają z tych kolorów, gdy nie ustawiono schematu kolorów. Kolory marki
  • Brand – główny kolor twojej marki.
  • Accent – używany dla elementów interaktywnych i wyróżnionych.
  • Decorative – używany dla wspierających elementów dekoracyjnych.
Kolory statusów i systemowe
  • Success – stany potwierdzenia.
  • Warning – komunikaty ostrzegawcze.
  • Critical – błędy i alerty.
  • Info – komunikaty informacyjne.
Kolory powierzchni i przycisków nie są ustawiane tutaj. Znajdują się w sekcji Advanced > Color schemes.

​
Typografia

  • Font size – ustaw Base size oraz Scale ratio, z którego wyprowadzana jest reszta skali typograficznej.
  • Primary font – używany dla większości komponentów, takich jak zwykły tekst, przyciski i kontrolki formularza. Wybierz Font family, Base weight i Bold weight.
  • Secondary font – używany dla komponentów nagłówkowych, z tymi samymi trzema kontrolkami.

​
Zaokrąglenie narożników

Ustawia wspólne wartości zaokrąglenia narożników, do których odwołują się przyciski, pola formularza, kontenery i inne komponenty. Definiujesz trzy rozmiary: Small, Medium i Large.

​
Dostosowania

​
Przyciski

Konfigurowane osobno dla Primary buttons (główna akcja na stronie) i Secondary buttons (akcje pomocnicze). Każdy ma:
  • Corner radius – Small, Medium, Large lub None (kwadratowe).
  • Background – Solid lub None.
  • Vertical padding i Horizontal padding.
  • Show border.
Kolory przycisków są dziedziczone ze schematów kolorów. Jeśli nie ustawiono wartości schematu, używane są kolory globalne.

​
Pola formularza

Dotyczy wszystkich obsługiwanych typów pól:
  • Corner radius
  • Label position – Inside lub Outside.
  • Show border
Nadpisania per typ pola pozwalają odejść od tych wspólnych stylów dla konkretnych typów pól: Text field borders, Dropdown borders, Choice list group spacing i Checkbox corner radius.

​
Miniatury produktów

Kontroluje, jak zdjęcia produktów wyglądają na stronie:
  • Show border
  • Border radius
  • Fit
  • Badge background color – Accent (kolor akcentu schematu) lub Base (kolor bazowy schematu).
  • Layout – Placement (Top bar, Left section lub Right section) oraz Alignment (Left, Center lub Right).
  • Container – Padding, Color scheme oraz Show divider.
Strona checkoutu z podświetlonym nagłówkiem z nazwą sklepu w lewym górnym rogu

​
Obszar treści

Kontroluje Divider między obszarem głównym a podsumowaniem zamówienia: Show divider, Border style i Border weight.

​
Obszar główny

  • Section containers – tło i obramowanie wokół każdej sekcji: Background, Show border, Border style, Border weight.
  • Section dividers – linie wyświetlane między sekcjami.

​
Podsumowanie zamówienia

  • Container – Color scheme zastosowany do całego kontenera podsumowania zamówienia.
  • Section dividers – Show divider, Border style, Border weight.
  • Section containers – tło i obramowanie wokół każdej sekcji: Show border, Background, Border style, Border weight, Color scheme, Corner radius, Padding i Shadow.
Miniatura produktu w podsumowaniu zamówienia z podświetlonym obramowaniem obrazu
  • Layout – Placement i Alignment.
  • Container – Show footer content, Padding, Color scheme oraz Show divider.

​
Zaawansowane

​
Schematy kolorów

Schematy kolorów to wielokrotnego użytku zestawy kolorów powierzchni, tekstu i przycisków, na które wskazują inne sekcje. Dostępne są dwa schematy:
  • Scheme 1 - Main area
  • Scheme 2 - Supporting areas
Każdy schemat jest podzielony na trzy grupy:
  • Buttons – używane dla głównego przycisku płatności i akcji pomocniczych. Primary button i Secondary button są konfigurowane osobno, każdy z własnym stanem domyślnym i stanem najechania.
  • Form controls – używane dla pól tekstowych, list rozwijanych i list wyboru.
  • Base surfaces – tło powierzchni, tekst treści oraz role pomocnicze: obramowanie, akcent (linki i fokus), dekoracja (subtelne wyróżnienia) i kolor ikon.
Wszędzie tam, gdzie sekcja oferuje kontrolkę Color scheme, możesz wskazać Scheme 1, Scheme 2 lub Transparent.