Длинные страницы с большим количеством контента могут быть неудобными для навигации, особенно на мобильных устройствах. Кнопка «Вернуться наверх» – это простой и эффективный способ улучшить пользовательский опыт, позволяя посетителям быстро вернуться к началу страницы. В этой статье мы рассмотрим, как добавить кнопку «Вернуться наверх» на длинные страницы вашего магазина Shopify.
Зачем нужна кнопка «Вернуться наверх»?
- Удобство: Пользователям не нужно прокручивать всю страницу вручную, чтобы вернуться к началу.
- Улучшение навигации: Кнопка упрощает перемещение по длинным страницам, особенно на мобильных устройствах.
- Повышение конверсии: Удобная навигация может способствовать тому, что посетители проведут больше времени на вашем сайте и совершат покупку.
Способы добавления кнопки «Вернуться наверх»:
Использование кода (для опытных пользователей)
Самый гибкий способ – добавить кнопку с помощью HTML, CSS и JavaScript.
HTML: Добавьте следующий код в файл theme.liquid (или аналогичный) вашей темы Shopify, перед закрывающим тегом </body>:
<button id=«back-to-top-btn» title=«Вернуться наверх»>↑</button>
CSS: Добавьте стили для кнопки в файл styles.css.liquid (или аналогичный):
#back-to-top-btn {
display: none; /* Скрываем кнопку по умолчанию */
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
background-color: #000; /* Цвет фона */
color: #fff; /* Цвет текста */
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px; /* Закругление углов */
}
#back-to-top-btn:hover {
background-color: #333; /* Изменение цвета при наведении */
}
JavaScript: Добавьте следующий код в файл theme.js.liquid (или аналогичный):
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById(«back-to-top-btn»).style.display = «block»;
} else {
document.getElementById(«back-to-top-btn»).style.display = «none»;
}
}
document.getElementById(‘back-to-top-btn’).addEventListener(‘click’, function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
Этот код делает кнопку видимой при прокрутке страницы вниз на 20 пикселей и плавно возвращает пользователя наверх при клике.
Использование сторонних приложений
Если вы не хотите работать с кодом, в Shopify App Store есть множество приложений, которые упрощают добавление кнопки «Вернуться наверх». Некоторые из них:
- Easy Back to Top Button
- POWR Scroll Up Button
- Ultimate Sales Boost
Советы по настройке кнопки «Вернуться наверх»:
- Размещение: Разместите кнопку в правом нижнем углу экрана, чтобы она не мешала контенту и была легко доступна.
- Дизайн: Выберите дизайн кнопки, который соответствует стилю вашего магазина.
- Мобильная оптимизация: Убедитесь, что кнопка удобна для использования на мобильных устройствах.
Заключение
Добавление кнопки «Вернуться наверх» – это простой и эффективный способ улучшить навигацию и пользовательский опыт на длинных страницах вашего магазина Shopify. Выберите наиболее удобный для вас метод и реализуйте его уже сегодня!