Ir al contenido

Carrito

Añada un icono de carrito a su navegación y adapte su ubicación y visibilidad para cada dispositivo.

Use este bloque para añadir un icono de carrito a la navegación principal y colocarlo según el diseño de su encabezado. Para obtener una visión general más amplia de cómo funcionan los bloques del tema, consulte documentación de Shopify sobre secciones y bloques. Funciona bien para encabezados sencillos, diseños de navegación dividida y disposiciones móviles personalizadas en las que el carrito necesita una ubicación distinta según el tamaño de pantalla.

Estos ajustes controlan cómo se coloca el bloque de carrito dentro del espacio que se le ha asignado. Son más visibles cuando el bloque se estira a lo largo de espacio adicional o se mueve a su propia fila de ancho completo.

Si los cambios de alineación parecen sutiles, revise primero los ajustes de diseño. Una colocación compacta a la izquierda, centrada o a la derecha deja menos espacio para cambios de alineación visibles.

Use estos ajustes para decidir dónde aparece el bloque de carrito en escritorio y móvil. Izquierda, centro y derecha lo mantienen en la fila de navegación principal, mientras que Ancho completo lo mueve a una fila separada debajo.

Fill available space estira el bloque a lo largo del ancho restante de la fila de escritorio. Esto resulta útil cuando desea que el área del carrito ayude a equilibrar el espaciado del encabezado, pero también hace que los ajustes de alineación sean más importantes porque el icono se situará dentro de un área más grande.

Cuando quiera estructuras de encabezado diferentes según el dispositivo, configure los diseños de escritorio y móvil por separado en documentación de Shopify sobre el editor de temas. Por ejemplo, puede mantener el carrito agrupado de forma ordenada en la fila principal en escritorio y darle su propia fila en móvil. Use la referencia de Ajustes de diseño de navegación para obtener más detalles sobre la ubicación.

Elija el diseño antes de ajustar la alineación. La ubicación tiene el mayor efecto en cómo se percibe el bloque de carrito en el encabezado.

Estos ajustes anulan los colores generales del tema para este bloque, lo que le permite estilizar el icono del carrito y el texto relacionado de forma independiente. Esto es útil cuando el carrito necesita un mayor énfasis o cuando su encabezado usa un tratamiento de color personalizado.

Mantenga el carrito fácil de ver sin hacer que parezca desconectado del resto del encabezado. Revise bien el contraste si usa colores diferentes para el icono y el texto. Consulte la referencia de Ajustes de color para obtener más detalles.

Use los controles de visibilidad para mostrar el bloque de carrito solo en escritorio o solo en móvil. Esto resulta útil para encabezados adaptativos personalizados, especialmente si ya aparece otro punto de acceso al carrito en un tamaño de dispositivo.

Antes de ocultar el bloque en cualquier dispositivo, asegúrese de que los clientes sigan teniendo una forma clara y predecible de llegar al carrito. Consulte la referencia de Ajustes de visibilidad para obtener más detalles.

  1. Configure primero el diseño. Elija la ubicación en escritorio y móvil antes de ajustar la alineación o los colores.
  2. Use el ancho completo con intención. Mueva el bloque a su propia fila solo cuando el encabezado se beneficie de un diseño más apilado o espacioso.
  3. Estire con cuidado. Active Fill available space cuando desee que el bloque de carrito ayude a equilibrar el espaciado del encabezado de escritorio.
  4. Conserve el acceso al carrito. Si oculta este bloque en un tamaño de dispositivo, asegúrese de que haya disponible allí otro enlace o icono de carrito de forma clara.
  5. Compruebe el contraste del encabezado. Pruebe los colores personalizados sobre el fondo del encabezado para que el carrito siga siendo fácil de encontrar.
  6. Revise ambos viewports. Escritorio y móvil pueden comportarse de forma diferente, así que confirme la ubicación, la visibilidad y el espaciado en cada tamaño de pantalla.
  7. Tenga en cuenta el estilo de respaldo. Las opciones predeterminadas o con apariencia transparente suelen integrarse con el encabezado, mientras que los colores explícitos hacen que el carrito se sienta más independiente de los elementos cercanos.