Skip to main content
Настройки брендинга позволяют кастомизировать внешний вид вашего чекаута — от цветов и типографики до кнопок, полей форм и макета страницы. Эти инструменты помогают легко привести дизайн чекаута в соответствие с фирменным стилем вашего бренда.

​
Как получить доступ

Откройте дашборд Checkout в Aftersell и нажмите Edit branding в верхней части страницы.
Для редактирования брендинга здесь требуется тарифный план Shopify Plus. Shopify разрешает приложениям читать и изменять брендинг чекаута только на Plus, поэтому на других тарифах эти настройки нельзя сохранить. Если ваш магазин не на Plus, внесите те же изменения в редакторе чекаута Shopify: Settings → Checkout → Customize в админ-панели Shopify.
Дашборд Checkout в Aftersell со стрелкой, указывающей на кнопку Edit branding Редактор организован в три группы: Design system, Customizations и Advanced.

​
Design system (дизайн-система)

Настройки дизайн-системы — это основа. Компоненты по всему чекауту наследуют их, если более специфичная настройка не переопределяет их.

​
Глобальные цвета

Ваши фирменные и системные цвета, используемые в магазине и на этапе после покупки. Компоненты используют эти цвета, когда цветовая схема не задана. Фирменные цвета
  • Brand — основной цвет вашего бренда.
  • Accent — используется для интерактивных и выделенных элементов.
  • Decorative — используется для вспомогательных декоративных элементов.
Цвета статусов и системные цвета
  • Success — состояния подтверждения.
  • Warning — предупреждающие сообщения.
  • Critical — ошибки и оповещения.
  • Info — информационные сообщения.
Цвета поверхностей и кнопок здесь не задаются. Они находятся в разделе Advanced > Color schemes.

​
Типографика

  • Font size — задайте Base size (базовый размер) и Scale ratio (коэффициент масштабирования), из которого выводится остальная типографическая шкала.
  • Primary font — используется для большинства компонентов, таких как обычный текст, кнопки и элементы форм. Выберите Font family, Base weight и Bold weight.
  • Secondary font — используется для компонентов заголовков, с теми же тремя параметрами.

​
Радиус скругления углов

Задаёт общие значения радиуса скругления, на которые ссылаются кнопки, поля форм, контейнеры и другие компоненты. Вы определяете три размера: Small, Medium и Large.

​
Customizations (кастомизации)

​
Кнопки

Настраиваются отдельно для Primary buttons (основное действие на странице) и Secondary buttons (вспомогательные действия). Для каждого типа доступны:
  • Corner radius — Small, Medium, Large или None (прямые углы).
  • Background — Solid или None.
  • Vertical padding и Horizontal padding.
  • Show border.
Цвета кнопок наследуются из цветовых схем. Если значение схемы не задано, используются глобальные цвета.

​
Поля форм

Применяется ко всем поддерживаемым типам полей:
  • Corner radius
  • Label position — Inside или Outside.
  • Show border
Переопределения для отдельных полей позволяют отступить от общих стилей для конкретных типов полей: Text field borders, Dropdown borders, Choice list group spacing и Checkbox corner radius.

​
Миниатюры товаров

Управляет отображением изображений товаров на странице:
  • Show border
  • Border radius
  • Fit
  • Badge background color — Accent (акцентный цвет схемы) или Base (базовый цвет схемы).
  • Layout — Placement (Top bar, Left section или Right section) и Alignment (Left, Center или Right).
  • Container — Padding, Color scheme и Show divider.
Страница чекаута с выделенной шапкой с названием магазина в левом верхнем углу

​
Область контента

Управляет разделителем между основной областью и сводкой заказа: Show divider, Border style и Border weight.

​
Основная область

  • Section containers — фон и рамка вокруг каждого раздела: Background, Show border, Border style, Border weight.
  • Section dividers — линии, отображаемые между разделами.

​
Сводка заказа

  • Container — цветовая схема, применяемая к общему контейнеру сводки заказа.
  • Section dividers — Show divider, Border style, Border weight.
  • Section containers — фон и рамка вокруг каждого раздела: Show border, Background, Border style, Border weight, Color scheme, Corner radius, Padding и Shadow.
Миниатюра товара в сводке заказа с выделенной рамкой изображения
  • Layout — Placement и Alignment.
  • Container — Show footer content, Padding, Color scheme и Show divider.

​
Advanced (расширенные)

​
Цветовые схемы

Цветовые схемы — это переиспользуемые наборы цветов поверхностей, текста и кнопок, на которые ссылаются другие разделы. Доступны две схемы:
  • Scheme 1 - Main area
  • Scheme 2 - Supporting areas
Каждая схема разделена на три группы:
  • Buttons — используются для главной кнопки оплаты и вспомогательных действий. Primary button и Secondary button настраиваются отдельно, каждая со своим состоянием по умолчанию и состоянием при наведении.
  • Form controls — используются для текстовых полей, выпадающих списков и списков выбора.
  • Base surfaces — фон поверхности, основной текст и вспомогательные роли: рамка, акцент (ссылки и фокус), декоративные элементы (лёгкие акценты) и цвет иконок.
Везде, где раздел предлагает параметр Color scheme, вы можете указать Scheme 1, Scheme 2 или Transparent.