ℹ️ Note: Este artículo fue traducido automáticamente usando AI y puede contener imprecisiones. Si algo se ve mal, póngase en contacto con nuestro equipo de apoyo.

Hoppy Free Shipping ofrece dos tipos de colocación primaria para la barra de envío gratis:

• 📌 Lugares predeterminados
• 🧩 Lugares personalizados

En la mayoría de los casos, las áreas de colocación por defecto funcionan perfectamente bien.

Sin embargo, a veces los comerciantes pueden querer más flexibilidad y preferir colocar la barra de envío gratis en una ubicación completamente personalizada dependiendo de su diseño de tienda.

Eso es exactamente donde el Posición personalizada característica se vuelve útil ✨

Utilizando la posición personalizada, se puede colocar la barra de envío gratuita:

• Dentro Shopify Bloques de aplicación
• Dentro de las secciones de líquido personalizado
• Archivos temáticos interiores
• Dentro de las ubicaciones de almacén controladas manualmente

Esta documentación explica cómo habilitar adecuadamente la posición personalizada y cómo colocar la barra de envío gratuita utilizando ambos métodos disponibles.

⚠️ Comprender las diferencias de flujo de trabajo

El comportamiento de la posición personalizada depende del tipo de flujo de trabajo seleccionado mientras se crea la configuración de envío gratis Upsell.

🎯 Sobre la base de los objetivos (plazamiento obligatorio)

El Sobre la base de los objetivos flujo de trabajo incluye múltiples áreas de colocación:

• Página
• Cart Drawer
• Página
• Banner

Para este flujo de trabajo:

→ Abrir la ficha de colocación que desea personalizar
→ Cambiar su colocación a Posición personalizada

Una vez habilitado:

→ A Código de la barra de publicidad se pone disponible

⚠️ Importante:

La ficha de colocación debe cambiarse a Posición personalizada.

De lo contrario, la barra de envío libre continuará utilizando el comportamiento de colocación predeterminado.

📍 Basado en la colocación (Single Placement)

El Basado en la colocación el flujo de trabajo controla sólo un área de colocación.

Para este flujo de trabajo, se dispone de dos métodos de posición personalizada:

1. 🆔 ID de la barra de transporte
2. 🧩 Código de la barra de publicidad

🆔 ID de la barra de transporte

Este método se utiliza principalmente con Shopify App Blocks.

El ID de la barra de envío conecta el bloque de aplicación de la tienda con la configuración de envío gratuita seleccionada.

🧩 Código de la barra de publicidad

Este método proporciona una mayor flexibilidad de colocación avanzada.

El fragmento de código puede ser:

• Añadido dentro de un bloque líquido personalizado
• Añadido directamente en Shopify Archivo temático

🛠️ Paso 1 - Abierto Hoppy Free Shipping

Abrir el Hoppy Free Shipping aplicación de tu Shopify Admin.

📂 Paso 2 - Abrir o Crear un Upsell de Envío gratuito

Puedes:

→ Abrir una configuración de Upsell de envío libre existente
→ O crear una nueva configuración

⚙️ Paso 3 — Navegue a la configuración de ubicación

El siguiente paso depende del tipo de flujo de trabajo que se utiliza actualmente.

🎯 Sobre la base de los Objetivos de Desarrollo del Milenio

Si usted está usando el Sobre la base de los objetivos flujo de trabajo:

→ Abrir la ficha de colocación donde desea colocar manualmente la barra de envío gratis

Ejemplos:

• Página
• Cart Drawer
• Página
• Banner

📍 Basado en el flujo de trabajo de colocación

Si usted está usando el Basado en la colocación flujo de trabajo:

→ Navegar directamente al Colocación pestaña

Dado que este flujo de trabajo controla sólo una colocación, todos los ajustes relacionados con la colocación aparecerán allí.

🎯 Paso 4 - Cambio de ubicación a la posición personalizada

Dentro de la configuración de Placement:

→ Cambiar el Mostrar encendido (Incluir) o Colocación opción a:

Posición personalizada

Entonces:

→ Guardar

⚠️ Importante:

Posición personalizada de habilitación elimina la barra de envío gratuita de las áreas de colocación predeterminadas.

La barra de envío gratuita aparecerá ahora sólo donde lo coloca manualmente.

ℹ️ Si usas Sobre la base de los objetivos flujo de trabajo, ir a Método 2.

🆔 Método 1 - Uso del ID de la barra de envío

Este método es ideal cuando desea colocar la barra de envío gratuita directamente utilizando Shopify’s Theme Editor.

ℹ️ Este método está disponible principalmente para el Basado en la colocación flujo de trabajo.

🎨 Paso 5 - Abierto Shopify Theme Editor

Desde Shopify Admin:

→ Ir a Canales de venta → Tienda Online
→ Editar tema

Esto abre el Shopify Theme Editor.

➕ Paso 6 - Añadir el bloque de aplicación de envío gratis

Dentro del Theme Editor:

→ Navegue a la sección donde desea que aparezca la barra de envío gratuita
→ Hover alrededor de secciones compatibles hasta el color azul ➕ icono
→ Agregar bloque

Entonces:

→ Abrir el Aplicaciones categoría
→ Seleccionar Envío gratuito Upsell

El bloque de aplicación se añadirá ahora a la zona de almacén seleccionada.

🔗 Paso 7 - Añadir el ID de la barra de envío

Una vez añadido el bloque de aplicación:

→ Introduzca el ID de la barra de envío dentro de la configuración del bloque de aplicación

Entonces:

→ Guardar Shopify Tema
→ Guardar la configuración de envío gratis dentro Hoppy Free Shipping también

⚠️ Importante:

Ambos ahorros son necesarios.

De lo contrario, la barra de envío gratuita puede no aparecer correctamente en el escaparate.

🧩 Método 2 - Uso del código de la barra de envío

Este método es útil cuando desea más flexibilidad de colocación avanzada.

El Código de la Barra de Envío puede ser:

• Añadido usando un bloque líquido personalizado
• Añadido directamente en Shopify Archivo temático

ℹ️ Este es el único método de posición personalizada disponible para el Sobre la base de los objetivos flujo de trabajo.

➕ Paso 8 - Añadir un bloque líquido personalizado

Dentro Shopify Theme Editor:

→ Navegue a la zona donde desea que aparezca la barra de envío gratuita
→ Hover alrededor de secciones compatibles hasta el color azul ➕ icono
→ Buscar Custom Liquid

Entonces:

→ Añadir el código de la barra de envío Snippet dentro del bloque líquido personalizado

Esto permite que la barra de envío libre se renderice en la posición de tienda seleccionada.

💻 Agregar el código Snippet directamente en los archivos temáticos

Si es necesario, el código de barras de envío también se puede añadir directamente en Shopify Archivos de código de tema.

Esto es útil cuando:

• Los bloques de aplicación no están disponibles
• Las secciones líquidas personalizadas no son compatibles
• La personalización avanzada del almacén es necesaria

⚙️ Apertura Shopify Code Editor

Para abrir el Shopify Code Editor:

→ Ir a Canales de venta → Tienda Online
→ Haga clic en el menú de tres puntos junto al Editar tema botón
→ Código

⚠️ Importante:

No recomendamos modificar Shopify Los archivos temáticos a menos que:

• Estás cómodo trabajando con Shopify código
• O usted entiende qué cambios se están haciendo

Modificaciones incorrectas dentro Los archivos temáticos pueden afectar el comportamiento de la tienda.

🧩 Identificar el Área Correcta de Tienda Frontal

Antes de insertar el código de la barra de envío Snippet, es importante identificar la ubicación exacta de la tienda donde debe aparecer la barra de envío gratuita.

Una manera sencilla de hacer esto:

→ Abra su escaparate en el navegador
→ Haga clic derecho cerca de la zona donde desea la barra de envío gratis
→ Inspección

Esto abre el navegador Herramientas de desarrollo.

Desde allí:

→ Inspeccionar la estructura HTML circundante
→ Identificar nombres de clase útiles o referencias de sección
→ Coincide con las secciones correspondientes Shopify .liquid archivos en el Editor del Código

Esto le ayuda a localizar el archivo Tema correcto con más precisión ✨

-...

🔍 Encontrar el archivo Tema Correcto

Después de abrir la Shopify Code Editor:

→ Navegar a través de los archivos Theme en el lado izquierdo
→ Localizar el .liquid archivo responsable del área donde desea que la barra de envío libre aparezca
→ Buscar cualquier referencia id/class usando la función Búsqueda del Editor de Códigos.
→ Haga clic en el más prometedor .liquid archivo

Por ejemplo:

• Las secciones relacionadas con productos pueden existir dentro:
• • main-product.liquid
  • product-template.liquid
• Las secciones relacionadas con el carrito pueden existir dentro:
• • cart.liquid
  • cart-drawer.liquid
• Las secciones personalizadas pueden existir dentro:
• • sections/*.liquid

➕ Añadir el código de la barra de envío

Una vez correcto .liquid file is identified:

→ Pruebe el código de la barra de envío en la posición deseada dentro del archivo

⚠️ Importante:

Asegúrese de que el snippet se añade cuidadosamente en la ubicación correcta.

La colocación incorrecta puede causar:

• Problemas de diseño
• Representación inadecuada
• Comportamiento inesperado frente al almacén

💾 Guardar el archivo Tema

Después de insertar el fragmento de código:

→ Guardar

Entonces:

→ Actualizar la vista previa de la tienda
→ Verificar que la barra de envío libre aparece correctamente en la ubicación personalizada seleccionada ✨

🎉 Resultado final

Una vez configurado con éxito:

✅ La barra de envío gratis puede aparecer en posiciones completamente personalizadas
✅ Shopify Los bloques de aplicación pueden conectarse correctamente con el ID de la barra de envío
✅ La colocación avanzada frente a la tienda se hace posible usando Code Snippets
✅ Los comerciantes ganan mucha más flexibilidad sobre la visibilidad de la tienda ✨

Actualizado el: 10/09/2026