Añadir el efecto de nieve a tu tienda Shopify es una excelente manera de darle un toque de invierno a tu sitio. Una forma de agregar el efecto de nieve es usar un fragmento de código. Este método es rápido y fácil, y no requiere ningún software o conocimiento especial. Simplemente sigue los pasos que te daremos y estará listo.
En este blog encontrarás los pasos seguros para agregar el efecto de nieve a tu tienda Shopify:
- Crear un respaldo de tu tema
- Pega código para agregar el efecto de nieve
- Elimina el efecto de nieve de tu tienda
Te puede interesar:
Crea un respaldo de tu tema
Antes de personalizar o editar un tema, te recomiendo hacer una copia de seguridad para que puedas descartar los cambios y comenzar de nuevo si es necesario.
Recuerda que si ya tienes 20 temas agregados a tu panel de control de Shopify, tendrás que eliminar uno antes de poder duplicar otro.
Pasos:
- Desde tu panel de control de Shopify, ve a Tienda online > Temas.
- Para el tema que deseas compartir, haz clic en el botón … para abrir el menú de acciones y luego haz clic en Duplicar.
El tema duplicado aparece en la página Temas. El nombre será Copia de + el nombre del tema que duplicaste.
Edita el código para agregar el efecto de nieve
Deberás editar el código de tu tema para agregar el efecto de nieve.
Pasos para editar el código:
- Desde tu panel de control de Shopify, ve a Tienda online > Temas.
- Haz clic en Acciones > Editar Código.
Agregaremos una línea de código en el código de nuestra tienda:
- Busca la carpeta Diseños.
- Abre el archivo theme.liquid
- Busca el la línea de código </head>
- Debajo, agrega el siguiente código y haz clic en el botón de Guardar.
{%- render 'div_html',t_name:t_name -%}
Deberás agregar un fragmento con un nombre específico:
- Busca la carpeta Fragmentos.
- Haz clic en Agregar un nuevo fragmento.
- Escribe en nombre del archivo div_html
- Haz clic en el botón Listo.
- Copia y pega el siguiente código y haz clic en Guardar
<style>
body {
background-color: transparent;
overflow-x: hidden;
}
.snow {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom:0;
z-index: 999;
pointer-events: none;
background-color: rgb(0, 0, 0,.05);
}
</style>
<canvas id="snow" width="1848" height="515">
</canvas>
¡Listo! tu tienda ya tiene el efecto de nieve.
Elimina el efecto de nieve a tu tienda
Al finalizar la temporada, deberás eliminar este efecto de nieve de tu tienda en línea.
Pasos:
- Desde tu panel de control de Shopify, ve a Tienda online > Temas.
- Busca la carpeta Diseños.
- Abre el archivo theme.liquid
- Busca y elimina la línea de código {%- render ‘div_html’,t_name:t_name -%}
- Busca la carpeta Fragmentos.
- Busca y elimina el archivo Div_html
- Haz clic en el botón Guardar.
Así habrás quitado los códigos que agregan el efecto nieve en tu tienda en línea Shopify.
¿Como quedó tu tienda?
Déjanos en los comentarios la liga de tu tienda con este efecto nieve, nos encantará ver tu logro.
Leer más
Suscríbete
Recibe consejos e inspiración para ayudarte a impulsar tu tienda en línea, directo a tu correo.
