Cómo agregar un botón de "Volver arriba" en tu tienda Shopify

Si tienes una tienda en Shopify y quieres mejorar la experiencia de navegación de tus clientes, un botón de "Volver arriba" es una excelente opción. Este pequeño detalle facilita que los usuarios puedan regresar rápidamente al inicio de la página sin necesidad de hacer scroll manualmente, mejorando la usabilidad de tu sitio.

El botón que podemos lograr

A continuación, te explico cómo agregarlo de manera sencilla:

Paso a paso para agregar un botón "Volver arriba"

Accede a tu tienda en Shopify: Inicia sesión en tu panel de administración de Shopify y ve al apartado de "Temas" en el menú de "Tienda online".
Edita el código del tema: Haz clic en "Acciones" y selecciona "Editar código". Aquí es donde agregarás el código necesario para el botón.
Agrega el código HTML y CSS: Ve al archivo theme.liquid y busca el cierre de la etiqueta <body>. Justo antes de este cierre, añade el siguiente código HTML:

<a href="#" id="back-to-top" title="Volver arriba">&uarr; Volver arriba</a>

Luego, en tu archivo de assets/base.css, agrega el siguiente código CSS para darle estilo al botón:

#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: none;
  background-color: #000;
  color: white;
  padding: 10px;
  border-radius: 0;
  text-align: center;
  text-decoration: none !important;
  z-index: 1000;
  transition: opacity 0.3s ease;
}

Agrega funcionalidad con JavaScript: Ahora necesitas que el botón aparezca solo cuando el usuario haga scroll hacia abajo. Para ello, agrega el siguiente script de JavaScript en el archivo assets/global.js o directamente en el archivo theme.liquid antes del cierre de la etiqueta </body> en este segundo caso recuerda envolver el código en una etiqueta <script></script>:

document.addEventListener('scroll', function() {
    const scrollTopButton = document.getElementById('back-to-top');
    if (window.scrollY > 300) {
        scrollTopButton.style.display = 'block';
    } else {
        scrollTopButton.style.display = 'none';
    }
});
 
document.getElementById('back-to-top').addEventListener('click', function(event) {
    event.preventDefault();
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

Guarda los cambios: Una vez que hayas agregado el código en los archivos correspondientes, guarda los cambios y revisa cómo se ve el botón en tu tienda. Si todo está correcto, el botón aparecerá cuando el usuario haga scroll y los llevará al principio de la página cuando hagan clic en él.

Si encuentras algún problema al seguir estos pasos o te gustaría algo más personalizado y único para tu tienda, ¡estoy aquí para ayudarte! Puedo diseñar y desarrollar funciones personalizadas para tu tienda Shopify, optimizando la experiencia de tus clientes y mejorando el rendimiento de tu negocio. No dudes en contactarme si necesitas asesoría o servicios a medida.