Ir al contenido

Botón y carrito (ajustes del tema)

Además del panel de la app, Optical Form expone ajustes en el editor de temas de Shopify: un bloque para el botón y un app embed para el drawer y el carrito.

Se añade a la sección del producto y controla el botón que abre el drawer.

  • Contenido: texto del botón (vacío = texto traducido por defecto) y, opcionalmente, un icono de tu biblioteca de Archivos, con su posición (antes o después del texto) y la separación respecto al texto.
  • Colores: fondo, texto y borde, cada uno con su variante hover. Por defecto gris oscuro neutro.
  • Forma y tipografía (comunes): radio, grosor de borde, grosor de letra, letter-spacing (px) y transformación.
  • Escritorio y Móvil por separado: ajustar al contenido, anchura (%), padding vertical/horizontal y tamaño de letra. El corte está en 750px.
  • Avanzado → variant_input_selector: selector CSS para la variante seleccionada; solo si el tema no actualiza [name="id"] ni ?variant=. Ver Integración con el tema.

Se activa en Incrustaciones de la aplicación y controla el drawer y su relación con el carrito del tema.

Aspecto del carrito

  • Compactar las líneas de complementos (cart_tidy_addons) — apagada por defecto. Encoge las líneas de los complementos para que la montura siga siendo la protagonista. Solo cambia tamaños: no esconde la cantidad ni el botón de eliminar. Verificada en Horizon 4.x; en temas que no imprimen esa clase no hace nada.
  • CSS personalizado — reglas para sobrescribir cualquier estilo del drawer o del botón. Se carga en todas las páginas del escaparate, así que sirve también para reestilizar cómo pinta tu tema las propiedades de línea en el carrito.

Integración con el carrito

  • Tras añadir al carrito (cart_after_add): abrir el cart drawer, redirigir a /cart, o no hacer nada.
  • Mantener el carrito sincronizado (cart_intercept) — encendida por defecto. En temas con los eventos estándar de carrito de Shopify escucha de forma pasiva; en temas antiguos monitoriza las llamadas a la API del carrito.

Avanzado — solo si tu tema no se detecta solo:

  • Abrir el drawer desde el icono del carrito (cart_intercept_icon) — apagada por defecto. Actívala solo si al pulsar el icono no pasa nada.
  • Selectores CSS (vacíos = autodetección): contador del carrito, icono del carrito e IDs de secciones a refrescar. No hay selector propio para el cart drawer: se detecta solo.
  • Modo debug — vuelca la actividad de CartBridge a la consola del navegador.