Si dispone de una Tienda online incrustada en un script HTML y le gustaría aplicar estilos a la misma, le recomendamos que añada la hoja de estilo CSS a su espacio web. Así, podrá cambiar la tipografía, los colores y mucho más.
Puede descargar el archivo CSS en la página de su tienda, en la sección de administración de la tienda online. Si ya dispone de un archivo CSS, elija los estilos que aparecen debajo y luego añádalos a su archivo existente.
¿Dónde debo poner el archivo CSS?
Le recomendamos coloque el archivo CSS en la misma carpeta en la que se encuentre el archivo HTML con el código de su tienda online. Tendrá además que añadir en dicho archivo HTML un enlace al archivo CSS.
El enlace a su CSS deberá ser así:
<link rel="stylesheet" type="text/css" href="shopfront-embed-style.css">
Sustituya shopfront-embed-style.css con el nombre de su archivo CSS, en caso de que le cambiara el nombre. Deberá colocar el enlace tras la etiqueta head-tag pero antes de la etiqueta de cierre /head-tag.
Parámetros de estilo
Puede cambiar los parámetros siguientes
- Familia tipográfica
- Color de la tipografía
- Color de relleno
- Menús desplegables
- Bordes
- Colores de enfoque
- Etiqueta de promoción
- Tienda online en vista móvil
Familia tipográfica
Al definir la familia tipográfica podrá cambiar la tipografía principal utilizada en su tienda online. La primera tipografía que indique es la que se mostrará. Las otras dos son tipografías usadas en caso de que la primera no se pueda mostrar por alguna razón.
Por ejemplo:
font-family: "Times New Roman",Times,serif;
Color de la tipografía
De forma predeterminada, se determina que el color de la tipografía utilizada sea el mismo para textos, al pasar el ratón por encima del texto, etc. Si desea cambiar el color, solo tiene que cambir el código HEX.
Si desea definir un color diferente, por ejemplo para cuando se pasa el puntero del ratón por un enlace, separe el parámetro de la lista e indique su propio código de color HEX.
Por ejemplo:
.onecom-webshop-main,
.onecomwebshop-main a.link,
.onecomwebshop-main a.link:link,
.onecomwebshop-main a.link:visited,
.onecomwebshop-main a.link:hover,
.onecomwebshop-main a.link:active,
.onecomwebshop-main input,
.onecomwebshop-main select,
.onecomwebshop-main .text-color {
color: #363636;
}
Color de relleno
Los colores de relleno se aplican a los fondos de los iconos a lo largo de la tienda. Cambie los colores usando la siguiente configuración.
SVG icono de color
El color de relleno se aplicará a los iconos de SVG por toda la tienda online, por ejemplo al icono de carrito de la compra. Puede cambiar el color cambiando el código HEX.
Por ejemplo:
.onecom-webshop-main .text-color svg {
fill: #363636;
}
El color de fondo ( tienda online )
Este ajuste establecerá un color de fondo a toda su tienda online . Puede cambiar el color, cambiando el HEX code.
Por ejemplo:
.onecom-webshop-main {
background-color: #fdfdfd
}
Menús desplegables
El selector de categorías, así como los de clasificación de productos, son menús desplegables. Puede ajustar los colores de los menús desplegables.
Color de fondo (del desplegable)
Este parámetro determina el color del fondo de los menús desplegables. Solo tiene que cambiar el código HEX en el código a uno de su preferencia.
Por ejemplo:
.onecomwebshop-main .bg-color {
background-color: #ffffff !important;
}
Color del borde (del desplegable)
El color escogido aquí determinará el color del borde del menú desplegable. Solo tiene que cambiar los códigos HEX y RGBA en el código y escoger los colores que prefiera.
Por ejemplo:
.onecomwebshop-main .border-color {
border-color: rgba(0,0,0,0.5) !important;
}
Color del texto (del desplegable)
Este parámetro determina el color del texto que se utiliza en los menús desplegables. Cámbiele el color modificando el código de color HEX.
Por ejemplo:
.onecomwebshop-main .category-text {
color: #000000 !important;
}
valor seleccionado (desplegable)
Este ajuste determina el color del texto de los elementos seleccionados en una lista desplegable. Puede cambiar el color al cambiar el HEX color code.
Por ejemplo:
.onecom-webshop-main .selected-text {
color: #000000 !important;
}
Color al desplazarse por encima (del desplegable)
Las dos configuraciones que aparecen debajo determinan el color de la tipografía que aparecerá al desplazar el cursor del ratón por encima, así como el color del fondo. Solo tiene que cambiar los códigos HEX y RGBA en el código y escoger los colores que prefiera.
Por ejemplo:
.onecomwebshop-main .bg-light-focus:hover {
color: #000 !important;
background-color: rgba(99,170,219,0.5) !important;
}
Bordes
Color del borde del botón Atrás
Este parámetro determina el color del borde del botón Atrás, del botón "Volver a la tienda" y de la página de compra. Cámbiele el color modificando el código de color HEX.
Por ejemplo:
.onecomwebshop-main .border-fcolor {
border-color: #363636 !important;
}
Borde usado alrededor de los detalles del pedido
Durante el proceso de pago el cliente ve una caja que contiene un resumen general de los artículos que está adquiriendo. Este parámetro le permite cambiar el color del borde de esta caja. Solo tiene que cambiar el color RGBA a uno que prefiera. El texto en la caja será siempre de color negro.
Por ejemplo:
.onecomwebshop-main .border-light-font-color {
border-color: rgba(54,54,54,0.5) !important;
}
Borde del encabezado
Con este parámetro puede cambiar el color del subrayado en los encabezados, por ejemplo en la página del carrito de compra. Solo tiene que cambiar el valor del color HEX al que prefiera.
.onecomwebshop-main .border-light-color {
border-color: #363636 !important;
}
Borde inferior
Con este ajuste, una línea se coloca por debajo de los elementos de la página de pago. Simplemente cambie el HEX color a uno de su preferencia.
Por ejemplo:
.onecom-webshop-main .product-item {
border-color: rgba(54,54,54,0.2) !important;
}
Colores de enfoque
Los colores de enfoque se usan para los precios, el icono del carrito de la compra y los deslizadores móviles. Solo tiene que cambiar el parámetro color HEX al que prefiera.
Por ejemplo:
.onecomwebshop-main .focus, .onecomwebshop-main .mobile-slider a {
color: #63aadb !important;
}
.onecomwebshop-main .focus svg{
fill: #63aadb !important;
}
Colores de enfoque al pasar el cursor por encima
Son los mismos parámetros que los definidos anteriormente, pero en este caso para cuando el curso pase por encima. Cambie los colores RGBA al color que desearía apareciera cuando se pase el cursor por encima.
Por ejemplo:
.onecomwebshop-main .bg-extra-light-focus:hover {
background-color: rgba(99,170,219,0.1) !important;
}
Etiqueta de promoción
Con este ajuste se determina el color del texto y del fondo de la etiqueta de promoción. Puede agregar una etiqueta de promoción a un producto para que destaque más. También puede consultar nuestra guía de promoción de productos.
Por ejemplo:
.onecom-webshop-main .product-label {
background-color: #63aadb !important;
color: white !important;
}
Tienda online en vista móvil
Si desea cambiar la apariencia de su tienda online en dispositivos móviles, puede agregar su propia metaetiqueta "viewport" a la sección principal del archivo HTML con su tienda online.
Si no detectamos una metaetiqueta, agregaremos automáticamente la siguiente metaetiqueta para una experiencia móvil perfecta:
meta name="viewport" content="width=320, initial-scale=1"
Artículos relacionados:
