Cargando

Ir a contenido

X


Ver Más! Si eres de los que tiene o se va a comprar Huawei Mate 20, o Mate 20 Pro. Aquí tienes colección de tutoriales que se irán actualizando diariamente con todas las opciones que te ofrece este genial terminal móvil!


 


PrestaShop - Cambios Básicos del Tema

En este tutorial estaremos viendo algunos cambios básicos del tema por defecto de PrestaShop, de forma que aprendamos como se hacen los cambios, para el momento en que tengamos un tema propio en nuestra tienda poder hacer las personalizaciones sin mayor esfuerzo.


Escrito por el dic 10 2013 14:33


A pesar que el tema básico por defecto de PrestaShop es bastante funcional, una tienda no puede salir en línea de esa forma, primero porque corremos el riesgo que otra tienda luzca exactamente igual y segundo porque tal vez el tema básico contiene cosas que no necesitamos o están dispuestas de una forma que no se ajusta a nuestra tienda.

Por ello, personalizar es el camino que siempre seguimos ya sea colocando un nuevo tema o cambiando el existente, de forma que la disposición de los elemento y los colores puedan ser diferentes.

Primeros cambios

Vamos a iniciar realizando cambios simples pero muy efectivos que harán que el tema luzca totalmente diferente de cómo es por defecto, para ello vamos a seguir los siguientes pasos:
  • Vamos a cambiar el logo, esto lo hacemos desde el administrador del back office, para ello vamos a subir la imagen en la sección: Preferencias --> Apariencia.
  • Luego debemos ir a Back Office --> Módulos --> Herramientas --> Editor de Home.
  • Reemplazamos el logo central al configurar el módulo.
Luego de este inicio vamos ahora a cambiar algunos elementos de posición para un mayor efecto de personalización:
  • Cambiamos la posición del bloque Categorías en la columna izquierda.
  • Deshabilitamos los productos especiales.
  • Cambiamos la información en categorías.
Veamos la siguiente captura para que podamos examinar los cambios que realizamos, notaremos que algunas cosas fueron movidas de derecha a izquierda y que otras columnas ya no están y por ende otras subieron de posición:



prestashop_cambios_temas1.jpg


Ahora el tema por defecto luce muy diferente, si aún no obtenemos un buen resultado, no nos preocupemos ya que es algo nuevo y como tal debemos practicar un poco antes de hacernos expertos en la materia.

Cambiando el CSS

Otro de los cambios que son muy efectivos es modificar los archivos CSS con lo cual podemos cambiar por ejemplo el color de fondo de la tienda.

Para efectos de este ejemplo vamos a utilizar Firefox y sus herramientas de desarrollador o si lo prefieren el firebug.

Para activar la edición del CSS con las herramientas de desarrollador simplemente vamos a hacer click derecho sobre la tienda y seleccionar la opción Inspeccionar Elemento, luego en el menú que nos aparezca seleccionaremos style editor.

Ahora si estamos usando firebug, simplemente decimos inspeccionar elemento con firebug y luego vamos a la pestaña CSS.

En la ventana que nos ha aparecido y ya una vez en la sección de CSS vamos a localizar el archivo global.css y vamos a intentar cambiar el código de color del background.

body {
background-color: [b]blue[/b];
font-size: 11px;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color: #5d717e;
text-align:center
}

Gracias a estas herramientas el cambio se realiza en tiempo real y tenemos oportunidad de visualizarlo de forma que veremos nuestros avances en el momento:



prestashop_cambios_temas2.jpg


Como observamos, el fondo azul es un cambio muy drástico, pero efectivo, obviamente no luce muy bien ya que las letras y otros elementos deben ser ajustados, sin embargo vemos lo importante y es que un simple color puede hacer la diferencia.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0


Tutoriales Relacionados



Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado dic 10 2013 14:33
  •   Actualizado dic 11 2013 09:08
  •   Visitas 866
  •   Nivel
    Avanzado