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

Si tienes páginas largas y 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:

    ```html {% comment %} Reduce el valor a continuación si necesitas que el botón Volver al inicio aparezca más arriba en la página. Ese valor está en píxeles. {% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} Desplazamiento vertical desde la parte inferior del navegador para la posición del botón. {% endcomment %} {% assign position_from_bottom = '6em' %}

    Volver al inicio {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

    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' %}

    Tu código debería verse así:

    Incluir fragmento Volver al inicio
    ]

    1. Haz clic en Guardar.

    Configura 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