Обзор

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

Когда это использовать

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

Шаг 1. Добавьте скрипт

Перейдите в Upcart > Cart Editor > Settings > Custom HTML
В выпадающем списке HTML Location выберите Scripts (Before Load)
Вставьте следующий JavaScript:

<script>  
  var stickyCartButton = document.querySelector("#upCartStickyButton");  
  
  if (  
    stickyCartButton &&  
    (document.location.pathname === "/" + Shopify.locale ||  
     document.location.pathname === "/")  
  ) {  
    stickyCartButton.classList.add("hide-sticky-cart-button");  
  }  
</script>

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

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

Перейдите в Upcart > Sticky Cart > Custom CSS (обратите внимание: это Sticky Cart, а не Cart Editor)
Вставьте следующий CSS:

.hide-sticky-cart-button {     
  display: none;   
}

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

Закреплённая кнопка корзины будет скрыта, когда покупатель посещает главную страницу (/ или /[locale])
На всех остальных страницах кнопка остаётся видимой

Начало работы

Модули корзины

Настройки корзины

Закреплённая кнопка корзины

Multicart

Кастомизации

Аналитика

Интеграции и совместимость

Оплата и аккаунт

Устранение неполадок

Скрытие закреплённой кнопки корзины на главной странице

Обзор

Когда это использовать

Шаг 1. Добавьте скрипт

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

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

​Обзор

​Когда это использовать

​Шаг 1. Добавьте скрипт

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

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

Обзор

Когда это использовать

Шаг 1. Добавьте скрипт

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

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