Añadir CSS personalizado al widget de Bundlex

Bundlex te ofrece un editor visual completo para diseñar el widget, pero a veces necesitas acceder a un detalle que el editor no expone o sobrescribir algo que tu tema está aplicando al widget. El CSS personalizado es precisamente la solución avanzada para esos casos. En este artículo se explican los dos lugares donde puedes añadirlo y cómo seleccionar el widget de forma fiable.

Dos lugares para añadir CSS personalizado

Hay dos campos de CSS personalizado independientes y su alcance es diferente.

El campo de CSS personalizado del paquete

(1) Expande CSS personalizado en Estilo del widget. (2) Limita la regla a los elementos de Bundlex y prueba el resultado antes de guardarlo. Este ejemplo se descartó después de capturarlo.

Cada paquete tiene su propia sección de CSS personalizado, disponible en la pestaña Estilo. El CSS que pegues aquí se guarda con ese paquete, por lo que es la opción adecuada cuando un ajuste debe aplicarse únicamente donde se muestra ese paquete específico.

Abre el paquete en el panel de Bundlex.
Abre la pestaña Estilo y expande CSS personalizado, el último elemento de Estilo del widget.
Pega tus reglas en el editor de código. El campo indica el formato mediante un marcador de posición: .bx-widget-container {margin-bottom: 10px;}.
Guarda el paquete.

El campo de CSS personalizado de la inserción de la aplicación

(1) Abre Inserciones de aplicaciones y expande Bundlex Bundles. (2) Mostrar configuración avanzada revela las sobrescrituras de selectores y el campo de CSS que aparece debajo. Esta vista previa del tema en borrador se restauró sin guardar.

La inserción de la aplicación Bundlex, la extensión de aplicación del tema que activas en el editor de temas de Shopify en Inserciones de aplicaciones, también tiene un campo de CSS personalizado, visible cuando se activa Mostrar configuración avanzada. El CSS que añadas aquí se aplica donde se renderice la inserción, así que úsalo para ajustes generales del tema que deban mantenerse en todas las páginas de producto donde aparezca el widget.

En el administrador de Shopify, abre Tienda online y haz clic en Editar tema.
Abre Inserciones de aplicaciones y busca Bundlex Bundles.
Activa Mostrar configuración avanzada y pega tus reglas en el campo CSS personalizado.
Guarda el tema.

Desplázate hacia abajo dentro del panel Inserciones de aplicaciones para llegar a CSS personalizado. El campo vacío que se muestra aquí se dejó sin cambios.

Como regla general: usa el campo del paquete para ajustes específicos de un paquete y el campo de la inserción de la aplicación para cambios que quieras aplicar en todos los lugares donde se muestre el widget.

Cómo seleccionar el widget

El marcado de Bundlex usa clases bx-. Son selectores útiles para el widget actual:

.bx-widget-container - el contenedor del widget.
.bx-widget - el contenido del widget.
.bx-offer-wrap - un contenedor de oferta.
.bx-offer - la tarjeta de oferta dentro de ese contenedor.
.bx-active .bx-offer - la tarjeta de oferta seleccionada; la clase active está en su contenedor.
.bx-offer-title y .bx-offer-subtitle - texto de la oferta.
.bx-original-price y .bx-discounted-price - texto del precio original y del precio con descuento.

Limita las reglas al contenedor del widget. Por ejemplo:

.bx-widget-container .bx-offer-title {
  font-weight: 700;
}

Inspecciona el elemento en tu página de producto antes de aplicarle estilos. El marcado depende de las funciones activadas y un selector copiado de una versión anterior del widget podría dejar de coincidir.

Sobrescribir los estilos del tema con !important

Usa primero los controles integrados. Para el ancho del widget, prueba Estilo > Estilo del widget > Contenedor > Ancho máximo > Ancho completo (100 %). Si una regla del tema sigue sobrescribiendo el resultado, inspecciona el elemento afectado y usa !important únicamente en las declaraciones que lo necesiten. Por ejemplo:

.bx-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

Este ejemplo ocupa todo el contenedor principal disponible; no puede hacer más ancha una columna estrecha del tema. Si una regla no tiene efecto, comprueba que el selector coincida con un elemento renderizado, que la hoja de estilos esté cargada y que la declaración sea válida. Después, inspecciona qué regla en conflicto prevalece. Un selector más específico puede ser suficiente sin !important.

Cuándo pedir ayuda al soporte

Ambos campos de CSS personalizado indican que puedes contactar con el soporte de Bundlex si necesitas ayuda, y esa oferta es real. Si no consigues determinar el selector correcto o un tema personalizado está interfiriendo con tus sobrescrituras de una forma que !important no resuelve, envía al soporte un enlace a la página de producto y una descripción del cambio que quieres realizar. Pueden proporcionarte un selector probado para que lo pegues.

Lo mismo se aplica a los campos de selectores que muestra la opción Mostrar configuración avanzada de la inserción, para la colocación personalizada, el botón de añadir al carrito, el formulario de producto y los bloques de cantidad o variante. También son selectores CSS y el soporte puede ayudarte a completarlos en temas personalizados que no se detecten automáticamente.

El CSS no cambia las reglas de descuento, pero puede ocultar precios, opciones o botones e impedir que los compradores usen el widget. Después de aplicar una regla, prueba todos los estados de la oferta, las opciones de variante y Añadir al carrito en ordenadores y dispositivos móviles.