¿Cómo personalizar mi tienda por medio de CSS ?

¿Cómo personalizar mi tienda por medio de CSS ?


Conozca cómo personalizar su tienda por medio de CSS

Tabla de contenido

  1.  Personalización de la tienda por medio de CSS
  2. Imagen de Fondo
  3. Tamaño del Logo
  4. Cintillo en los banner principales
  5. Sombra en la faja de Banners
  6. Eliminar botón de "Chatea con nosotros"
  7. Añadir color a la barra de inicio de sesión
  8. Cambiar el color de los elementos del menú
  9. Cambiar el color del footer y su texto
  10. Cambiar el color de fondo en los ideales
  11. CSS en la página de los productos

Personalización de la tienda por medio de CSS

CSS u hojas de estilo en cascada es el nombre de un lenguaje de diseño gráfico destinado a embellecer los sitios web, este se encuentra presente en prácticamente todos los sitios web modernos, la manera en la que funciona es que seleccionamos un elemento y le damos una instrucción a este, un ejemplo de como funciona es el siguiente:

 

"p { color:red;}"

 

 

En ese pequeño bloque de código estoy seleccionando un parrafo e indicandole que su color debe ser rojo, ¿Bastate simple, verdad?

También podemos seleccionar clases por medio del prefijo . cuando deseamos seleccionar un elemento específico.

 

Acá te brindamos varios bloques de código CSS para poder personalizar tu eCommerce

 

Por favor ten en mente que trabajar con código de CSS de manera incorrecta puede llevar a problemas con la visualización de tu sitio web, todo el código de CSS presente acá se ingresa en Diseño | Tema UMarket | Avanzado

 

En caso de que se presenten dificultades con la visualización de la página después de haber introducido código lo más recomendable es que lo borres.

 

Otro detalle muy importante a denotar es que los colores que se utilizan con el código CSS son hexadecimales, si deseamos buscar un color en especifico en línea hay diversas herramientas destinadas a facilitar esto. Dicho esto vamos a aprender a modificar diversos elementos de nuestra tienda virtual por medio de código.

Imagen de Fondo

Si se desea poner una imagen de fondo en el eCommerce, se debe reemplazar únicamente el URL entre el paréntesis y comillas, debemos tener en mente que todas las imágenes que utilizamos para decorar en nuestra tienda virtual las podemos encontrar en General | Biblioteca de Medios

 

 

/*Imagen en fonto total*/

body {

background-image: url("https://media.nidux.net/media/12345/FotoDeEjemploTutorial.png")!important;

background-repeat: repeat;}

 

.content {

background-color: none!important;}

 

También puedes colorear de un solo color el fondo total de tu eCommerce, en caso de preferirlo en comparación a una imagen

 

/*Color del fondo total*/

 

body {

background: #fffffff!important;}

 

En este y todos los casos relacionados a cambiar el color de un elemento únicamente debemos cambiar el valor hexadecimal por el del color que deseemos utilizar.

 

Tamaño del Logo

Podés establecer y cambiar el tamaño de tu logo desde el panel de administrador, en Cuenta | Mi Empresa y ajustarlo con CSS

 

/*Ajuste del logo*/

.logo {

margin-left: 20px!important;

height: auto!important;}

 

/*Tamaño de la barra normal*/

header.navbar-default {

height: 125px!important;}

 

/*Tamaño de la barra en scroll*/

header.navbar.navbar-small {

height: 85px !important; }

 

/*Logo en dispositivos móviles*/

@media (max-width: 800px){

header.navbar .fitThisOnMenu {

transform: scale(0.60);

position: absolute;

margin-top: -10px!important;

margin-left: -20px !important;}

} header.navbar-default {height: auto !important;}}

 

Cintillo en los banner principales

El siguiente código tiene la función de cambiar el color de fondo y texto del cintillo en los banners principales

 

/*Banners principales*/

 

/*Color de fondo*/

.owl-stage-outer .owl-text-overlay {

background-color: #ffffff}

 

/*Color de fondo en dispositivos móviles*/

@media (max-width: 767px) {

.owl-stage-outer .owl-text-overlay {

background-color: #fffffff !important;}}

 

/*Texto en los banners principales*/

 

.owl-stage-outer .owl-text-overlay h2{

color: #fffffff;}

 

Sombra en la faja de Banners

 

Este código tiene la intención de eliminar la sombra o el cuadro que aparece por encima de las imagenes en las fajas de banners, junto al color del texto en caso de necesitarlo.

 

/*Sombra en las fajas de banners*/

.category-mask {

background-color: transparent;}

 

/*Color del texto*/

.category-title {

color: #fffffff!important;}

 

Eliminar botón de "Chatea con nosotros"

Este código está destinado a eliminar el pop-up que aparece cuando agregamos un Faceboo a nuestra tienda, el cual puede ser innecesario porque pudimos haber agregado con anterioridad una solución distinta a este como un botón de getbutton, un plugin de chat, entre muchos otros.

 

/*Eliminación de chat de Facebook*/

.chatterFb {display: none!important;}

 

Añadir color a la barra de inicio de sesión

 

Con el siguiente código podrás agregar el color que desees a la barra de arriba de tu eCommerce, donde tus usuarios tienen su panel de perfil.

 

/*Cintillo de arriba para Inicio de Sesión*/

 

/*Texto*/

.top-header .links a {

 color: #fffffff;

}

.top-header {

background-color: #fffffff;

border: none;}

 

Cambiar el color de los elementos del menú

Con el siguiente código podrás cambiar y estilizar varios elementos del menú, dandole más personalidad al sitio web de tu negocio, desde cambiar colores por el de la empresa hasta crear paletas agradables para la vista, todo comienza por donde navegan tus usuarios

/*Menú principal*/

/*Fondo*/

header.navbar-default {

background-color: #fffffff!important;}

 

/*Texto*/

.navbar-nav li a {

color: #ffffff;}

 

Este es un ajuste que requiere de una configuración dedicada para dispositivos móviles, acá se encuentra la misma:

 

@media (max-width: 767px) {

.navbar-nav li a {color: #ffffff;} }



Cambiar el color del footer y su texto

Con el siguiente código podrás modificar tu Footer de manera que el color de fondo de este se ajuste al de tu preferencia, y podrás modificar el color de las letras en los enlaces para que tengan legibilidad basada en el color que selecciones.

 

/*Footer*/

footer.navbar {

background-color: #ffffff;}

 

/*Textos en el footer*/

.footer-widget a {

color: #ffffff;}

 

/*Títulos*/

.footer-widget h3 {

color: #ffffff;}

 

/*íconos para contacto*/

.footer-widget-contacts ul li i {

color: #ffffff;

background-color: none;

border: 0x solid #000;}

 

Cambiar el color de fondo en los ideales

El siguiente código está destinado a modificar el color de fondo en los ideales, para que puedas cambiar su fondo a uno que combine con la temática de tu tienda.

 

/*Color de fondo en los ideales*/

.services {

background-color: white;

border: none;}

 

CSS en la página de los productos

Hay varias reglas de CSS que se pueden aplicar para embellecer, ajustar o eliminar elementos en la visualización del producto, como lo son las siguientes:

 

/*Página de productos*/

 

/*Ocultar el tag de SKU en la visualización del producto*/

.productSKUlabel {

display: none;}

 

/*Ocultar el tag de peso en un producto*/

.productWeightlabel {

display: none;}

 

/* Ocultar el tag de la marca en un producto*/

.productBrandlabel {

display:none;}



    • Related Articles

    • Tema Phoenix aplicar CSS

      Si tiene conocimientos en CSS puede en el menú a mano izquierda Muy importante: NIDUX no da soporte por errores en css, si alguno de estos códigos le presenta algún error debe de borrar inmediatamente el mismo y buscar ayuda de alguien que tenga ...
    • ¿Puedo modificar mi tienda con CSS ?

      Si tiene conocimientos en CSS puede en el menú a mano izquierda Muy importante: NIDUX no da soporte por errores en css, si alguno de estos códigos le presenta algún error debe de borrar inmediatamente el mismo y buscar ayuda de alguien que tenga ...
    • ¿Se pueden personalizar las etiquetas de mi tienda virtual NIDUX ?

      Las etiquetas se pueden personalizar dependiendo del tipo de tema que tengas activo en tu tienda virtual. Esto lo puedes hacer en el menú a mano izquierda. Diseño | Etiquetas En Tema UMarket puedes personalizar únicamente las siguientes etiquetas. ...
    • ¿Cómo puedo posicionar mi tienda en buscadores ?

      Para optimizar su tienda en los motores de búsqueda como Google, usted debe de ir al menú a mano izquierda. Diseño | Generalidades | SEO y redes sociales | SEO En este apartado usted puede optimizar agregando: Descripción SEO de tienda (Máximo 160 ...
    • ¿Cómo configuro la parte de diseño de mi tienda ?

      Este vídeo usted podrá ver el webinar grabado de como configurar la parte de diseño de su tienda. ...