Додавання кнопки “Повернутися нагору” на довгі сторінки Shopify

Довгі сторінки з великою кількістю контенту можуть бути незручними для навігації, особливо на мобільних пристроях. Кнопка “Повернутися нагору” – це простий та ефективний спосіб покращити користувацький досвід, дозволяючи відвідувачам швидко повернутися на початок сторінки. У цій статті ми розглянемо, як додати кнопку “Повернутися нагору” на довгі сторінки вашого магазину 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. Виберіть найбільш зручний для вас метод та реалізуйте його вже сьогодні!