Añadir CSS personalizado

Los ajustes de estilo de la aplicación cubren casi todo lo que necesitan las tiendas. Cuando no bastan (un radio de borde concreto, un retoque que solo debe aplicarse en el móvil), puedes añadir tu propio CSS.

Precaución

Esta es la única página realmente técnica de esta documentación. Si no te sientes cómodo con el CSS, describe lo que quieres a [email protected]. El equipo suele poder facilitarte el fragmento exacto, y el CSS que no escribes es CSS que no puede romperse cuando se actualice tu tema.

Empieza con los ajustes integrados

Casi todos los cambios de aspecto para los que se recurre al CSS ya son un ajuste en Quote settings > Customize. Revísalos antes de escribir nada.

Dónde	Qué puedes definir
Button & widget > Style	Button type (Filled / Outline / Text link), Size (Medium / Large / Full width), Text color, Background color y Font size.
Quote form > Style	Un estilo predefinido, además de Match theme styling if possible.
Quote form > Customize text	Font style.
Quote form > Customize form color	Title bar color, Title bar background, Color, Background color, Border color y Quote popup primary color.
Quote cart page > Enable Quote Cart Widget	Text color y Background color: son los únicos dos que admite el widget flotante.

La mayoría de los cambios de aspecto ya son ajustes: empieza por aquí.

Nota

Match theme styling if possible hace por sí solo buena parte del trabajo: «Theme styling applies on your storefront and is not shown in this preview.» Actívalo y mira tu tienda online en vivo antes de decidir que el formulario necesita CSS. Consulta Adaptar el estilo a tu tema.

Precaución

Hay una tarea que nunca debería encargarse al CSS: ocultar un precio o un botón de compra. Advanced settings > Hide price tiene ajustes específicos para eso, incluidos Hide Add To Cart button y Hide Buy Now button. Una regla de CSS deja el precio en la página, donde puede verse un instante antes de que cargue tu hoja de estilos; consulta Ocultar Add to Cart y Buy now.

Dónde guardar tu CSS

Lo guardes donde lo guardes, que sea en un sitio que puedas encontrar de nuevo y deshacer. El CSS guardado en tu propio tema tiene un efecto secundario útil: se versiona con el tema, así que duplicar el tema antes de editar te da algo a lo que volver.

Nota

Repasa los ajustes integrados anteriores antes de escribir nada. Si no sabes si un cambio corresponde a un ajuste o al CSS, pregunta primero a [email protected]: te ahorra mantener una regla que nunca hizo falta.

Encontrar qué seleccionar

Haz clic derecho en el elemento de tu tienda online y elige Inspeccionar. Así verás los nombres de clase sobre los que escribir las reglas.

Inspecciona el botón de cotización en tu propia tienda online para encontrar qué seleccionar.

Conviene saber dos cosas antes de empezar:

• El botón de cotización se muestra con el Button text que hayas definido, en el lugar que elegiste en Button position; por tanto, revisa Product page button position antes de ponerte a buscarlo.
• El widget flotante de cotización, con la etiqueta Quote (n), está en un contenedor con la clase grfq-quote-widget-container.

Nota

¿No encuentras el botón en una página de colección para inspeccionarlo? Pasa el cursor sobre una tarjeta de producto. En los temas modernos, la aplicación lo asocia al control de adición rápida del propio tema, así que tiene opacidad cero hasta que se pasa el cursor sobre la tarjeta y entonces aparece como un icono pequeño en lugar de un botón con texto. Es el comportamiento del tema, no un estilo que falte; consulta Botón de cotización en las páginas de colección.

Algunas reglas prácticas

Regla	Por qué
Cambia una sola cosa cada vez	Cuando algo se rompa, sabrás qué regla lo causó.
Prueba en el móvil	La mayoría de las solicitudes de cotización llegan desde teléfonos, y un retoque pensado solo para el escritorio suele romperse ahí.
Guarda una copia en otro sitio	Pega también tu CSS en una nota, para poder restaurarlo si hace falta.
Evita !important siempre que puedas	Gana hoy y dificulta todos los cambios futuros.
Comenta cada regla	Dentro de seis meses, un bloque de CSS sin explicar es algo que nadie se atreve a borrar.

Tras un cambio de tema

Empieza por la inserción de aplicación en el tema nuevo. Está activada en tu tema, y hasta que lo esté, nada de lo que hace la aplicación aparece en tu tienda online; consulta Activar la aplicación en tu tema.

Después, revisa tu CSS. Está escrito para el marcado de tu tema, así que tras cambiar de tema o actualizarlo de forma importante, comprueba tu botón de cotización, tu formulario de cotización y el widget flotante: puede que haya que ajustar las reglas.

Próximos pasos

• Cambiar el texto y los colores del botón: los ajustes del botón que conviene probar primero
• Adaptar el estilo a tu tema: deja que el formulario siga tu tema automáticamente
• Contactar con soporte: pide un fragmento de código