Si aún no estás familiarizado con CSS, te recomendamos los siguientes recursos para que adquieras una base sólida:
Introducción al CSS:
Un videotutorial práctico que explica los conceptos clave para principiantes (disponible en inglés).
• Guía Básica de CSS:
Un manual paso a paso que te enseñará lo esencial para empezar a trabajar con estilos.
• Ejemplos Prácticos:
Aprende las funciones básicas de CSS a través de ejercicios que puedes aplicar directamente en tu tienda.
Si prefieres no realizar ajustes por ti mismo, siempre puedes considerar contratar a un profesional para personalizaciones avanzadas.
Si utilizas un Sitio Instantáneo de última generación, los ajustes CSS aplicados al escaparate (la sección donde los clientes navegan y compran productos) no influirán en los bloques de la tienda que aparecen en la página principal de tu sitio web. Para personalizar esos bloques, puedes hacerlo directamente desde el Editor de Diseño del Sitio.
• Personalizar el color de todos los botones principales al mismo tiempo.
• Modificar el color del botón “Añadir al carrito”.
• Cambiar el color del botón “Comprar ahora”.
• Ajustar el color del botón de “Caja” o “Checkout”.
• Editar el color del botón “Continuar”.
• Configurar el color del botón “Hacer pedido”.
• Cambiar el color de los botones secundarios o más pequeños.
• Personalizar el botón “Añadir más”.
• Modificar el botón “Ir a caja”.
• Ajustar el botón “Seguir comprando” en la página del carrito.
• Alinear los botones “Comprar ahora” al mismo nivel.
• Ocultar el botón “Añadir al carrito” en todas las páginas de productos.
• Aplicar una fuente personalizada a toda la tienda.
• Modificar el color de la fuente principal.
• Personalizar el color y tamaño de la fuente del precio en la cuadrícula de productos.
• Desactivar el efecto de zoom en las miniaturas de productos.
• Colocar los íconos de “Seguimiento de pedidos”, “Favoritos”, “Carrito de compras” y “Mi cuenta” en la parte superior de la tienda.
• Ocultar las imágenes de los productos.
• Centrar los productos dentro de una categoría.
• Cambiar el color del precio en una categoría específica.
• Desactivar el efecto de zoom en las miniaturas de categorías.
• Mostrar una cantidad uniforme de categorías por fila.
• Eliminar el efecto hover en los títulos de las categorías.
• Ocultar imágenes en miniatura y títulos de las categorías.
• Ocultar imágenes de categorías.
• Eliminar las fichas de categorías de la página principal de la tienda.
• Personalizar el color y tamaño de la fuente en la página de detalles del producto.
• Cambiar el color de la etiqueta “En oferta”.
• Mostrar las imágenes de la galería a tamaño completo en dispositivos móviles.
• Eliminar el nombre debajo de las imágenes detalladas en la galería.
• Expandir automáticamente la sección “Mostrar más” en las páginas de productos.
• Mover la sección de “Productos relacionados” a la parte superior de la página.
• Ocultar el precio de productos específicos.
• Restringir la visualización de precios a usuarios registrados.
• Personalizar el estilo del botón “Eliminar producto”.
• Eliminar el campo de cantidad de productos.
• Ampliar el campo para ingresar cupones de descuento.
• Mostrar un carrito vacío en Sitio Instantáneo (versión original).
• Modificar el diseño del widget de búsqueda.
• Personalizar los botones de búsqueda.
• Reubicar el cuadro de búsqueda.
• Ajustar el diseño del cuadro de búsqueda en Sitio Instantáneo (versión original).
• Eliminar el plazo de entrega en los métodos de envío.
• Personalizar los logotipos de tarjetas de crédito en las opciones de pago.
• Mostrar los logotipos de las tarjetas de crédito en el pie de página de la tienda.
En su tienda hay muchos botones grandes y pequeños como los botones «Añadir a la cesta» o «Continuar» Puede cambiarlos todos a la vez o individualmente.
Los botones grandes de su tienda incluyen Añadir a la cesta, Seguir comprando en la página del producto, Continuar, Caja, Hacer pedido. Utilice el siguiente código CSS para actualizar todos los botones a la vez. Modifique «#F0F8FF» y «negro» en el ejemplo por cualquier color que le guste:
/*Color del botón*/
.ec-size .ec-store .form-control--primary .form-control__button
{ background-color: red;}
/*Color del botón al pasar el ratón por encima*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
background: #F0F8FF;
}
/*Color del texto*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
background: #F0F8FF;
}
/*Color del texto al pasar el ratón por encima*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
color: black;
}Descubre combinaciones de tonos y selecciona el código hexadecimal perfecto para tu tienda online.
🖋️ ¿Quieres modificar el texto de los botones?
Hazlo fácilmente utilizando el Editor de etiquetas de tu tienda.
💻 Si tu tienda está integrada en un sitio web Wix, puedes ajustar las fuentes directamente desde la configuración de la aplicación Ecwid.
Reemplaza #FFA500 (naranja) y #000000 (negro) con los códigos de color que prefieras para reflejar tu estilo. ✨
``/Color del botón/
.ec-size .ec-store .details-product-purchaseadd-buttons .form-controlbutton {
background: #FFA500;
}
/Color del botón al pasar el ratón por encima/
.ec-size .ec-store .details-product-purchaseadd-buttons .form-controlbutton:hover {
background: #FFA500;
}
/Color del texto/
.ec-size .ec-store .details-product-purchaseadd-buttons .form-controlbutton {
color: #000000;
}
/Color del texto al pasar el ratón por encima/
.ec-size .ec-store .details-product-purchaseadd-buttons .form-controlbutton:hover {
color: #000000;
}