Añade HTML o CSS personalizado al cajón del carrito

Utiliza primero los ajustes integrados para los colores, las imágenes y el texto. El HTML y CSS personalizados están disponibles para los cambios que necesiten tu propio marcado o estilo.

Añade un bloque de HTML personalizado

1. Edita tu carrito y abre Carrito.
2. Utiliza Añadir HTML personalizado en el área de contenido o del pie de página.
3. Introduce el marcado en HTML y, después, coloca el bloque con su asa de arrastre dentro de esa área. El campo es un editor de código con números de línea y etiquetas de colores; Formatear ajusta la sangría.
4. Revisa el diseño, guarda y comprueba la tienda.

Puedes añadir hasta 10 bloques de HTML personalizado por área. El editor acepta hasta 10.000 caracteres por bloque; la configuración completa del carrito también tiene un límite de tamaño.

Añade CSS personalizado

Abre Estilo, desplázate hasta Avanzado en la parte inferior y abre CSS personalizado. Delimita las reglas al cajón, por ejemplo con #bxc-drawer, para que no cambien accidentalmente el estilo del resto de tu tema. Conserva una copia del CSS existente antes de reemplazarlo. El campo acepta hasta 10.000 caracteres.

El campo es un editor de código: colorea tu CSS, sugiere nombres de propiedades mientras escribes y marca en rojo una regla que no puede leer, de modo que una llave faltante se muestre antes de guardar. Formatear ajusta la sangría.

Prueba una nota sencilla

Este ejemplo añade una nota de marca. Utiliza el bloque HTML para su contenido:

<p class="aurelia-cart-note">
  <strong>Aurelia Botanicals</strong><br>
  Everyday skincare essentials.
</p>

Después, añade una regla delimitada en CSS personalizado para dar a esa nota un borde a la izquierda:

#bxc-drawer .aurelia-cart-note {
  border-left: 3px solid #334fb4;
  padding-left: 12px;
}

Guarda y comprueba la nota, los controles de los productos y el botón de pago en ordenador y teléfono.

La vista previa y el comportamiento de la tienda son diferentes

La vista previa muestra el diseño del HTML personalizado, pero elimina los scripts y los atributos interactivos. En la tienda, el marcado personalizado se trata como código del tema. Las etiquetas <script> insertadas normalmente no se ejecutan automáticamente, por lo que este campo no es un instalador de scripts general.

Pega únicamente código que entiendas o que hayas revisado con tu desarrollador. Comprueba el resultado publicado en ordenador y móvil, incluida la adición de un artículo y la apertura del proceso de pago. Si el cajón deja de funcionar después de un cambio, elimina ese código personalizado, vuelve a guardar y prueba de nuevo.