Shopify Hacks

Descubre los mejores Shopify Hacks para mejorar y personalizar tu tienda. Aquí encontrarás fragmentos de código en Shopify Liquid listos para copiar y pegar, que te ayudarán a optimizar tu tienda sin necesidad de aplicaciones externas.


🚀 Con estos trucos podrás:
✔️ Personalizar el diseño y la funcionalidad de tu tienda.
✔️ Mejorar la experiencia del usuario y aumentar la conversión.
✔️ Agregar nuevas funciones con pequeños ajustes de código.

📌 Explora los códigos, aplícalos en tu tienda y lleva tu negocio en Shopify al siguiente nivel. 🔥

Elimina "Powered by Shopify" del Footer de tu Tienda

Si quieres que tu tienda en Shopify luzca más profesional, puedes eliminar el texto "Powered by Shopify" que aparece en el footer de forma predeterminada. Con este simple código en Shopify Liquid, podrás personalizar completamente el pie de página sin necesidad de aplicaciones externas.

💡 Beneficios de eliminar el "Powered by Shopify":

  • Hace que tu tienda se vea más profesional.
  • Permite personalizar el footer con tu propia marca.
  • Mejora la experiencia del usuario y la credibilidad de tu tienda.

Copia el código a la derecha y aplícalo en tu tema de Shopify en menos de un minuto.

 {% comment %} Eliminar firma de Shopify {% endcomment %}
{% capture powered_by_link %}{% endcapture %} 

 {% if customer %} 
¡Hola, {{ customer.first_name }}! Bienvenido de nuevo a nuestra tienda
 
{% endif %}

Mostrar el Nombre del Cliente en la Página de Inicio

Este código permite mostrar un mensaje de bienvenida personalizado con el nombre del cliente en la página de inicio de tu tienda Shopify. Si el cliente no ha iniciado sesión, se mostrará un mensaje genérico.

Agregar un Botón de "Seguir Comprando" en el Carrito

Este código agrega un botón de "Seguir Comprando" en la página del carrito, permitiendo que los clientes regresen fácilmente a la tienda sin perder su carrito. Mejora la experiencia del usuario y aumenta la conversión.


📌 Cómo Implementarlo en Shopify:
1️⃣ Ve a Online Store > Themes > Actions > Edit Code.
2️⃣ Abre el archivo cart.liquid.
3️⃣ Pega el código donde quieras que aparezca el botón (recomendado antes del botón de "Checkout").
4️⃣ Guarda los cambios y revisa tu tienda.


🚀 Copia el código y úsalo en tu tienda Shopify para mejorar la conversión! 🔥

 <style>
  .continue-shopping {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ff9800;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background 0.3s;
  }
  .continue-shopping:hover {
    background-color: #e68900;
  }
</style>
<a href="/" class="continue-shopping">⬅️ Seguir Comprando</a> 

 <p>© <span id="currentYear"></span> Todos los derechos reservados. </p>
<script>
  document.getElementById("currentYear").textContent = new Date().getFullYear();
</script>

Mostrar el Año Actual Automáticamente en el Footer

Cómo Implementarlo en Shopify:


1️⃣ Ve a Online Store > Themes > Actions > Edit Code.
2️⃣ Abre el archivo footer.liquid.
3️⃣ Pega el código donde quieras mostrar el año (normalmente antes del cierre </footer> ).
4️⃣ Guarda los cambios y revisa tu tienda.



✅ Beneficios:
✔️ No necesitas actualizar el año manualmente cada enero.
✔️ Mantiene tu tienda siempre actualizada.
✔️ Fácil implementación sin apps externas.


🚀 Copia el código y úsalo en tu tienda Shopify para automatizar el footer! 🔥

Mostrar un Mensaje de "Producto Agregado al Carrito" sin Recargar la Página

Cómo Implementarlo en Shopify:


1️⃣ Ve a Online Store > Themes > Actions > Edit Code.
2️⃣ Abre el archivo theme.liquid o product.liquid (dependiendo de dónde quieras aplicar el mensaje).
3️⃣ Pega el código antes del cierre de </body> .
4️⃣ Guarda los cambios y revisa tu tienda.



✅ Beneficios:
✔️ Mejora la experiencia del usuario sin redirecciones innecesarias.
✔️ Aumenta la conversión al confirmar que el producto fue agregado.
✔️ Fácil implementación sin apps externas.


🚀 Copia el código y úsalo en tu tienda Shopify para mejorar la experiencia del carrito! 🔥

 <style>
  .cart-message {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #28a745;
    color: white;
    padding: 15px;
    border-radius: 5px;
    font-weight: bold;
  }
</style>
<div class="cart-message" id="cartMessage">✅ Producto agregado al carrito</div>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll("form[action*='/cart/add']").forEach(function(form) {
      form.addEventListener("submit", function(event) {
        event.preventDefault();
        var formData = new FormData(form);
        fetch('/cart/add', {
          method: 'POST',
          body: formData
        }).then(() => {
          document.getElementById("cartMessage").style.display = "block";
          setTimeout(() => {
            document.getElementById("cartMessage").style.display = "none";
          }, 3000);
        });
      });
    });
  });
</script> 

 <style>
  .cart-count {
    position: absolute;
    top: -5px;
    right: -10px;
    background: red;
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 50%;
  }
</style>
<div style="position: relative; display: inline-block;">
  <a href="/cart">
    🛒 Carrito <span id="cartCount" class="cart-count">0</span>
  </a>
</div>
<script>
  function updateCartCount() {
    fetch('/cart.js')
      .then(response => response.json())
      .then(data => {
        document.getElementById("cartCount").innerText = data.item_count;
      });
  }
  document.addEventListener("DOMContentLoaded", updateCartCount);
</script>

Mostrar el Total de Productos en el Carrito en el Icono del Menú

Este código agrega un contador de productos en el carrito dentro del icono del menú. Es ideal para mejorar la experiencia del usuario, ya que muestra cuántos productos han sido agregados sin necesidad de ir a la página del carrito.


Cómo Implementarlo en Shopify:
1️⃣ Ve a Online Store > Themes > Actions > Edit Code.
2️⃣ Abre el archivo header.liquid o theme.liquid (dependiendo de dónde quieras mostrar el contador).
3️⃣ Pega el código donde tengas el icono del carrito.
4️⃣ Guarda los cambios y revisa tu tienda.


✅ Beneficios:
✔️ Mejora la experiencia del usuario al mostrar la cantidad de productos en el carrito.
✔️ Reduce la fricción al navegar y fomenta la conversión.
✔️ Fácil implementación sin necesidad de aplicaciones externas.



🚀 Copia el código y úsalo en tu tienda Shopify para optimizar la navegación! 🔥

Agregar un Campo de "Notas del Pedido" en el Carrito

Este código agrega un campo de notas en la página del carrito, permitiendo que los clientes dejen instrucciones especiales o comentarios sobre su pedido antes de finalizar la compra. Es útil para solicitudes personalizadas, instrucciones de entrega o detalles adicionales.


Cómo Implementarlo en Shopify:
1️⃣ Ve a Online Store > Themes > Actions > Edit Code.
2️⃣ Abre el archivo cart.liquid.
3️⃣ Pega el código dentro del formulario de carrito ( <form action="/cart" method="post"> ).
4️⃣ Guarda los cambios y revisa tu tienda.


✅ Beneficios:
✔️ Permite que los clientes agreguen instrucciones especiales a su pedido.
✔️ Útil para pedidos personalizados o instrucciones de entrega.
✔️ Se guarda automáticamente en el pedido sin necesidad de aplicaciones.



🚀 Copia el código y úsalo en tu tienda Shopify para mejorar la experiencia de compra! 🔥

 <label for="cart-notes">📝 Notas del Pedido (Opcional)</label>
<textarea id="cart-notes" name="note" rows="3" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px;"></textarea>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var cartForm = document.querySelector("form[action='/cart']");
    if (cartForm) {
      var notesField = document.getElementById("cart-notes");
      notesField.addEventListener("input", function() {
        fetch('/cart/update.js', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ note: notesField.value })
        });
      });
    }
  });
</script> 

 <div id="cart-timer-container" style="background: #ff9800; color: white; padding: 10px; text-align: center; font-size: 18px; font-weight: bold; border-radius: 5px;">
  ⏳ Completa tu compra en <span id="cart-timer">10:00</span> antes de que expire tu carrito.
</div>
<script>
  function startCartTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
      minutes = parseInt(timer / 60, 10);
      seconds = parseInt(timer % 60, 10);
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      display.textContent = minutes + ":" + seconds;
      if (--timer < 0) {
        timer = 0;
        document.getElementById("cart-timer-container").innerHTML = "⏳ ¡Tiempo agotado! No pierdas tu oferta.";
      }
    }, 1000);
  }
  document.addEventListener("DOMContentLoaded", function () {
    var display = document.getElementById("cart-timer");
    startCartTimer(600, display); // 10 minutos
  });
</script>

Agregar una Cuenta Regresiva en el Carrito para Urgencia de Compra

📌 Cómo Implementarlo en Shopify:
1️⃣ Ve a Online Store > Themes > Actions > Edit Code.
2️⃣ Abre el archivo cart.liquid.
3️⃣ Pega el código donde quieras mostrar la cuenta regresiva (recomendado cerca del botón de pago).
4️⃣ Guarda los cambios y revisa tu tienda.


✅ Beneficios:
✔️ Crea urgencia para que los clientes completen su compra más rápido.
✔️ Reduce el abandono del carrito al hacer que los clientes sientan que el tiempo es limitado.
✔️ Fácil de implementar sin necesidad de aplicaciones externas.



🚀 Copia el código y úsalo en tu tienda Shopify para aumentar las conversiones! 🔥

Agregar un Campo para Código de Descuento en el Carrito

Cómo Implementarlo en Shopify:
1️⃣ Ve a Online Store > Themes > Actions > Edit Code.
2️⃣ Abre el archivo cart.liquid.
3️⃣ Pega el código donde quieras mostrar el campo de descuento (recomendado cerca del botón de pago).
4️⃣ Guarda los cambios y revisa tu tienda.


✅ Beneficios:
✔️ Permite a los clientes aplicar descuentos antes del checkout.
✔️ Mejora la experiencia de compra al hacer visible la opción de cupones.
✔️ Fácil implementación sin necesidad de apps.



🚀 Copia el código y úsalo en tu tienda Shopify para aumentar las conversiones! 🔥

 <div style="margin-top: 20px; padding: 15px; border: 1px solid #ccc; border-radius: 5px;">
  <label for="discount-code">🎟️ Ingresa tu código de descuento:</label>
  <input type="text" id="discount-code" placeholder="Escribe tu cupón" style="width: 70%; padding: 8px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px;">
  <button onclick="applyDiscount()" style="background: #ff9800; color: white; padding: 8px 12px; border: none; border-radius: 5px; font-weight: bold; cursor: pointer;">Aplicar</button>
  <p id="discount-message" style="font-weight: bold; margin-top: 10px;"></p>
</div>
<script>
  function applyDiscount() {
    var discountCode = document.getElementById("discount-code").value;
    if (discountCode.trim() !== "") {
      window.location.href = "/checkout?discount=" + encodeURIComponent(discountCode);
    } else {
      document.getElementById("discount-message").innerText = "⚠️ Ingresa un código de descuento válido.";
      document.getElementById("discount-message").style.color = "red";
    }
  }
</script> 

 {% if cart.item_count == 0 %}
  <div style="text-align: center; margin-top: 20px;">
    <p style="font-size: 18px; font-weight: bold; color: #333;">🛒 Tu carrito está vacío</p>
    <a href="/" style="display: inline-block; padding: 12px 20px; background: #ff9800; color: white; text-decoration: none; font-weight: bold; border-radius: 5px; font-size: 16px;">⬅️ Volver a la tienda</a>
  </div>
{% endif %}

Agregar un Botón de "Volver a la Tienda" en el Carrito Vacío

Este código agrega un botón de "Volver a la Tienda" en la página del carrito cuando está vacío. Esto ayuda a los clientes a seguir explorando productos en lugar de abandonar la tienda.