Skip to main content

​
Обзор

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

​
Где это найти

Перейдите в:
Upcart > Cart Editor > Settings > Custom CSS
Settings — это строка вкладок; Custom CSS — одна из них, рядом с Custom HTML. Если она не видна, она находится в разделе More settings.

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

Вы можете добавить CSS, чтобы:
  • Стилизовать стандартные элементы корзины
  • Изменять внешний вид пользовательского HTML
  • Настраивать отступы, выравнивание, типографику и многое другое
По мере ввода всплывающее окно автодополнения будет предлагать корректные селекторы Upcart, чтобы ускорить редактирование. Выбор подсказки автоматически дополнит правило и поможет структурировать ваш код. Если изменения не отображаются, как ожидалось, просмотрите распространённые рекомендации по устранению неполадок, такие как обновление кэша в браузере и в редакторе Upcart, проверка размещения CSS и обеспечение правильной специфичности ваших правил CSS.

​
Использование селекторов

Upcart предоставляет широкий набор собственных селекторов. Нажмите «Show list», чтобы просмотреть все доступные варианты. Избегайте использования глобальных селекторов, таких как body, div или h3, если они не ограничены с помощью .upcart-cart, чтобы предотвратить непреднамеренные изменения в витрине вашего магазина. В ситуациях, когда стили применяются некорректно, рассмотрите возможность повышения специфичности CSS или добавления !important к правилам CSS. Это гарантирует, что они переопределят любые конфликтующие стили. Пример:
Пример (безопасный селектор):

​
Пример: стилизация сообщения с благодарностью

Предположим, вы добавили этот пользовательский HTML под кнопкой оформления заказа:
Без CSS сообщение будет выглядеть просто. Чтобы стилизовать его:

​
Распространённые проблемы и решения

​
CSS не отображается на мобильных устройствах

Если ваш пользовательский текст или стили не видны на мобильных устройствах:
  • Обновите страницу как в редакторе Upcart, так и в мобильном браузере, чтобы очистить кэшированные версии.
  • Убедитесь, что активна последняя опубликованная версия корзины.
  • Убедитесь, что CSS сохранён на вкладке Custom CSS в Upcart > Cart Editor > Settings.

​
Расхождения между редактором и работающим магазином

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

​
Неправильное использование селекторов CSS

Проверьте, что целью является правильный класс или ID. Всегда включайте префиксы, такие как .upcart-, для элементов, специфичных для Upcart, чтобы избежать непредвиденных результатов. Если стиль не применяется, как ожидалось, убедитесь, что селектор .thank-you-message точно нацелен на нужный HTML-элемент, и проверьте, что код CSS размещён на правильной вкладке (Upcart > Cart Editor > Settings > Custom CSS).
Поддержка по настройкам: Служба поддержки Upcart не может помочь с внедрением или отладкой пользовательского CSS. Для помощи с расширенной стилизацией мы рекомендуем обратиться к эксперту Shopify. Для устранения неполадок с пользовательским CSS обратитесь к разделу распространённых проблем, где приведены рекомендации по решению таких вопросов, как отсутствие стилей на мобильных устройствах, расхождения между предпросмотром в редакторе и действующей витриной, а также неправильное размещение селекторов.