Este artículo también está disponible en:

🚀 Cómo personalizar el espaciamiento alrededor de la máquina de ranura

ℹ️ 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.


A veces el picador se sienta un poco demasiado cerca de los elementos que lo rodean, o se siente angosto dentro de su propio contenedor. Algunos pixeles de la sala de respiración pueden hacer que se vea en casa en su página del carrito 📐


Con el Spacing Ajustes Hoppy Delivery Dates, puede ajustar los márgenes alrededor de cada parte del selector - por separado para Desktop y Mobile.



📌 Antes de empezar


  • Hoppy Delivery Dates está instalado y la aplicación embed está habilitada en su tema
  • El recolector de ranura es visible en su página del carrito
  • Estás conectado a tu Shopify admin



Paso 1 - Abra la página de Apariencia


En la navegación de la aplicación, vaya a:


Hoppy Delivery Dates → Aspecto


Encontrar el Spacing tarjeta.


La tarjeta tiene Escritorio y Móvil pestañas — el espaciamiento se configura por separado para cada dispositivo.



Paso 2 - Comprender los cuatro grupos de espaciamiento


La tarjeta se divide en cuatro grupos, y cada uno controla el margen alrededor de una parte diferente del selector:


  • SECCIÓN MARGIN → espacio alrededor de la sección de selección de ranura
  • MARGIN → espacio alrededor del texto de encabezado (por ejemplo: "¿Cuándo quieres conseguir esta orden?")
  • DATE " Time PICKER MARGIN → espacio alrededor de las cajas de entrada de fecha y hora
  • ERROR MESSAGE MARGIN → espacio alrededor de mensajes de error (mostrado cuando un cliente no ha seleccionado una ranura o está por debajo del valor mínimo del pedido)


Cada grupo tiene los mismos cuatro campos, todos en píxeles:


  • Top
  • Bottom
  • Izquierda
  • Bien.


ℹ️ Todos los campos por defecto 10 px.



Paso 3 - Ajustar los márgenes


Introduzca el número de píxeles que desea en cada campo, sin necesidad de escribir "px", se añade automáticamente.


Ejemplo


  • El picker está tocando el botón de salida → aumentar SECCIÓN MARGIN → a 24
  • La partida se siente pegada a la caja de fecha → aumentar MARGIN DE AGUA → a 16
  • En el móvil, las cajas de picker estiran el borde al borde → set Fecha " Time PICKER MARGIN → Izquierda y Bien. a 0


💡 Haga pequeños cambios (5-10 px a la vez), ahorre y compruebe su página del carrito — el espaciado es mucho más fácil de juzgar en la página en vivo que en los campos.



Paso 4 - Repetición para móvil (opcional)


Cambiar a la Móvil pestaña si las pantallas más pequeñas necesitan un espaciado diferente. Los diseños móviles a menudo necesitan márgenes más ajustados que el escritorio, así que vale la pena un cheque rápido.



Paso 5 - Guardar y revisar


Haga clic Guardar en la parte superior de la página.


A continuación, abrir la página del carrito de la tienda y comprobar el espaciamiento en el escritorio y el móvil 👀



⚠️ Notas importantes


⚠️ El espaciamiento de escritorio y móvil son independientes: cambiar una pestaña no afecta a la otra.


ℹ️ Estas configuraciones solo controlan los márgenes (espacio) afuera cada elemento). Ellos no cambian el tamaño del propio picker - para eso, ver el Ancho del contenedor del picker de ranura ajuste cubierto en Cómo Posicionar el Picker de Ranura en la página del Carrito.



🎉 Resultado final


Una vez configurado con éxito:


✅ La máquina tragaperras tiene un espacio cómodo alrededor de ella en la página del carrito ✅ El encabezamiento, las casillas de hora y los mensajes de error ya no se sienten empapados ✅ Escritorio y Móvil cada uno consigue espaciado que se ajusta a su tamaño de pantalla ✨

Actualizado el: 10/09/2026

¿Este artículo te resultó útil?

Comparte tu opinión

Cancelar

¡Gracias!