Skip to main content
Cuando las configuraciones de diseño integradas no llegan lo suficientemente lejos, agrega tu propio CSS personalizado para dar estilo al carrito.

​
Dónde agregarlo

En el editor de carrito, abre Cart settings → Custom CSS. Tu CSS se aplica a todo el carrito y se carga después de los estilos base del carrito, por lo que tus reglas tienen prioridad.

​
Apunta solo a las clases públicas

Dale estilo al carrito usando sus clases públicas cart-external-*. El editor las autocompleta y te advierte sobre el resto:
  • cart-external-*: el objetivo público y soportado. Usa estas. No llevan estilo propio, así que existen únicamente para que tu CSS se enganche a ellas.
  • cart-internal-*: la tubería interna del carrito, donde vive todo su estilo integrado. El editor marca los selectores que las usan como errores. No se cambian a la ligera, ya que todos los carritos existentes dependen de ellas, pero le pertenecen al carrito y no son un contrato contigo. Reestiliza a través de la clase gemela cart-external-* en su lugar.
  • Otras clases cart-* que el editor no reconoce se marcan como advertencias.
Verás clases cart-internal-* en el marcado, incluso en la plantilla personalizada predeterminada de cada bloque. Eso es lo esperado: son lo que le da a un bloque su apariencia integrada. La regla aquí trata sobre los selectores que escribes en este panel, no sobre los nombres de clase que renderiza el carrito.Si estás escribiendo una plantilla personalizada que cambia la estructura del DOM de un bloque, consulta Dar estilo a una plantilla personalizada para saber qué nombres de clase conservar y cuáles descartar.

​
Shadow DOM: el carrito es autocontenido

En la tienda, todo el carrito se renderiza dentro de su propio shadow DOM. Esto significa:
  • El CSS de tu tema no puede filtrarse en el carrito, y el CSS del carrito no puede filtrarse hacia afuera, por lo que tu CSS personalizado queda automáticamente limitado al carrito y no chocará con el resto de tu sitio.
  • Tus selectores deben referenciar elementos y clases dentro del carrito. Los selectores dirigidos a elementos de la página fuera del carrito no llegarán adentro.
El mismo límite se aplica a JavaScript: document.querySelector tampoco puede ver dentro del cajón. Un script que busque un elemento del carrito tiene que pasar por shadowRoot, y apunta a estas mismas clases cart-external-*.

​
Cuándo usar las configuraciones de diseño en su lugar

Para colores, radios, espaciado y ancho, las configuraciones de diseño integradas son más simples y seguras, así que recurre al CSS personalizado solo para lo que no cubren.

​
A dónde ir después