Помощь
Войти

Использование редактора брендинга в Checkout Blocks

Вы можете использовать редактор брендинга в Checkout Blocks на базе Checkout Branding API, чтобы настраивать внешний вид страниц оформления заказа и аккаунтов без необходимости изменять код.

С помощью редактора брендинга можно изменять цвета и элементы оформления заказа для любой конфигурации оформления заказа. Изменения, которые вы вносите в дизайн оформления заказа с помощью редактора брендинга, применяются ко всем страницам оформления заказа, включая страницу благодарности, страницу статуса заказа и страницы новых аккаунтов клиентов.

Чтобы запустить редактор брендинга из панели администратора Shopify, нажмите «Приложения» > Checkout Blocks, а затем — «Редактор брендинга».

На этой странице

Настройка цветов для страницы оформления заказа

В разделе «Цвета» вы можете настроить основные цвета для страницы оформления заказа. Также можно настроить до 4 цветовых схем, которые применяются к отдельным разделам для внесения более детальных изменений в дизайн. Вы можете редактировать типы цветов, включая акцентные (для интерактивных элементов, таких как ссылки) и фирменные (используются для таких элементов, как основные и второстепенные кнопки).

Инструкции:

Настройка глобальных цветов

  1. В панели администратора Shopify перейдите в раздел «Приложения» > Checkout Blocks.

  2. Нажмите «Редактор брендинга».

  3. В разделе «Цвета» нажмите «Глобальные цвета».

  4. Чтобы переопределить любой существующий цвет оформления заказа, в разделе «Глобальные цвета» нажмите значок ⊕, а затем выберите нужный цвет одним из следующих способов:

    • Выберите цвет с помощью средства выбора цвета.
    • Введите HEX-код цвета в доступное поле.

  5. Нажмите «Сохранить».

Настройка цветовых схем

  1. В панели администратора Shopify перейдите в раздел «Приложения» > Checkout Blocks.

  2. Нажмите «Редактор брендинга».

  3. В разделе «Цвета» нажмите «Схема 1», «Схема 2», «Схема 3» или «Схема 4», чтобы настроить определенную цветовую схему.

  4. Выберите любой из следующих компонентов, которые вы хотите настроить:

    • Основные цвета
    • Элементы управления формы
    • Основная кнопка
    • Второстепенная кнопка

  5. В разделе «База» нажмите значок ⊕ рядом с типом цвета, который вы хотите настроить, а затем выберите нужный цвет одним из следующих способов:

    • Выберите цвет с помощью средства выбора цвета.
    • Введите HEX-код цвета в доступное поле.

  6. Необязательно: если вы редактируете схему для элементов управления формы, основной кнопки или второстепенной кнопки, вы также можете настроить цвета для состояний «При выборе» или «При наведении». Нажмите значок ⊕ рядом с типом цвета, который вы хотите настроить, а затем выберите нужный цвет одним из следующих способов:

    • Выберите цвет с помощью средства выбора цвета.
    • Введите HEX-код цвета в доступное поле.

  7. Нажмите «Сохранить».

Настройка элементов оформления заказа

В разделе «Настройки» редактора брендинга вы можете редактировать следующие элементы оформления заказа:

  • Фавикон: выберите значок, который будет отображаться для клиентов во вкладке браузера во время оформления заказа.
  • Глобальные: настройте радиус скругления углов для всех элементов (полей ввода формы, кнопок и карточек).
  • Шапка и логотип: выберите положение шапки на странице оформления заказа, а также укажите, нужно ли отображать навигационную цепочку, ссылку на корзину и логотип.
  • Основная часть: примените схемы оформления к основной области контента страницы оформления заказа, включая фоновые изображения, ширину рамок и цветовые схемы.
  • Сводка по заказу: примените схемы оформления к боковой панели страницы оформления заказа, содержащей сводку по заказу клиента, включая фоновые изображения, ширину рамок и цветовые схемы.
  • Футер: выберите ширину футера на странице оформления заказа, а также укажите, нужно ли отображать политики магазина.
  • Типографика: выберите размер шрифта, семейство шрифтов, насыщенность, кернинг и регистр букв для заголовков до 3 уровней.
  • Кнопки: выберите отступы, рамки и стили для основной и второстепенной кнопок.
  • Формы: настройте стили для полей ввода в форме оформления заказа, таких как флажки, текстовые поля и выбранные опции из списка.
  • Миниатюры товаров: настройте стили рамок и радиус скругления углов для изображений товаров на странице оформления заказа.

Инструкции:

  1. В панели администратора Shopify перейдите в раздел «Приложения» > Checkout Blocks.

  2. Нажмите «Редактор брендинга».

  3. В разделе «Настройки» нажмите на любой из элементов, который вы хотите настроить, например «Шапка и логотип».

  4. Используя доступные параметры настройки, измените элемент оформления заказа по своему усмотрению.

  5. Нажмите «Сохранить».

Переключение конфигураций оформления заказа

Когда вы открываете редактор брендинга, по умолчанию вы редактируете конфигурацию оформления заказа, которая в данный момент является Активной. Однако вы можете изменить конфигурацию оформления заказа, которую хотите отредактировать с помощью редактора брендинга, а также создавать новые конфигурации оформления заказа.

Узнайте подробнее об управлении активными и черновыми конфигурациями оформления заказа.

Инструкции:

  1. В панели администратора Shopify перейдите в раздел «Приложения» > Checkout Blocks.

  2. Нажмите «Редактор брендинга».

  3. Нажмите на название текущей конфигурации оформления заказа, чтобы открыть выпадающее меню со списком активной и всех черновых конфигураций, а затем выберите конфигурацию оформления заказа, которую вы хотите настроить:

    • Выберите существующую конфигурацию, которую хотите отредактировать.
    • Нажмите ⊕ «Создать новую конфигурацию», чтобы перейти в раздел настроек «Оформление заказа» в панели администратора Shopify.

Предварительный просмотр страницы оформления заказа

Вы можете в любой момент просмотреть изменения, внесенные в редактор брендинга, выбрав конфигурацию оформления заказа для предварительного просмотра и нажав «Предпросмотр». Редактор оформления заказа и аккаунтов запустится в отдельной вкладке со всеми примененными изменениями, чтобы вы могли увидеть, как они будут отображаться на странице оформления заказа.

Инструкции:

  1. В панели администратора Shopify перейдите в раздел «Приложения» > Checkout Blocks.

  2. Нажмите «Редактор брендинга».

  3. Внесите любые изменения в цвета или элементы конфигурации оформления заказа, которые вы хотите настроить.

  4. Нажмите «Предпросмотр».

Экспорт и импорт конфигураций оформления заказа

Вы можете экспортировать и импортировать конфигурации оформления заказа с помощью JSON-файлов.

Экспорт конфигурации оформления заказа:

  1. В панели администратора Shopify перейдите в раздел «Приложения» > Checkout Blocks.

  2. Нажмите «Редактор брендинга».

  3. Выберите конфигурацию оформления заказа с примененными к ней настройками с помощью редактора брендинга.

  4. Нажмите «Другие действия» > «Экспортировать конфигурацию».

Конфигурация оформления заказа будет загружена на ваше устройство в виде файла .json.

Импорт конфигурации оформления заказа:

  1. В панели администратора Shopify перейдите в раздел «Приложения» > Checkout Blocks.

  2. Нажмите «Редактор брендинга».

  3. Выберите конфигурацию оформления заказа, к которой вы хотите применить импортированный профиль брендинга.

  4. Нажмите «Другие действия» > «Импортировать конфигурацию».

  5. В диалоговом окне «Импорт брендинга для оформления заказа» загрузите JSON-файл с вашим брендингом:

    1. Нажмите «Добавить файл».
    2. Выберите соответствующий JSON-файл на вашем устройстве.
    3. Нажмите «Импортировать и продолжить».

  6. Проверьте предварительно загруженную конфигурацию настроек. При необходимости измените ее.

  7. Нажмите «Сохранить».

Сброс стиля оформления заказа к значениям по умолчанию

При редактировании цвета или элемента оформления заказа в редакторе брендинга вы можете сбросить конкретное значение до значения по умолчанию, нажав «Сбросить» рядом с изменённым цветом или элементом.

Вы в любой момент можете сбросить все настройки брендинга оформления заказа до значений Shopify по умолчанию. При сбросе настроек оформления заказа удаляются все внесённые изменения на всех страницах редактора брендинга. Это действие нельзя отменить.

Инструкции:

  1. В панели администратора Shopify перейдите в раздел «Приложения» > Checkout Blocks.

  2. Нажмите «Редактор брендинга».

  3. Выберите конфигурацию оформления заказа, которую хотите сбросить.

  4. Нажмите «Сбросить по умолчанию».

  5. В диалоговом окне «Сбросить стили по умолчанию?» нажмите «Продолжить».