La Tienda Online de tu Salón (1.iv): Personalizamos la Tienda con nuestro Logo y Datos
¿Quieres ver cómo queda tu tienda con tu propio logo y los datos de tu empresa? Son las dos tareas en las que nos centraremos hoy. Para empezar iniciaremos el servidor XAMPP como vimos en las entradas anteriores (ejecutamos XAMPP y pulsamos los dos botones de "Start"), y abrimos nuestra tienda en el navegador (escribiendo en la barra de direcciones "localhost/prestashop"). Vuestra tienda ahora mismo tiene que parecerse a esta:
 |
| Haz clic en la imagen para verla más grande |
Para hacer modificaciones en la configuración de la tienda hay un menú especial, al que no pueden entrar los usuarios, sino que está pensado únicamente para que vosotros, los administradores de la tienda, podáis utilizarlo. Esa parte que no ve el público se llama BackOffice (BO). Para acceder al BackOffice, o lo que es lo mismo, para entrar en la parte de configuración de la tienda, debemos escribir en la barra de tareas del navegador: localhost/prestashop/admin. Os aparecerá la siguiente pantalla:
¿Os acordáis que la semana pasada os pedí que imprimieseis la información de inicio de sesión? Ahora os vendrá bien, porque a todos se nos suelen olvidar las contraseñas. Ponemos el email y la contraseña que imprimimos, hacemos clic en el botón de "Iniciar sesión" y nos lleva al BackOffice:
Un asunto muy importante: por motivos de seguridad la tienda habrá cambiado automáticamente el acceso al BackOffice, y a partir de ahora, cada vez que entremos al BackOffice en vez de hacerlo con la dirección "localhost/prestashop/admin" tendremos que hacerlo con una direccion del tipo "localhost/prestashop/admin1234". Para ver qué dirección nos ha asignado automáticamente nuestra tienda miramos en la barra de direcciones:
Por lo tanto, a partir de ahora, cada vez que yo quiera entrar al BackOffice de mi tienda tendré que ir a "localhost/prestashop/admin6422". Os puede parecer una cosa absurda, pero de cara a la seguridad de la tienda es importante que ningún hacker sepa en qué dirección guardamos la configuración, para evitar que acceda y nos pueda cambiar lo que quiera.
Vamos a lo que realmente nos importa, a personalizar la tienda. Lo primero decir que la parte que sí ve el usuario, lo que es la tienda propiamente dicha, se llama FrontOffice (FO). Por lo tanto, cuando hablemos de BackOffice o BO nos referiremos a la parte de administración y cuando digamos FrontOffice nos estaremos refiriendo a lo que nuestros clientes verán en su ordenador. Nos centramos en la parte superior izquierda del FrontOffice (localhost/prestashop), y veremos que aparece un logo, pero no es el nuestro:
Para poder subir el logo lo primero que necesitamos es tenerlo guardado en algún lugar de nuestro ordenador. Diseñar un logo es algo que se sale del ámbito de este tutorial, pero me imagino que todos tendréis vuestro logo escaneado o tendréis la posibilidad de hacerle una foto con el móvil y guardarlo en el ordenador.
Una vez tengamos claro dónde tenemos guardado el logo iremos al BackOffice, y en el menú seleccionaremos Preferencias -> Temas, tal como se muestra aquí:
Se nos abrirá una pantalla con muchas opciones para configurar la apariencia que queremos que tenga nuestra tienda:
En esa pantalla iremos a la parte de abajo y buscaremos en grupo llamado "Apariencia", y pulsaremos el botón "Seleccionar archivo" que está al lado de "Logo para el encabezado":
Se nos abrirá una ventana nueva que nos pedirá que seleccionemos el archivo donde tenemos guardado nuestro logo. Seleccionamos el archivo, en mi caso milogo.jpg, y pulsamos "Abrir";
 |
| Este paso puede variar ligeramente dependiendo del sistema operativo de tu ordenador y de dónde tengas guardado el archivo que contiene tu logo |
Una vez hemos seleccionado el archivo del logo veremos que nos ha llevado de vuelta a la misma pantalla de antes, pero ahora aparece el nombre del archivo al lado del botón "Seleccionar archivo":
Pulsamos "Guardar" en la esquina superior derecha:
Y nos tiene que aparecer en verde "Actualización exitosa". Eso indica que ya tenemos nuestro logo puesto en la tienda. Para comprobarlo nos iremos al FrontOffice, a la tienda propiamente dicha (localhost/prestashop), y vemos que ya nos aparece correctamente nuestro logo:
Poco a poco la tienda comenzará a ser única, nuestra, y cada vez se parecerá menos a la que venía por defecto. Ahora que ya tenemos nuestro logo puesto vamos a personalizar también los datos de contacto. Si miráis abajo del todo en la tienda, en el FrontOffice, en la parte de la derecha, veréis estos datos:
Lógicamente no son los datos que queremos que vean nuestros clientes, por lo que vamos a cambiarlos. Nos iremos al BackOffice y seleccionaremos Preferencias -> Contactos de la tienda:
Nos lleva a la pantalla donde se configuran los datos de contacto de la tienda, y vemos que hay cinco contactos creados. Al igual que pasaba con los iPod y los ordenadores que aparecían en la tienda inicialmente, sin que nosotros los hubiésemos creado, aparece estas cinco tienda que no son nuestras. Estos datos los crea el programa de instalación que usamos la semana pasada, y su única función es que la tienda online que estamos creando no aparezca en blanco, sino que mejor tenga datos ficticios para que veamos cómo queda. Sin embargo, como ya vamos a poner nuestros datos de verdad, el primer paso será borrar todos esos datos ficticios. Para ello pulsamos en la casilla de "Seleccionar todo" (mirar imagen de abajo) y después en el botón "Borrar seleccionados":
Nos preguntará si deseamos borrar, pulsamos en "Aceptar":
Y nos indicará en verde que se han borrado correctamente:
Una vez hemos borrado los datos ficticios, pasamos a crear los datos reales, es decir, a poner los datos reales de nuestro centro. Para ello pulsamos arriba a la derecha en el botón "Añadir nuevo":
Rellenar los campos no tiene ninguna complicación, salvo donde nos pide "Latitud / Longitud". Estos datos los usa para poder ubicar nuestro centro de estética o nuestra peluquería en un mapa. Si queréis calcularlas podéis hacerlo en este enlace, o si queréis las podéis dejar en blanco. También tenemos la opción de poner una foto de la tienda, y os recomiendo que hagáis una foto de la fachada de vuestro centro y la seleccionéis pulsando el botón "Seleccionar archivo" (como hicimos antes con el logo). Una vez tenemos todos los datos rellenos pulsamos el botón "Guardar".
Nos vuelve a llevar a la pantalla de antes, donde aparecerá una única tienda: la nuestra.
En esa misma pantalla donde estamos, si miramos más abajo, veremos un apartado llamado "Detalles contacto". También rellenaremos esos datos:
Para finalizar y guardar nuestros datos haremos clic en el botón "Guardar", que se encuentra arriba a la derecha:
Por último tenemos que modificar la configuración de un módulo para que nos aparezcan los datos correctos de nuestra tienda en lugar de datos ficticios creados por el programa de instalación. Más adelante en nuestro tutorial hablaremos más detalladamente sobre los módulos de Prestashop, hoy nos limitaremos a seguir los pasos necesarios para que aparezca nuestra dirección en la tienda. Vamos en el BackOffice a Módulos -> Módulos:
En la pantalla de los módulos vamos a buscar uno que se llama "Bloque informaciones de contacto". Para ello escribiremos "informaciones" al lado del botón "Buscar" (arriba a la izquierda), y pulsaremos el botón:
En el módulo "Bloque informaciones de contacto" pulsamos el enlace "Configurar":
Rellenamos de nuevo nuestros datos y pulsamos en "Ajustes actualizados":
En este momento ya tenemos los datos actualizados, por lo que podemos volver al FrontOffice (localhost/prestashop) y ver cómo han quedado (si ya lo teníais abierto recordad que hay que pulsar F5 para que se actualice):
Por hoy ya tenemos bastante con todos estos pasos. Poquito a poco iremos viendo cómo se transforma nuestra tienda, pasando de ser la tienda estándar que descargamos e instalamos en las entradas anteriores, a ser una tienda totalmente personalizada, con nuestro logo, nuestros datos, nuestros productos, nuestros servicios, etc.
¡Hasta la semana que viene!
Entradas anteriores:
Comentarios
Publicar un comentario
¡Gracias por tu participación!