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

​
General

​
Наследование шрифтов из темы

Эта настройка позволяет Upcart использовать шрифты, заданные в настройках вашей темы Shopify. Чтобы посмотреть текущий выбор шрифтов, откройте редактор тем Shopify и перейдите в раздел Typography.

​
🚧 Предпросмотр корзины 🚧

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

​
Показывать зачёркнутые цены

Включите эту настройку, чтобы показывать зачёркнутую цену (также известную как Compare At Price) рядом с каждым товаром в корзине. Это отражает цену со скидкой, аналогично страницам ваших товаров. Товар в корзине с зачёркнутой исходной ценой рядом с ценой со скидкой и экономией

​
Включить строку промежуточного итога

Добавляет в корзину строку промежуточного итога. При включении также появляется поле Subtotal text color в разделе Colors, поэтому промежуточный итог можно стилизовать отдельно от остального текста корзины. При выключенной настройке это поле цвета скрыто.

​
Ширина корзины

Управляет шириной шторки, настраивается отдельно для каждого типа экрана:
  • Desktop — Default или Wide
  • Mobile — Full (от края до края) или Nearly full (небольшой отступ у края)

​
Colors

​
Цвет фона

Задаёт основной цвет фона корзины, за исключением футера и карточек апсейлов.

​
Акцентный цвет корзины

Управляет цветом фона футера корзины и карточек товаров-апсейлов. Настройки Colors в Upcart с акцентным цветом корзины, применённым к розовым карточкам апсейлов

​
Цвет текста корзины

Определяет цвет всего текста корзины, кроме текста кнопок и текста экономии, которые настраиваются отдельно.

​
Цвет текста экономии

Задаёт цвет текста экономии, отображаемого под ценой товара. Товар в корзине с текстом суммы экономии, выделенным пурпурным цветом

​
Цвет текста промежуточного итога

Задаёт цвет строки промежуточного итога. Это поле появляется только тогда, когда в разделе General включена настройка Enable subtotal line.

​
🚧 Предпросмотр корзины 🚧

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

​
Настройки кнопок

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

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

Регулирует скругление углов кнопок в диапазоне от 0 px до 40 px. 0 даёт острые, прямые углы; 40 — максимальное скругление, доступное ползунку. Значение применяется одновременно к кнопке оформления заказа, кнопке апсейла, кнопке скидки и кнопке апгрейда.
Ползунок останавливается на 40 px. Для полностью «таблеткообразной» кнопки вам понадобится пользовательский CSS — см. раздел Расширенная настройка CSS ниже.
Ползунок радиуса скругления, установленный на 16 пикселей, скругляет кнопку оформления заказа

​
Цвет кнопки

Задаёт цвет фона всех кнопок в корзине, включая:
  • Кнопку оформления заказа
  • Кнопку апсейла «Add to Cart»
  • Кнопку применения скидки «Apply»
  • Кнопку апгрейда подписки Вы можете настроить цвет этих кнопок через Cart Editor. Для дальнейших расширенных настроек, таких как модификации CSS, обратитесь к разделу расширенной настройки.

​
Цвет текста кнопки

Определяет цвет текста, используемый во всех кнопках корзины.

​
Цвет текста кнопки при наведении

Управляет цветом текста кнопки, когда покупатель наводит на неё курсор мыши. Например, если задан зелёный цвет, текст станет зелёным при наведении.

​
Показывать кнопку «Продолжить покупки»

Добавляет в корзину кнопку Continue shopping, позволяющую покупателям закрыть шторку и вернуться к просмотру товаров без использования значка закрытия.

​
Расширенная настройка CSS для кнопок оформления заказа

Для существенных изменений дизайна вы можете использовать код Custom CSS для модификации кнопки оформления заказа:
  1. В Cart Editor откройте Settings и выберите вкладку Custom CSS.
  2. Используйте соответствующий селектор CSS, например .checkout. Примеры сниппетов CSS: Чтобы создать кнопку в форме таблетки:
    Чтобы добавить чёрную рамку:
    Замените .checkout фактическим CSS-классом вашей кнопки. Дополнительная стилизация включает эффекты при наведении, отступы, цвета текста или шрифты.

​
Интеграция брендинга Shopify для настройки кнопок

Если вы используете Shopify, вы можете обновить дизайн кнопки оформления заказа через админ-панель Shopify:
  1. Войдите в админ-панель Shopify.
  2. Перейдите в Settings > Checkout > Customize.
  3. Используйте параметры брендинга, чтобы изменить шрифт, скругление или цвет для целостного дизайна.
Предпросмотр корзины-шторки Upcart с кнопкой добавления апсейла и кнопкой оформления заказа