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

Если вы продаете товары в интернет-магазине, вы можете настроить стиль страниц оформления заказов в редакторе оформления заказов и аккаунтов. Можно добавить логотип компании, изменить цвета или выбрать новый шрифт, чтобы страница оформления заказа соответствовала стилю вашего бизнеса.

Некоторые элементы брендинга, которые вы выбираете для страниц оформления заказов, также применяются к новым страницам аккаунтов клиентов.

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

Что нужно учесть при настройке стиля оформления заказа и аккаунтов клиентов

Прежде чем настраивать стиль оформления заказа, ознакомьтесь со следующими моментами:

Область «Конфигурации» в разделе настроек оформления заказов в панели администратора скрыта до тех пор, пока вы не выберете тарифный план и не создадите свой первый товар.
Если у вас тарифный план Shopify Plus, вы можете использовать Checkout Branding API для расширенной настройки брендинга при оформлении заказа.
Если вам нужна помощь в настройке стиля корзины и оформления заказа, вы можете нанять партнера Shopify. Подробнее о найме партнера Shopify.
Хотя может возникнуть желание добавить на страницы оформления заказа много цветов и интересных деталей, лучше придерживаться простого дизайна. Ваши клиенты используют эти страницы для ввода информации о доставке и оплате своих заказов, и не стоит отвлекать их или затруднять чтение информации. Выбирайте цвета с высокой контрастностью и изображения, которые не отвлекают внимание от текста на странице.

Создание цветовой палитры для оформления заказа и аккаунтов клиентов

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

Шаги:

Компьютер

В панели администратора Shopify перейдите в раздел «Настройки» > «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказа и аккаунтов нажмите , чтобы открыть боковую панель Настройки.
В разделе Цветовая палитра нажмите +, чтобы выбрать цвет для добавления в палитру.
Необязательно: чтобы удалить цвет, который больше не нужен в палитре:
1. Нажмите на цвет, а затем нажмите Удалить цвет.
2. Выберите цвет для замены удаленного цвета везде, где он используется при оформлении заказа.
3. Нажмите Подтвердить.
Нажмите «Сохранить».

Мобильное устройство

В приложении Shopify нажмите , а затем нажмите Настройки.
В разделе «Настройки магазина» коснитесь пункта «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказов и аккаунтов коснитесь «Настройки».
В разделе Цветовая палитра коснитесь +, чтобы выбрать цвет для добавления в палитру.
Необязательно: чтобы удалить цвет, который больше не нужен в палитре:
1. Коснитесь цвета, а затем коснитесь Удалить цвет.
2. Выберите цвет для замены удаленного цвета везде, где он используется при оформлении заказа.
3. Коснитесь Подтвердить.
Коснитесь «Сохранить» или ✓.

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

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

Используйте ползунок цвета, чтобы изменить оттенок доступных цветов в области предварительного просмотра средства выбора.
Используйте шестнадцатеричное поле для ввода кода определенного цвета, например #0000FF для стандартного чистого синего.
Используйте , чтобы выбрать определенный цвет с помощью курсора в любом месте экрана.
Используйте , чтобы сузить количество доступных цветов в области предварительного просмотра средства выбора до 40.

В разделе Цветовая палитра отображаются все образцы цветов, добавленные вами в цветовую палитру в редакторе оформления заказа и аккаунтов.

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

Настройка цветов для шапки

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

Шаги:

Компьютер

В панели администратора Shopify перейдите в раздел «Настройки» > «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказа и аккаунтов нажмите , чтобы открыть боковую панель Настройки.
В разделе Шапка выполните любые из следующих настроек цвета:
- Используйте настройку Фон, чтобы задать цвет для фона шапки.
- Используйте настройку Акцент, чтобы задать цвет для значка корзины и ссылок в шапке.
Нажмите «Сохранить».

Мобильное устройство

В приложении Shopify нажмите , а затем нажмите Настройки.
В разделе «Настройки магазина» коснитесь пункта «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказов и аккаунтов коснитесь «Настройки».
В разделе Шапка выполните любые из следующих настроек цвета:
- Используйте настройку Фон, чтобы задать цвет для фона шапки.
- Используйте настройку Акцент, чтобы задать цвет для значка корзины и ссылок в шапке.
Коснитесь «Сохранить» или ✓.

Добавление логотипа на страницу оформления заказов

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

Шаги:

Компьютер

В панели администратора Shopify перейдите в раздел «Настройки» > «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказа и аккаунтов нажмите , чтобы открыть боковую панель Настройки.
В разделе Логотип нажмите поле Изображение.
Нажмите Выбрать из библиотеки, чтобы выбрать существующее изображение из вашей библиотеки.
Необязательно: в разделе Логотип настройте логотип с помощью следующих параметров:
- Используйте параметр Ширина, чтобы выбрать размер логотипа в пикселях.
- Используйте параметр Выравнивание, чтобы выбрать, где будет отображаться логотип: слева, по центру или справа от баннера.
Нажмите «Сохранить».

Мобильное устройство

В приложении Shopify нажмите , а затем нажмите Настройки.
В разделе «Настройки магазина» коснитесь пункта «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказов и аккаунтов коснитесь «Настройки».
В разделе Логотип коснитесь поля Изображение.
Коснитесь Выбрать из библиотеки, чтобы выбрать существующее изображение из вашей библиотеки.
Необязательно: в разделе Логотип настройте логотип с помощью следующих параметров:
- Используйте параметр Ширина, чтобы выбрать размер логотипа в пикселях.
- Используйте параметр Выравнивание, чтобы выбрать, где будет отображаться логотип: слева, по центру или справа от баннера.
Коснитесь «Сохранить» или ✓.

Добавление фонового цвета в основную область контента

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

Шаги:

Компьютер

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

Мобильное устройство

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

Изменение цвета полей формы

Вы можете изменить цвет полей формы при оформлении заказа. Вы также можете изменить цвет сообщений об ошибках, чтобы сделать их белыми или прозрачными. Убедитесь, что текст в полях хорошо читается.

Шаги:

Компьютер

В панели администратора Shopify перейдите в раздел «Настройки» > «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказа и аккаунтов нажмите , чтобы открыть боковую панель Настройки.
В разделе Поля ввода выполните любые из следующих настроек:
- Чтобы изменить цвет полей ввода, перейдите в раздел Ввод и нажмите Прозрачный или Белый.
- Чтобы изменить цвет сообщений об ошибках, нажмите на поле Ошибка, а затем выберите цвет.
Нажмите «Сохранить».

Мобильное устройство

В приложении Shopify нажмите , а затем нажмите Настройки.
В разделе «Настройки магазина» коснитесь пункта «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказов и аккаунтов коснитесь «Настройки».
В разделе Поля ввода выполните любые из следующих настроек:
- Чтобы изменить цвет полей ввода, перейдите в раздел Ввод и коснитесь Прозрачный или Белый.
- Чтобы изменить цвет сообщений об ошибках, коснитесь поля Ошибка, а затем выберите цвет.
Коснитесь «Сохранить» или ✓.

Добавление фонового изображения или цвета в сводку по заказу

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

Изображения меньшего размера повторяются по вертикали и горизонтали в качестве фона, как плитка.

Шаги:

Компьютер

В панели администратора Shopify перейдите в раздел «Настройки» > «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказа и аккаунтов нажмите , чтобы открыть боковую панель Настройки.
В разделе Сводка по заказу нажмите сводка по заказу.
Добавление цвета фона или изображения:
- Чтобы добавить цвет, нажмите Фон для открытия средства выбора цвета, а затем выберите цвет или введите шестнадцатеричный код.
- Чтобы добавить изображение, нажмите Изображение > Выбрать. Нажмите Выбрать из библиотеки, чтобы выбрать существующее изображение из вашей библиотеки.
Нажмите «Сохранить».

Мобильное устройство

В приложении Shopify нажмите , а затем нажмите Настройки.
В разделе «Настройки магазина» коснитесь пункта «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказов и аккаунтов коснитесь «Настройки».
В разделе Сводка по заказу коснитесь сводка по заказу.
Добавление цвета фона или изображения:
- Чтобы добавить цвет, коснитесь Фон для открытия средства выбора цвета, а затем выберите цвет или введите шестнадцатеричный код.
- Чтобы добавить изображение, коснитесь Изображение > Выбрать. Коснитесь Выбрать из библиотеки, чтобы выбрать существующее изображение из вашей библиотеки.
Коснитесь «Сохранить» или ✓.

Изменение или удаление изображения из сводки по заказу

Вы можете изменить или удалить изображение, добавленное в сводку по заказу.

Шаги:

Компьютер

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

Мобильное устройство

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

Чтобы удалить изображение, нажмите «Изменить» > «Удалить изображение». При этом изображение не удаляется из Shopify.

Изменение шрифта на странице оформления заказа

Вы можете выбрать из списка шрифтов для настройки страниц оформления заказов.

Шаги:

Компьютер

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

Мобильное устройство

В приложении Shopify нажмите , а затем нажмите Настройки.
В разделе «Настройки магазина» коснитесь пункта «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказов и аккаунтов коснитесь «Настройки».
В разделе «Типографика» коснитесь выпадающего меню «Заголовки» или «Основной текст», а затем выберите шрифт.
Коснитесь «Сохранить» или ✓.

Изменение цветов кнопок и акцентов на странице оформления заказа

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

Шаги:

Компьютер

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

Мобильное устройство

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

Изменение макета оформления заказа

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

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

Шаги:

Компьютер

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

Мобильное устройство

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

Управление кнопкой «Купить снова»

На странице статуса заказа отображается кнопка «Купить снова», с помощью которой клиенты могут перезаказать ранее купленные товары.

Шаги:

В панели администратора Shopify перейдите в раздел «Настройки» > «Оформление заказа».
В разделе «Конфигурации» нажмите «Настроить» рядом с нужной конфигурацией.
В редакторе оформления заказов и аккаунтов нажмите значок «Настройки».
В разделе «Кнопка „Купить снова“» включите или выключите эту кнопку.

Отображение поля для кода скидки по умолчанию на мобильных устройствах

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

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

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

Шаги:

Компьютер

В панели администратора Shopify перейдите в раздел «Настройки» > «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказов и аккаунтов нажмите значок разделов, чтобы открыть боковую панель «Разделы».
На странице «Информация», «Доставка» или «Оплата» нажмите «Сводка по заказу».
Активируйте настройку «Всегда показывать поле для кода скидки».
Нажмите «Сохранить».

Мобильное устройство

В приложении Shopify нажмите , а затем нажмите Настройки.
В разделе «Настройки магазина» коснитесь пункта «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказов и аккаунтов коснитесь «Разделы».
На странице «Информация», «Доставка» или «Оплата» коснитесь «Сводка по заказу».
Активируйте настройку «Всегда показывать поле для кода скидки».
Коснитесь «Сохранить» или ✓.

Добавление блоков на страницы оформления заказа

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

Существующие блоки можно добавлять непосредственно в разделы на страницах с помощью боковой панели «Разделы» или «Приложения».

Узнайте больше о настройке конфигураций оформления заказа с помощью приложений.

Добавление блоков с помощью боковой панели «Разделы»

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

Шаги:

Компьютер

В панели администратора Shopify перейдите в раздел «Настройки» > «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказов и аккаунтов выберите страницу, на которую хотите добавить приложение, а затем нажмите , чтобы открыть боковую панель «Разделы».
Нажмите ⊕ Добавить блок в разделе, в который вы хотите его добавить.
Нажмите на блок, который хотите добавить.
При необходимости настройте блок:
- Чтобы изменить расположение блока, перетащите его вверх или вниз в списке «Разделы» либо воспользуйтесь кнопками перемещения в окне предпросмотра.
- Нажмите на блок, чтобы настроить его параметры.
Нажмите «Сохранить».

Мобильное устройство

В приложении Shopify нажмите , а затем нажмите Настройки.
В разделе «Настройки магазина» коснитесь пункта «Оформление заказа».
В разделе «Конфигурации» коснитесь «Настроить» рядом с той конфигурацией оформления заказа, которую вы хотите изменить.
В редакторе оформления заказов и аккаунтов выберите страницу, на которую вы хотите добавить приложение, а затем коснитесь «Разделы».
Коснитесь ⊕ Добавить блок в разделе, в который вы хотите его добавить.
Коснитесь блока, который хотите добавить.
При необходимости настройте блок:
- Чтобы изменить расположение блока, перетащите его вверх или вниз в списке «Разделы» либо воспользуйтесь кнопками перемещения в окне предпросмотра.
- Коснитесь блока, чтобы настроить его параметры.
Коснитесь «Сохранить» или ✓.

Добавление блоков с помощью боковой панели «Приложения»

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

Узнайте больше об использовании боковой панели «Приложения» в редакторе оформления заказов и аккаунтов.

Шаги:

Компьютер

В панели администратора Shopify перейдите в раздел «Настройки» > «Оформление заказа».
В разделе Конфигурации нажмите Редактировать рядом с конфигурацией, которую хотите настроить.
В редакторе оформления заказов и аккаунтов нажмите , чтобы открыть боковую панель «Приложения».
Рядом с блоком, который вы хотите добавить, нажмите ⊕.
Во всплывающем окне «Добавить в» нажмите на страницу, на которую вы хотите добавить блок.
При необходимости настройте блок:
- Чтобы изменить расположение блока, воспользуйтесь кнопками перемещения в окне предпросмотра.
- Настройте параметры блока.
Нажмите «Сохранить».

Мобильное устройство

В приложении Shopify нажмите , а затем нажмите Настройки.
В разделе «Настройки магазина» коснитесь пункта «Оформление заказа».
В разделе «Конфигурации» коснитесь «Настроить» рядом с той конфигурацией оформления заказа, которую вы хотите изменить.
В редакторе оформления заказов и аккаунтов коснитесь «Приложения».
Рядом с блоком, который вы хотите добавить, коснитесь ⊕.
Во всплывающем окне «Добавить в» коснитесь страницы, на которую вы хотите добавить блок.
При необходимости настройте блок:
- Чтобы изменить расположение блока, воспользуйтесь кнопками перемещения в окне предпросмотра.
- Настройте параметры блока.
Коснитесь «Сохранить» или ✓.