Дизайнерские шаблоны и готовые решения для онлайн-школ на GetCourse

Корзина с прилипающей иконкой и индикатором количества товара, и с возможностью отображения цены со скидкой

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

Как установить корзину с прилипающей иконкой

Предварительно установите саму корзину на страницу. Для этого воспользуйтесь инструкцией.

После установки корзины вернитесь к покупке и нажмите на кнопку получения кода CSS. На кнопке отобразиться информация об успешном копировании

Перейдите на свою страницу вставки кода и вызовите поле для импорта кода любым из двух показанных ниже способов

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

Аналогичным способом импортируйте код JS из покупки.

При необходимости внести изменения в визуал, нажмите кнопку настройки или дважды кликните на сам блок

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

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

ВАЖНО! Если вы не хотите уменьшать значок корзины на мобильных устройствах, то можете удалить не нужный кусок кода. Для этого в импортрованном коде CSS найдите текст: /*Если вы не хотите уменьшать значок на мобильных устройствах, то можете удалить кусок кода начиная с этого текста и до «Стили раскрытой корзины»*/ и удалите лишнее.