¿Cómo añado CSS personalizado a toda mi tienda o a una sola sección?

El CSS cambia el aspecto de tu tienda: colores, espaciado, tamaños y más. Puedes añadir tu propio CSS en dos lugares del constructor: para toda la tienda o solo para una sección.

Custom CSS para toda la tienda

Haz clic en el icono del engranaje y abre la pestaña Custom CSS. El cuadro se llama CSS code: Applies to the entire store. Tu CSS se carga en todas las páginas del mercado que estás editando, y la vista previa muestra el resultado.

Úsalo para reglas que deben aplicarse en todas partes, por ejemplo ocultar un elemento en todas las páginas o cambiar el estilo de todos los botones. Por ejemplo, h1 { text-transform: uppercase; } escribe en mayúsculas el título principal de cada página.

Custom CSS para una sección

Selecciona una sección en la pestaña Sections. Al final de sus ajustes, abre la pestaña Custom CSS. Su cuadro CSS code dice Applies to this section only. La mayoría de las secciones lo tienen, incluidos el encabezado, el pie de página, el hero, la información del producto y el checkout.

Es la opción más segura. Storeep añade la sección delante de cada uno de tus selectores, así que tus reglas no pueden cambiar nada fuera de ella.

• h2 { letter-spacing: 2px; } cambia solo los títulos dentro de esta sección.
• Usa & para dar estilo a la propia sección: & { border-top: 1px solid #000; }.
• Las reglas @media funcionan. Las reglas que contienen también se limitan a la sección.
• Las animaciones @keyframes se mantienen tal como las escribiste.

El CSS de la sección pertenece a esa sección en esa página. Usa Apply to all pages en la sección para copiar la sección, con su CSS, a tus otras páginas que la incluyen. Consulta Aplicar a todas las páginas.

Cuál usar

• Una sección se ve mal: usa el Custom CSS de la sección.
• El mismo cambio hace falta en todas partes: usa la pestaña Custom CSS de los ajustes.
• Antes de escribir CSS, comprueba si ya hay un ajuste que lo haga: los colores están en Esquemas de colores, las fuentes en Ajustes de fuentes, y las esquinas y las sombras vienen de tu tema.

Cuando tu CSS no funciona

• Busca un } o un ; que falte. Un solo error puede detener las reglas que vienen después.
• Puede que tu regla sea más débil que la regla del tema. Haz el selector más específico.
• En el CSS de una sección, no empieces el selector con body ni html. Están fuera de la sección, así que la regla no coincidirá.
• Si la página se ve rota, quita tu último cambio, publica y vuelve a añadir las reglas una a una.

Bueno saberlo

• El Custom CSS pertenece al mercado que estás editando. Repítelo en cada mercado que lo necesite.
• Cambiar de tema puede cambiar los nombres de clase y el diseño, así que revisa tu CSS personalizado después de cambiar de tema.
• Los cambios se publican cuando haces clic en Publish.
• Para HTML y código dentro de una página, consulta Código personalizado.