Agregar un botón Volver al inicio en páginas largas

Si tienes páginas largas que requieren mucho desplazamiento, puedes agregar a tu tema un botón Volver al inicio.

Ejemplo de volver al inicio

Crear un fragmento de volver al inicio

  1. En el directorio Fragmentos, haz clic en Agregar un nuevo fragmento.

  2. Asigna a tu fragmento el nombre back-to-the-top, luego haz clic en Crear fragmento. Tu archivo del fragmento se abrirá en el editor de código.

  3. Pega el siguiente código en tu archivo recién creado back-to-the-top:

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}

<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};

        if (scrolled > coords) {
        goTopBtn.classList.remove('hide');
        }
        if (scrolled < coords) {
        goTopBtn.classList.add('hide');
        }
    }

    function backToTop() {
        if (window.pageYOffset > 0) {
        window.scrollBy(0, -80);
        setTimeout(backToTop, 0);
        }
    }

    var goTopBtn = document.querySelector('.back-to-top');

    window.addEventListener('scroll', trackScroll);
    goTopBtn.addEventListener('click', backToTop);
    })();
</script>
  1. Haz clic en Guardar.

Incluir tu fragmento

  1. En la carpeta Diseños, abre el archivo theme.liquid.

  2. Desplázate a la parte inferior del archivo. Justo arriba de la etiqueta de cierre </body>, pega este código:

{% render 'back-to-the-top' %}
Your code should look like this:

![Back to top include snippet](/manual/customize/back-to-top-include-snippet.png)]
  1. Haz clic en Guardar.

Configurar el botón Volver al inicio (opcional)

Para personalizar el botón Volver al inicio, haz clic aquí y mira las primeras líneas de tu fragmento.

  • Para cambiar la posición de tu botón respecto a la parte inferior del navegador, edita el valor position_from_bottom:
{% assign position_from_bottom = '4em' %}
  • Para cambiar la distancia hacia abajo que necesita un cliente para desplazarse antes de que se muestre el botón, edita el valor vertical_offset_for_trigger:
{% assign vertical_offset_for_trigger = 300 %}

Tienda de demostración

Visita la tienda de demostración para ver un ejemplo de esta personalización.

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis