Tutoriales de Magento en Español

Personalización Básica de una tienda en Magento

En este primer tutorial nos vamos a centrar en personalizar la apariencia de una tienda de la forma más sencilla posible. Vamos a aprovechar que Magento tiene un excelente diseño en su tema por defecto y veremos como podemos darle un aspecto personalizado con cuatro pequeños cambios.

¿Qué vamos a hacer?

Vamos a crear una tienda de libros que se llamará Rosa de Papel. Partiremos del tema por defecto y veremos como hacer unos cambios sencillos para personalizar mínimamente la tienda.

El aspecto que presenta una tienda Magento por defecto es este:


Las categorías, banners y productos que ves debajo de la cabecera son solo datos de relleno que hemos cargado para que la tienda no aparezca completamente vacía. Estos datos de muestra pueden descargarse en un fichero comprimido de la página de Magento y cargarse en la base de datos, pero no son necesarios en absoluto.

El tema por defecto es elegante y está bien diseñado, vamos a cambiar sólo la cabecera para adaptarlo a nuestro negocio. Este es el logo que tenemos:


Lo mejor, si queremos tener más flexibilidad a la hora de utilizarlo con cualquier fondo, es tener una versión del logo con fondo transparente (fichero gif o png). De todas formas esto no es imprescindible para seguir este tutorial.

¿Dónde haremos nuestros cambios?

Los ficheros y carpetas del tema 'default' se encuentran repartidos en estos dos directorios:


El primer 'default' es el nombre del paquete y el segundo el nombre del tema. Un paquete (package) es una forma de agrupar temas relacionados, o más exactamente, variaciones de un mismo tema.

Cuando creemos un tema más complejo utilizaremos nuestra propia carpeta de paquete, pero como lo que vamos a hacer es realmente una pequeña variación sobre el original, vamos a colocar nuestro tema dentro del paquete 'default'. Nuestros ficheros estarán en:


Esto nos permite aprovechar la jerarquía de temas de Magento para colocar en nuestras carpetas sólo 4 ficheros con los cambios sobre el original. Magento buscará el resto de ficheros siguiendo esta jerarquía:

default/rosa_de_papel → default/default → base/default

El segundo eslabón de esta cadena es siempre el tema 'default' del paquete en el que estemos.

Haciendo nuestros cambios de esta forma contaremos con las actualizaciones que el equipo de Magento haga para mejorar el tema y tendremos nuestras modificaciones separadas y fáciles de localizar.

Nunca debemos hacer nuestros cambios en el tema 'default' directamente, porque si hacemos alguna actualización, todos nuestros cambios se perderán y tendremos que volver a hacerlos.

Lo más básico, cambiar el logo

El cambio del logo es lo más sencillo que podemos hacer para personalizar nuestra tienda. Es un paso imprescindible incluso cuando contemos con un tema que no necesita ninguna modificación. El nombre de nuestro negocio es lo mínimo que tendremos que incluir.

Al ser un cambio tan necesario, se puede hacer directamente desde el interface de administración de Magento.

Vamos a colocar la imagen con el logo con fondo transparente en el directorio de nuestro tema. La imagen iría en:


Ahora tenemos que decirle a Magento que utilice nuestro nuevo tema y luego decirle cómo se llama la imagen que utilizamos como logo.

Para cambiar el tema, entramos en el panel de administración de Magento, en Sistema/Configuración. Seleccionamos Diseño en el menú de la izquierda y abrimos el apartado Temas.

En el desplegable que aparece en la esquina superior izquierda, seleccionamos 'configuración por defecto' y, en la pantalla central, como tema 'por defecto' ponemos el nuestro 'rosa_de_papel' (el nombre del directorio con nuestro tema).


Y pulsamos el botón 'guardar la configuración' que aparece en la parte superior derecha.

No vamos a ver ningún cambio porque nuestro tema sólo tiene la imagen del logo y todavía no le hemos dicho a Magento cómo se llama (si la hemos llamado logo.gif entonces sí la cogerá sin que sea necesario indicarselo, porque es la que busca por defecto).

Para indicar cual es el logo, en la misma pantalla de configuración anterior (Sistema/Configuracion → Diseño). Seleccionamos 'Cabecera' y en la entrada de texto que pone 'Logo Image src' ponemos nuestra imagen: images/rosaDePapelLogo.png


En esta misma pantalla también puedes cambiar el 'Welcome Text' para poner cualquier mensaje de bienvenida que quieras para tu tienda. Este mensaje aparece en la cabecera, en la parte derecha. Si no lo cambias puedes verlo con el mensaje 'Default welcome msg!'.

No olvides pulsar el botón 'guardar la configuración' para salvar tus cambios.


El logo original del tema por defecto mide 167 x 47 pixels. Si hacemos nuestro logo del mismo tamaño o de un tamaño muy similar no tendremos ningún problema:


Pero queda un poco pequeño y queremos darle mucha mas visibilidad a nuestra marca. Nuestro logo mide 340 x 100 px. Al colocarlo vemos que la cabecera queda un poco ancha:


El problema es que el div que contiene todos los elementos de la derecha es muy ancho (600px). Cuando el logo es un poco más ancho que el que tenía por defecto, este div no cabe a la derecha y queda por debajo:


La solución es muy sencilla, sólo tenemos que cambiar en la hoja de estilos el ancho de la caja que contiene los links y enlaces de la derecha para que sea más corta y no quede 'enganchada' debajo de nuestro logo.

Cambiando la hoja de estilos

Para saber exactamente lo que cambiamos y no tener que andar tocando lineas en el fichero original, vamos a crear nuestra propia hoja de estilos y hacer que se incluya junto con las hojas de estilos que tiene el tema por defecto. Para esto tendremos que crear dos ficheros:


local.xml debe contener sólo las siguientes líneas:

<?xml version="1.0" encoding="UTF-8"?>
      <layout>
          <default>
              <!-- add the local stylesheet -->
              <reference name="head">
                  <action method="addCss"><stylesheet>css/local.css</stylesheet></action>
              </reference>
          </default>
      </layout>

La línea <action method="addCss"><stylesheet>css/local.css</stylesheet></action> es la que indica el fichero .css que debe cargarse.

Ahora podemos volver al problema que queríamos solucionar: la anchura del div con los enlaces de la derecha de la cabecera. Esta anchura está definida originalmente en los estilos del tema que estamos tomando como base ('default'):

magento/skin/frontend/default/default/css/styles.css

sobre la línea 494 de la siguiente forma:

.header .quick-access { float:right; width:600px; padding:28px 10px 0 0; }

Lo único que queremos cambiar es la anchura, que vamos a pasar de 600px a 400px, así que en nuestro fichero local.css sólo tenemos que incluir:

.header .quick-access {width:600px;}

Y el resultado es:


Perfecto!. Justo lo que queríamos.

Estos cambios tan sencillos pueden ser suficiente para muchas tiendas. Podemos utilizar el tema por defecto u otro que nos guste, pero siempre tendremos que añadir nuestro logo para tener la tienda mínimamente personalizada.

Para diferenciarnos un poquito más de la instalación por defecto vamos a cambiar también el color de fondo de la cabecera.

Cambiando el fondo de la cabecera

Teníamos pensado nuestro logo sobre un fondo marrón y queremos que nuestra tienda tenga esos colores. Podemos cambiarlo con un par de líneas en el fichero css y una imagen que pondremos como fondo.

Como siempre, vamos a buscar primero como está definido el fondo de la cabecera en el tema default. En su hoja de estilos, sobre la línea 482 tenemos:

.header-container { border-top:5px solid #0d2131; border-bottom:1px solid #415966; background:url(../images/bkg_header.jpg) 50% 0 repeat; }

El fondo de la cabecera original es esta imagen:

magento/skin/frontend/default/default/images/bkg_header.jpg


Podemos copiarla y editarla con cualquier programa de edición gráfica para pintarla como queramos o podemos crear una imagen desde cero. El tamaño del original es 2000 x 150 pixels. La imagen final debemos colocarla en:

magento/skin/frontend/default/rosa_de_papel/images/bkg_header.jpg


Para nuestro diseño hemos utilizado varios tonos marrones y hemos conservado las dos sombras laterales que marcan el ancho de la tienda, pero puedes hacerlo tan sencillo o tan complicado como quieras.

Hay que tener en cuenta que si tenemos un logo muy alto esta imagen de fondo tendrá que repetirse verticalmente. Si prevés que esto puede ocurrir, tienes que hacer un diseño del fondo que quede bien al repetirse, como el original, con líneas horizontales, o con colores planos. En nuestro caso, el logo mide sólo 100 pixels de alto y el fondo no necesitará repetirse.

Para que coja nuestra imagen tendremos que copiar la línea que vimos antes en nuestra hoja de estilos (magento/skin/frontend/default/rosa_de_papel/css/local.css):

.header-container { border-top:5px solid #0d2131; border-bottom:1px solid #415966; background:url(../images/bkg_header.jpg) 50% 0 repeat; }

Realmente sólo necesitariamos incluir la parte de 'background' para que machaque la información de la línea original, pero la copiamos entera porque más adelante cambiaremos algún otro detalle. El resultado es:


Como podemos ver en la imagen, todavía nos quedan algunos detalles por cambiar para que el resultado sea aceptable. La caja de búsqueda en la parte superior todavía tiene una imagen azul de fondo y la zona con el menú de categorías también.

Como en este tutorial queremos hacer lo más sencillo posible, simplemente vamos a eliminar la imagen de fondo de la caja de búsqueda (utilizando nuestra hoja de estilos).

Sobre la línea 490 de la hoja de estilos original ( magento/skin/frontend/default/default/css/styles.css ) encontramos la línea que define el fondo y el estilo general del formulario de búsqueda:

.header .form-search { position:absolute; top:0; right:29px; width:315px; height:30px; background:url(../images/bkg_form-search.gif) 0 0 no-repeat; padding:1px 0 0 16px; }

Lo único que queremos cambiar es el fondo (background) por lo que en nuestro fichero local.css ponemos:

.header .form-search { background: none;}

Para cambiar la barra de color azul oscuro en la que aparecen las categorías podríamos hacer como antes, copiar y editar la imagen que tenemos por defecto:

magento/skin/frontend/default/default/images/bkg_nav0.jpg

pero en este ejemplo vamos a cambiarlo por un color plano, sin imagen, que queda muy bien para los colores que hemos elegido. En el css del tema default encontramos que el fondo de esta barra de navegación se define en la siguiente línea (513 aproximadamente):

.nav-container { background:#0a263d url(../images/bkg_nav0.jpg) 50% 0 repeat-y; }

En nuestro fichero local.css quitamos la referencia a la imagen, dejando sólo el código del color que queramos:

.nav-container { background:#4A2D07; }

Nota: El código del color que quieras puedes obtenerlo, por ejemplo en esta web:
http://www.colorpicker.com/


Ya lo tenemos casi listo. Si nos fijamos bien en la imagen, queda una línea muy fina de color azul entre la cabecera y la barra de navegación con las categorías. Esto podemos cambiarlo directamente en una línea que ya tenemos en nuestro fichero local.css:

.header-container { border-top:5px solid #0d2131; border-bottom:1px solid #415966; background:url(../images/bkg_header.jpg) 50% 0 repeat; }

Esta línea, además de la imagen de fondo de la cabecera, está definiendo una línea superior de 5px con color #0d2131 y otra línea inferior de 1px con color #415966. Esa línea inferior es la que queremos modificar. Vamos a cambiarla a color negro, quedando:

.header-container { border-top:5px solid #0d2131; border-bottom:1px solid #000000; background:url(../images/bkg_header.jpg) 50% 0 repeat; }

El resultado final es:


Naturalmente podríamos seguir cambiando cosas, todavía nos quedan tonos azules, podríamos cambiar el pie de la tienda, etc, pero la idea de este tutorial es mostrar que con sólo 4 cambios muy básicos, sin ninguna complicación, podemos personalizar la tienda.