CSS es un lenguaje de diseño que se usa mucho en sitios web. Puedes utilizar tu propio código CSS en tu tienda para modificar el diseño.
Los cambios en el código CSS son válidos para toda la tienda y no solo para las páginas que hayas abierto en el editor durante la edición del código. La única excepción son las páginas del proceso de pedido, en las que el código CSS no tiene ningún efecto.
Los cambios en el código CSS pueden influir negativamente en el diseño y la funcionalidad de tu tienda, así como perjudicar su diseño adaptable.
Solo los usuarios con experiencia deben introducir código CSS personalizado. Comprueba la tienda detenidamente después de todos los cambios que realices. Además, ten en cuenta que las actualizaciones automáticas influyen en el código de programación de tu tienda. Por eso, debes comprobar regularmente si el código CSS que hayas introducido sigue cumpliendo su misión y si el diseño o la funcionalidad se han visto perjudicados después de la actualización.
Cómo insertar código CSS personalizado
- Ve al menú principal del área de administración y selecciona Editor.
- Abajo, a la derecha de la tienda, haz clic en el símbolo del pincel.
- Elige </>.
- Inserta tu código CSS personalizado.
- Haz clic en Guardar.
- Selecciona Ver su tienda y comprueba si los cambios se muestran correctamente o si hay problemas con la visualización de la tienda.
Los ajustes del código CSS personalizado solo se aplicarán al estilo seleccionado actualmente. Si cambias el estilo o la plantilla de diseño, los ajustes anteriores no se tendrán en cuenta. Si vuelves al estilo anterior, los ajustes volverán a aplicarse.
El software de la tienda comprueba automáticamente si el código CSS que has insertado es válido.
No hace falta que introduzcas ningún tipo de hoja de estilo con tu código CSS.
Fragmentos de código
A continuación encontrarás fragmentos de código con los que puedes cambiar el diseño de algunos elementos de tu tienda.
Uso de fuentes adicionales
En el editor de tu tienda puedes elegir entre un montón de fuentes.
Con CSS, tienes a tu disposición cientos de otras fuentes de Google Fonts.
- Si quieres utilizar fuentes adicionales, visita primero Google Fonts.
- Busca la fuente que quieras y haz clic en ella.
- Ahora puedes elegir entre diferentes estilos para esta fuente. En el estilo que desees, haz clic en + Select this style.
- En Use on the Web, selecciona la opción @import.
- En el campo de abajo se mostrará un código CSS. Cópialo sin los comandos <style> ni </style>.
El resultado puede tener este aspecto, por ejemplo:
@import url('https://fonts.googleapis.com/css2?family=Schrift:ital,wght@1,600&family=Ranchers&family=Texturina:wght@900&display=swap');
- Pega este fragmento de código como se describe arriba en el editor de tu tienda como CSS dpersonalizado.
- Ahora ya puedes definir para qué elementos de tu tienda quieres que se utilice esta fuente.
Inserta también el código CSS siguiente y reemplaza «Nombre de fuente» por el nombre de la fuente que quieras.
Fuente general (menú, pie de página y textos)
html, body, .body
{
font-family: 'Nombre de fuente';
}
Encabezados H1
.body h1
{
font-family: 'Nombre de fuente';
}
Encabezados H2
.body h2
{
font-family: 'Nombre de fuente';
}
Encabezados H3
.body h3
{
font-family: 'Nombre de fuente';
}
Cuerpo de texto
p
{
font-family: 'Nombre de fuente';
}
Cómo cambiar el tamaño de la fuente
Con el código siguiente se puede cambiar el tamaño de las fuentes de tu tienda. Para ello, cambia «30 px» por el tamaño que quieras.
Encabezados H1
.body h1
{
font-size: 30px;
}
Encabezados H2
.body h2
{
font-size: 30px;
}
Encabezados H3
.body h3
{
font-size: 30px;
}
Cuerpo de texto
.body p
{
font-size: 30px;
}
Cómo cambiar la barra USP
Puedes cambiar el diseño de la barra USP de tu tienda. Para que la barra sea visible, tienes que indicar al menos una USP. Encontrarás más información sobre las USP en el artículo USP (ventajas diferenciales) en el encabezado de tu tienda.
Cómo cambiar el color de la fuente de la barra USP
.body .header-usp-list-item-wrapper
{
color: white;
}
Sustituye «white» por el color que quieras o tu código hexadecimal.
Cómo cambiar el color de los iconos de la barra USP
.body .header-usp-list-item-wrapper [class*=" usp-"], .body .header-usp-list-item-wrapper [class^=usp-]
{
color: white;
}
Sustituye «white» por el color que quieras o tu código hexadecimal.
Cómo cambiar el color de fondo de la barra USP
.body section.section.section-usp, .body .header-usp, .body .header-usp-list
{
background-color: white;
}
Sustituye «white» por el color que quieras o tu código hexadecimal.
Cómo mostrar texto para los productos en las páginas de categorías
De forma predeterminada, en la parte superior de las páginas de categorías se muestran los productos de cada categoría. Normalmente, no puedes colocar elementos de contenido sobre los productos, pero con CSS sí que puedes hacerlo.
Para la plantilla de diseño «Editorial»:
.category .section:first-child{
order:1;
}
.category .section-dali{
margin-top: 0;
}
.category .section{
margin-top: 30px;
}
.category{
display: flex;
flex-flow: column-reverse;
}
Para las plantillas de diseño «Essence» y «Limelight»:
.category{
display: grid;
}
.category .section:first-child{
order: 1;
}
.category .section-dali{
order: 2;
margin-top: 0;
}
.category .section{
order: 3;
margin-top: 30px;
}
Para las plantillas de diseño «Uptown» y «Neutral»:
.category{
display: grid;
}
.category .section-dali{
order: 1;
}
.category .section{
order: 2;
margin-top: 30px;
}
Cómo cambiar los ajustes de CSS de los elementos de contenido
- Abre tu tienda en el navegador Chrome.
- Con el botón derecho del ratón, haz clic en el elemento de contenido correspondiente y, a continuación, en Inspeccionar.
- Pasa el ratón por encima del elemento y se mostrará el ID del elemento del modo siguiente:
- Utiliza el ID para destinar el código CSS personalizado para este elemento.
Ejemplo del ID «block-961b71c8-2d80-4fc5-8e97-5b3f849f9efb»:
#block-961b71c8-2d80-4fc5-8e97-5b3f849f9efb {
border-bottom: 1px solid black;
}
Media queries
Puedes establecer la visualización de una página para diferentes dispositivos de salida.
Desktop view
/* Desktop view */
@media (min-width: 991px){
/*Tu código CSS*/
}
Tablet view
/* Tablet portrait view */
@media (max-width: 768px){
/*Tu código CSS*/
}
Mobile view
/* Smartphone view */
@media (max-width: 428px){
/*Tu código CSS*/
}