Skip to main content

Обзор

Эта кастомизация использует HTML, CSS и JavaScript для блокировки оформления заказа, когда корзина содержит только товары-апселлы. Она помогает гарантировать, что апселлы рассматриваются как второстепенные предложения, а не самостоятельные покупки, поддерживая более контролируемую и продуманную стратегию апселлов. Это гарантирует, что товары-апселлы функционируют в определённых границах, подчёркивая их роль дополнений к основным товарам. После внедрения кнопка оформления заказа будет отключена, пока в корзину не будет добавлен хотя бы один товар, не являющийся апселлом.

Как это работает

  • Если корзина содержит только товары-апселлы, кнопка оформления заказа становится серой
  • Под кнопкой появляется предупреждающее сообщение
  • Как только добавляется обычный товар, кнопка становится активной, а предупреждение исчезает — обеспечивается понятная валидация для сценариев, гарантирующих, что товары-апселлы покупаются только вместе с соответствующими товарами-триггерами, например, за счёт показа целевых предупреждающих сообщений.
Эта настройка идеально подходит для владельцев магазинов или разработчиков с базовыми знаниями JavaScript и CSS.

Шаг 1. Добавьте пользовательский HTML

Перейдите в:
Upcart > Cart Editor > Settings > Custom HTML

В разделе Above announcements/rewards вставьте:

Примечание об устаревшем API: обратные вызовы window.upcartOnCartLoaded всё ещё работают, но считаются устаревшими и выводят предупреждения в консоль. Используйте upcartSubscribeCartLoaded для всех новых скриптов.

В разделе Below checkout button вставьте:

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

Шаг 2. Добавьте пользовательский CSS

Перейдите в:
Upcart > Cart Editor > Settings > Custom CSS
Вставьте следующий код:
Этот код стилизует предупреждающее сообщение и отключает кнопку оформления заказа визуально и функционально.

Итоговый результат

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

Всё ещё нужна помощь?

Если вам нужна помощь с кастомизациями, мы рекомендуем проконсультироваться с экспертом Shopify по добавлению HTML, CSS и даже JavaScript в вашу выдвижную корзину. Найти экспертов Shopify