5 cambios para hacer con la edición avanzada de CSS


Desde Tienda Nube nos preocupa ofrecer a nuestros clientes un buen nivel de flexibilidad dentro de sus tiendas en cuanto al diseño, con el objetivo de que sus sitios logren reflejar plenamente la imagen de su marca.

Como ya vimos en otras oportunidades, es posible hacer modificaciones de todo tipo sobre el aspecto visual de las tiendas accediendo a los archivos del diseño de las mismas. No obstante, a veces se busca hacer cambios puntuales o de pequeña escala en el estilo del sitio.

Es por este motivo que habilitamos una nueva funcionalidad que permite editar el CSS de las tiendas directamente desde el administrador, sin necesidad de habilitar el FTP.

A continuación, compartimos algunos ejemplos prácticos de cambios que se pueden realizar modificando el CSS pero sin utilizar diseño a medida, sino implementando los cambios en la sección Diseño > Personalizar tu diseño > Edición avanzada de CSS del administrador de las tiendas.

Los ejemplos se basan en una tienda que está utilizando la plantilla “Luxury”. Si la tienda sobre la que se está trabajando utiliza otra plantilla o bien tiene un diseño a medida, los cambios que se deberán hacer pueden ser algo distintos.

Ocultar el cartel de “oferta” en los productos con precio promocional

Los productos que tienen precio promocional muestran de manera automática una etiqueta con la palabra “Oferta” sobre la foto para ser fácilmente identificados en un listado, como se puede ver en la siguiente imagen:

En caso de que no se quisiera mostrar esto en la tienda sobre la que se está trabajando, se puede ocultar el texto simplemente agregando el siguiente código en la edición avanzada de CSS:

.dest-gral .head .offer {
display: none;
}

Obtendremos el siguiente resultado:

Quitar el calculador de costos de envío

El calculador de costos de envío está presente en la página de producto y también dentro de la página de carrito, como se puede ver en las siguientes imágenes.

Página de producto

Página de carrito

Si se quiere eliminar este elemento del diseño, basta con agregar el siguiente código en la sección Diseño > Personalizar tu diseño > Edición avanzada de CSS:


#shipping-calculator {
display:none;
}

El resultado será el siguiente:

Página de producto

Página de carrito

Ocultar el formulario de newsletter del footer

Todas nuestras tiendas cuentan con la posibilidad de que los visitantes al sitio se registren para recibir newsletters de la marca. En general, esta opción se encuentra en el footer para que esté siempre disponible, como podemos ver en la siguiente imagen:

Pero si por algún motivo no se quiere mostrar, es posible ocultarlo fácilmente vía CSS, agregando el siguiente código:


#newsletter {
display: none;}
#wrapper-foot .subheader {
display: none;}
#wrapper-foot .row-fluid .container .span6 {
display: none;}

Luego de aplicar los cambios, ya no estará el formulario dentro de la tienda:

Centrar los elementos del menú de navegación

Si la tienda sobre la que estamos trabajando tiene una plantilla como por ejemplo Luxury, nos vamos a encontrar con que el menú está alineado hacia la derecha.

Es posible modificar esta alineación y por ejemplo, centrar los elementos. Lo podemos lograr muy fácilmente agregando el siguiente código:

.sf-menu {
width: 100%; text-align: center; }

Lograremos un resultado como el siguiente:

Cambiar el color del botón “Agregar al carrito”

Utilizando la configuración avanzada de CSS también se pueden modificar los colores de algunos elementos de las tiendas. Por ejemplo, se puede alterar el color del botón de “Agregar al carrito”, si se quiere que sea más contrastante con los demás elementos de esa página, o para que esté más a tono con la imagen de la marca.

Para esto, debemos agregar el siguiente código:

input.button.addToCart.cart {
background: blue; color: white; border-color: blue;}

En este caso, cambiamos el botón para que tenga color azul quedando de la siguiente forma:

Como se puede ver de los ejemplos del post, utilizar esta funcionalidad es muy fácil y brinda aún más flexibilidad al diseño de las tiendas. Si estás registrado como socio comercial, podés utilizar tu tienda demo para probar estos cambios.


¿Te gustó el contenido?


Laura Esper

Laura es Licenciada en Economía de la Universidad de Buenos Aires. Disfruta mucho de viajar, conocer gente nueva y comer cosas ricas. Es muy feliz trabajando como Partners Developer en Tienda Nube.


    Ecommerce por Expertos

    Conversaciones exclusivas con especialistas en comercio electrónico. ¡Llevá tu negocio a otro nivel!