ww.laFresaazul.com / Un proyecto de IPmarketing
MANUAL DE AYUDA AL USUARI@
ww.laFresaazul.com / Un proyecto de IPmarketing
Índice Manual del usuari@ urbeCOM
Índice CREAR UNA TIENDA VIRTUAL....................................................................................................... 5 ÁREA DE ADMINISTRACIÓN.......................................................................................................... 6 INICIO............................................................................................................................................... 8 Inicio - Detalles Personales................................................................................................................................8 Inicio - Paquete......................................................................................................................................................8 Inicio - Conexiones..............................................................................................................................................8 PRODUCTOS ................................................................................................................................... 8 Productos - Categorías ......................................................................................................................................8 Productos - Productos.........................................................................................................................................9 Productos - Opciones....................................................................................................................................... 10 Productos - Buscar............................................................................................................................................. 10 Productos - Opciones de Menú.................................................................................................................... 11 Productos - Productos Destacados............................................................................................................. 12 Gastos de Transporte........................................................................................................................................ 13 PEDIDOS . ...................................................................................................................................... 25 Pedidos - Aprobar ............................................................................................................................................ 25 Pedidos - Denegadas ...................................................................................................................................... 26 Pedidos - Aprobadas ....................................................................................................................................... 26 Pedidos - Listado Completo ......................................................................................................................... 26 Pedidos - Clientes ............................................................................................................................................. 26 Pedidos - Formas de Pago ............................................................................................................................ 26 Pedidos - Opciones de Factura . .................................................................................................................. 28 Pedidos - Estadísticas ...................................................................................................................................... 29 SITIO WEB ..................................................................................................................................... 30 Sitio Web - Editor de Contenidos................................................................................................................ 30 Sitio Web - Editor Pro....................................................................................................................................... 32 Sitio Web - Menú de Navegación................................................................................................................ 34 EXTENSIONES ............................................................................................................................... 36 Extensiones - Noticias....................................................................................................................................... 36
I
ww.laFresaazul.com / Un proyecto de IPmarketing
Índice Manual del usuari@ urbeCOM
DISEÑOS . ...................................................................................................................................... 37 Diseños - Seleccionar un Diseño.................................................................................................................. 37 Diseños - Añadir un Nuevo Diseño............................................................................................................. 37 Diseños - Modifica............................................................................................................................................. 38 Diseños - Productos.......................................................................................................................................... 40 Diseños - Carrito................................................................................................................................................. 41 Diseños - Menú Categorías............................................................................................................................ 42 HERRAMIENTAS ........................................................................................................................... 43 Herramientas - Manejar Imágenes.............................................................................................................. 43 Herramientas - Crear Nuevo Formulario................................................................................................... 44 Herramientas - Manejar Formularios.......................................................................................................... 46 Herramientas - Posted Data........................................................................................................................... 46 ESTADÍSTICAS . ............................................................................................................................. 47 Estadísticas - Reportes..................................................................................................................................... 47 OPCIONES ..................................................................................................................................... 48 Opciones - Estilo del Sitio Web.................................................................................................................... 48 EJEMPLOS PRÁCTICOS ................................................................................................................ 49 Insertar nuestro propio logotipo en la cabecera................................................................................... 49 Insertar Productos Destacados en la página de Inicio......................................................................... 54
II
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
COMO UTILIZAR ESTE MANUAL. Este manual ofrece al usuario una explicación en texto y unas imágenes descriptivas de la explicación. Si usted tiene dificultad en ver claramente las imágenes descriptivas, haciendo click en cada una de ellas, se abrirá una página de su navegador predeterminado con la imagen en pantalla y formato grande. No olvide que el sistema urbeCOM está en continuo avance, por lo tanto este manual puede cambiar con el tiempo. De todas maneras todos los cambios efectuados en urbeCOM son notificados vía email a sus usuari@s. Esperemos que este manual sea de utilidad a los Usuarios, si tiene alguna duda más o algún problema no dude en comunicarse con nosotros en la siguiente dirección web: http://www.urbecom.com/es_CONTACTO.html Muchas Gracias por confiar en urbeCOM. Trabajamos día a día para ofrecer un sistema eficaz para el comercio electrónico y al alcance de tod@s.
4
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Crear una Tienda Virtual. Para crear una Tienda Virtual debemos hacer click en el botón “CREAR TIENDA” del menú superior. Se abrirá una página donde se explicativa donde podrá descargar el manual de usuario. A continuación haga click en “Empieza a usar urbeCOM aquí”. A continuación se abrirá una página con numerosas plantillas para que usted elija el modelo que más le guste para su tienda virtual online, solo tiene que hacer click en la imagen de la plantilla que desee. Una vez seleccionada la plantilla pasaremos a la página de registro. Aquí deberá introducir sus datos personales. Es importante que elija un nombre de usuario fácil de recordar, ya que este nombre será el nombre de su tienda virtual (a no ser que usted elija el paquete de pago o el Paquete Premium, con dominio propio). Una vez introducidos sus datos personales deberá elegir un paquete para su tienda: • Paquete gratis: sin ningún coste, 15 productos como máximo. • Paquete 50: Máximo de 50 productos. Coste 30 € pago Semestral (60 € al año IVA Incluido). • Paquete 100: 100 productos como máximo. Dominio propio para su tienda virtual (sunombre.com, sunombre.net, sunombre.es...). 5 Cuentas de correo electrónico. Coste 60 € pago Semestral (120 € al año IVA Incluido). • Paquete Premium: 1000 productos como máximo. Dominio propio para su tienda virtual (sunombre. com, sunombre.net, sunombre.es...). 10 Cuentas de correo electrónico. Diseño personalizado para su tienda online. Coste 72 € pago Semestral (288 € al año IVA Incluido). Elegido el paquete, deberemos aceptar los Términos y Condiciones de Uso y hacer click en “Alta”. El sistema enviará un mensaje de correo electrónico con las instrucciones para activar la Tienda Virtual. Una vez activada ya tenemos nuestra tienda virtual con el nombre http://nombreusuario.urbecom.com (si ha elegido el paquete gratis o el paquete 50) lista para configurarla y empezar a vender. Para gestionar su tienda virtual deberá insertar en su navegador la siguiente ruta: http://www.urbecom.com/ADMIN. Aparecerá una página para introducir nuestro nombre de usuario y la contraseña que hemos elegido anteriormente. Una vez realizado el registro en el sistema correctamente accederemos a nuestra Área de Administración personal de nuestra tienda virtual. Ahora vamos a cambiar algunos aspectos de nuestra tienda virtual y introducir datos en las página de nuestra tienda virtual.
5
ww.laFresaazul.com / Un proyecto de IPmarketing
ÁREA DE ADMIMISTRACIÓN
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Para entrar en el Área de Administración deberemos introducir la siguiente dirección URL en nuestro navegador: http://www.urbecom.com/ADMIN A continuación deberá introducir su Usuario (nombre de la tienda) y la Contraseña que introdujo cuando dio de alta su tienda online. Una vez que introduce los datos correctamente accederá a la página inicial del Administrador:
En la parte superior-izquierda podrá cambiar el idioma del Administrador. En la parte superiorderecha podrá abrir su tienda online haciendo click en Abrir el Sitio Web. En Salir se desconectará del Administrador. A continuación vamos a explicar las opciones más importantes del Menú de Opciones.
7
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
INICIO. Inicio - Detalles Personales. En Detalles Personales puede ver y editar sus datos personales. Datos importantes: • Correo para las Notificaciones: aquí deberá introducir un correo electrónico válido. A este correo se le enviará los detalles de los pedidos que hagan sus clientes en la tienda online. • Moneda: Por defecto EURO. Si usted necesita cambiar de moneda hágalo aquí. • Control de Stock: Por defecto Desactivado. El Control de Stock controla las unidades de los productos. Si usted activa esta opción, cuando se generen pedidos los productos se irán restando automáticamente al stock y cuando el producto quede a 0 este desaparecerá de la tienda virtual online.
Inicio - Paquete. Aquí podrá ver el Paquete contratado que usted tiene. Si desea cambiar de Paquete selecciónelo haciendo click en la casilla de verificación, baje a la parte inferior de la página, seleccione la forma de pago y presione Próximo para hacer el pago.
Inicio - Conexiones. En esta página podrá ver las IPs de los accesos al Administrador. También podrá ver las IPs de los accesos fallidos.
PRODUCTOS. Productos - Categorías. Antes de empezar a introducir productos en su tienda virtual, será necesario que introduzca las categorías que albergarán a los productos. Si es la primera vez que accede, esta página estará en blanco. Para insertar una Nueva Categoría tiene que hacer click en Añadir una nueva categoría de productos. Se desplegará los campos de opciones para dar de alta la categoría: • Tipo de Categoría: si usted no ha dado de alta ninguna categoría anteriormente, se mostrará la opción “Categoría principal”. Si usted, con anterioridad, generó categorías aparecerán aquí para que usted la pueda seleccionar en caso de que quiera insertar Subcategorías de productos dentro de Categorías. • Nombre: nombre de la Categoría que quiere crear. • Descripción: este campo no es obligatorio. Aquí puede escribir una pequeña descripción de la Categoría que quiere crear.
8
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Productos - Productos. Una vez creadas todas las Categorías es hora de insertar nuestro catálogo de productos. En esta página veremos el árbol de categorías que anteriormente hemos creado. Deberemos hacer click en la categoría correspondiente al producto que vamos a insertar, se abrirá una página para insertar las características del producto. Datos que hay que introducir para insertar un producto: • Nombre: nombre del producto que vamos a insertar. • Imagen: aquí podemos introducir una imagen descriptiva de nuestro productos. Además tenemos la opción de poder añadir más imágenes a nuestro producto seleccionando “Imágenes Adicionales” y introduciendo el número de fotografías que queramos introducir. • Descripción Corta: pequeña descripción del producto o servicio. • Descripción Larga: explicación extendida de su producto o servicio. • Precio: importe del producto o servicio. • Fabricante: proveedor o fabricante del producto o servicio. • Descarga de Enlace: si usted vende productos digitales para descargar directamente desde la web, aquí deberá insertar el enlace para que el cliente se descargue el producto una vez pagado. • Peso: peso en Kilogramos del producto. IMPORTANTE para calcular los gastos de transporte. • Rank: posición en la que se mostrará el producto. El número 1 será la posición primera. • Activo: desde aquí podemos desactivar el producto para que no aparezca en la tienda virtual. • Cargos del producto: si el producto tiene algún cargo extra, impuesto, etc. • Categoría Global: IMPORTANTE. Muchos usuari@s de internet entran en el portal de urbeCOM buscando productos para comprar. Estos usuari@s navegan por las categorías del portal buscando el producto que desean. Si su producto no está en la Categoría adecuada, puede perder una posible venta. • Máximo de artículos: Si tenemos activado el Control de Stock, aquí deberemos poner la cantidad de productos total que disponemos. Conforme se vayan generando ventas del producto en su tienda online, estas se irán restando automáticamente. Cuando la cantidad de esta sección llegue a 0 el producto no aparecerá en la tienda online.
9
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
IMPORTANTE: Muchas veces es necesario agregar variaciones de un Producto. Imagine que vende un Ordenador con unas características comunes pero con 3 tipos de Memoria RAM (1,2 y 3 GB de RAM). Usted en su tienda virtual de Urbecom puede agregar variaciones a un producto. Cuando este creando o editando un producto y necesita añadir subproductos o variaciones deberá hacer click en [Presione para Añadir/Editar Variaciones del Producto] y añada las características. Si necesitamos Editar algún producto que con anterioridad habíamos insertado en el sistema tenemos que hacer click en Productos - Productos y seleccionar el producto a editar. Si necesitamos ver el listado de productos de una determinada Categoría haremos click en Productos - Productos y hacemos click en la Categoría que queramos ver sus productos.
Productos - Opciones. Aquí podrá cambiar la configuración de como se muestran los productos en su tienda virtual online. Las Columnas, por defecto, tienen un valor de 3. Si usted desea mostrar más columnas en la página de productos cambien el valor aquí. El número máximo de productos por página, por defecto, tiene un valor de 6. Si usted quiere mostrar más o menos productos por página cambie el valor aquí.
Productos - Buscar. En su tienda online, por defecto, tendrá una buscador para que los usuarios puedan buscar productos dentro de su tienda. Por defecto están seleccionadas las opciones Nombre, Descripción Corta y Descripción Larga. Esto quiere decir que cuando un usuario introduce una palabra en el buscador, el sistema buscará dentro de estos 3 campos de las opciones del Producto. Si usted desea acotar las búsquedas a menos valores, deseleccione el que desea.
10
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Productos - Opciones del Menú. Cuando usted crea Categorías (y Subcategorías) de Productos, estas aparecerán en forma de menú en su tienda virtual online. Usted tiene la opción de modificar el aspecto gráfico de este menú desde esta página. La página esta dividida en 2 columnas. La primera es para editar el aspecto gráfico de las Categorías y la segunda es para editar el aspecto gráfico de las Subcategorías (si hubiese). A continuación se explican las opciones de esta sección: • Products Menu Links Font: aquí puede cambiar el tipo de letra del menú. • Products Menu Links Font size: para cambiar el tamaño de la letra del menú. • Products Menu Links Font color: color de la letra de menú. Para cambiarlo tendrá que introducir el valor hexadecimal del color. • Products Menu Links Text Decoration: para cambiar el formato de la letra del menú. Tiene como opciones: itálica, negrita y subrayada. • Products Menu Links Text Decoration Mouseover: igual que el anterior pero cuando pasa el puntero del ratón por encima del texto. • Products Menu Level 1 - Width: ancho del menú. Para cambiar este valor deberá introducir la medida en píxeles. Tenga cuidado si pone un valor demasiado grande, puede deformar la página. • Products Menu Level 1 - Height: Altura del botón de una categoría expresado en píxeles. • Products Menu Links Padding: distancia en el eje Y del texto. • Products Menu Level 1 - Links Offset: distancia en el eje X del texto. • Products Menu Level 1 - Background color: color de fondo del botón de la categoría. Si desea cambiar el color de fondo debe introducir el valor hexadecimal del color. • Products Menu Level 1 - Background color - Mouseover: Color de fondo del botón de la categoría pero cuando pasa el puntero del ratón por encima. Si desea cambiar el color de fondo debe introducir el valor hexadecimal del color.
11
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
• Products Menu Level 1 - Border style: el estilo del borde del botón de la categoría. Puede elegir entre el sólido o ningún borde. • Products Menu Level 1 - Border color: Color del borde expresado en hexadecimal. • Products Menu Menu Direction: posición en la que se muestra el menú. Puede elegir entre Horizontal o Vertical. • Parámetros Guardados: si hace algún cambio no olvide presionar este botón.
Productos - Productos Destacados. Página para seleccionar aquellos productos que quiera que figuren como destacados. Cuando entra aquí verá todos los productos dados de alta en su tienda virtual online. Si hace click en alguno de ellos comprobará como cambia de color al rojo, esto quiere decir que ya está como destacado. Si vuelve a hacer click cambiará otra vez a negro, con lo cual, no será destacado. Para que se vean los productos en cualquiera de las páginas de su tienda online, puede ver la explicación completa en la sección Ejemplos Prácticos (Página 43) de este manual.
12
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
GASTOS DE TRANSPORTE El sistema urbeCOM ofrece a los propietarios de las tiendas virtuales online la gestión de los Gastos de transporte. El sistema se puede adaptar a varias formas de cálculo de los gastos de transporte: a) Un gasto de transporte fijo. Es decir, cuando queramos solamente aplicar un importe a todos nuestros envíos. b) Varios gastos de transporte fijos. Igual que el anterior pero, en vez de aplicar un solo gasto, queremos aplicar varios y que el cliente seleccione uno. Ejemplo: Gastos de transporte urgente y gastos de transporte convencional. c) Gastos de transporte fijos por localidades (Solo España). Cuando queremos aplicar un gasto para una localidad/es y otro gastos para otra localidad/es. e) Por intervalos de peso. Aquí el sistema suma el peso total del pedido del cliente y aplica el intervalo correspondiente. Para esta opción es muy importante que usted introduzca el peso real de productos en kilogramos cuando introduzca artículos. f) Gastos gratuitos superando una cantidad. Usted si lo desea puede premiar a sus clientes no aplicando gasto de transporte si el cliente, en su pedido, ha superado una cantidad de dinero. Todas estas modalidades de Gastos de Transporte se pueden mezclar entre sí, es decir, podemos crear un Gastos de transporte fijo y gratuito a la vez superando una cantidad de dinero. O, podemos crear otro que sea Gastos fijos para España península y otro gasto con intervalos de peso para Baleares. La mejor manera de explicar todo el proceso es con ejemplos. Vamos a crear varios ejemplos de configuración vamos a explicarlos paso a paso.
Ejemplo 1. Un gasto de transporte fijo para todos los pedidos. En este ejemplo vamos a generar un gasto de transporte único de 15 € para todos los pedidos que se hagan en el territorio español, y además, si superamos los 90 € en la compra, los Gastos de transporte serán gratuitos. PASO 1. El primer paso será generar las zonas para el envío. Hacemos click en Productos-Zonas de envío. Se abrirá una pantalla donde insertaremos los siguientes datos: • Nombre: escribimos, por ejemplo, Envío nacionales España. • Provincia: aquí no seleccionamos ninguna. • País: seleccionamos España. • Gratuito. Importe Max. Compra: escribimos 90. Esta es la cantidad que superada los gastos de transporte serán gratuitos. • Detalles: este campo no es obligatorio, aunque no viene mal escribir una descripción. Aquí escribimos Gastos de transporte para los envíos a todo el territorio Español. • No olvide presionar el botón Guardar.
13
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
PASO 2. Una vez insertada la zona de envío, tenemos que insertar el intervalo del gastos de transporte. Para esta acción hacemos click en Productos - Gastos de transporte. Se abrirá una página donde tenemos que insertar el intervalo para el cálculo de los gastos de transporte: • Nombre de la zona: aquí seleccionamos la zona que hemos insertado con anterioridad Envío nacionales España. • Intervalo peso mínimo: aquí escribimos 0. Este es peso mínimo del intervalo. • Intervalo peso máximo: ponemos por ejemplo 10000. Con esta cantidad nos aseguramos que cuando se sumen los pesos del pedido siempre estarán en el intervalo de 0 a 10000. • Coste (€): Aquí ponemos 15. Este es el coste de nuestros gastos de transporte. • Presione Añadir.
14
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Para este ejemplo ya tenemos configurados los gastos de transporte. Abajo puede ver una imagen de una compra con la suma de los gastos de transporte.
Ahora se va a mostrar otra imagen de una compra que supera los 90 â‚Ź. Puede comprobar como no se suman gastos de transporte.
15
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Ejemplo 2. Varios Gastos de transporte fijos. En este ejemplo vamos a crear 2 Gastos de transporte fijos en nuestra tienda online y el cliente deberá escoger el que más le convenga. Un gastos de transporte será “Envío normal” de 10 € y el otro será “Envío urgente“ de 20 €. PASO 1. Lo primero será crear las zonas de envío, para esta acción hacemos click en Productos - Zonas de envío. Una vez abierta la página pasamos a introducir los datos: • Nombre: escribimos Envío normal. • Provincia: aquí no seleccionamos ninguna opción. • País: seleccionamos nuestro país, para este caso selecciono España. • Gratuito. Importe Max. Compra: aquí no escribimos nada. NOTA: si queremos aplicar transporte gratuito a nuestros clientes superando una cierta cantidad en nuestro pedido, escribimos aquí la cantidad a superar. • Detalles: escribimos, Envío ordinario a toda España. • Pulsamos Añadir. Ahora vamos a crear la zona para el Envío urgente, sin salirnos de la pantalla volvemos a introducir datos: • Nombre: escribimos Envío urgente. • Provincia: aquí no seleccionamos ninguna opción. • País: seleccionamos nuestro país, para este caso selecciono España. • Gratuito. Importe Max. Compra: aquí no escribimos nada. NOTA: si queremos aplicar transporte gratuito a nuestros clientes superando una cierta cantidad en nuestro pedido, escribimos aquí la cantidad a superar. • Detalles: escribimos, Envío urgente por Agencia de transportes a toda España. • Pulsamos Añadir.
16
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
PASO 2. Una vez introducidas las Zonas de Envío vamos a agregar sus respectivos Gastos de transporte, hacemos click en Productos - Gastos de Transporte. Para la zona Envío normal introducimos los siguientes datos: • Nombre de la Zona: seleccionamos Envío normal. • Intervalo de Peso Min.: escribimos el peso mínimo, por ejemplo 0. • Intervalo de Peso Max.: aquí escribimos un peso máximo que seguro nunca se va a sobrepasar en los pedidos. Por ejemplo escribimos 10000. • Coste (EUR): 10. • Pulsamos Añadir. Sin salirnos de la pantalla, ahora vamos a configurar el Gastos de transporte para la el Envío urgente: • Nombre de la Zona: seleccionamos Envío urgente. • Intervalo de Peso Min.: escribimos el peso mínimo, por ejemplo 0. • Intervalo de Peso Max.: aquí escribimos un peso máximo que seguro nunca se va a sobrepasar en los pedidos. Por ejemplo escribimos 10000. • Coste (EUR): 20. • Pulsamos Añadir. Podrá ver en la parte inferior de la página los 2 Gastos de transporte creados. Con esto ya tenemos nuestros Gastos de Transporte preparados en nuestra tienda virtual online.
17
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Para que vea como funcionaría esta configuración se va a generar un pedido de prueba. En la imagen de abajo puede ver lo que vería un cliente en su proceso de compra.
18
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Ejemplo 3. Cálculos de los Gastos de transporte por intervalos de peso. En este ejemplo vamos a generar intervalos para que el sistema calcule automáticamente los gastos de transporte dependiendo del peso total del pedido. Es muy importante, si usted va a aplicar este caso, que introduzca el peso real del producto cuando lo inserta. Vamos a aplicar 3 intervalos de peso para este ejemplo: •
De 0 a 5 Kilogramos: 5 €.
•
De 5.01 a 10 Kilogramos: 10 €.
•
De 10.01 a 20 Kilogramos: 20 €.
PASO 1. Lo primero será crear las zonas de envío, hacemos click en Productos - Zonas de envío. Una vez abierta la página pasamos a introducir los datos: • Nombre: escribimos Envío ordinario por Agencia de transporte. • Provincia: aquí no seleccionamos ninguna opción. • País: seleccionamos nuestro país, para este caso selecciono España. • Gratuito. Importe Max. Compra: aquí no escribimos nada. NOTA: si queremos aplicar transporte gratuito a nuestros clientes superando una cierta cantidad en nuestro pedido, escribimos aquí la cantidad a superar. • Detalles: escribimos, Envío ordinario a toda España por Agencia de transporte. • Pulsamos Añadir.
19
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
PASO 2. Ahora necesitamos crear los intervalos de peso. Hacemos click en Productos - Gastos de transporte y pasamos a introducir todos los intervalos. Intervalo 1 (de 0 a 5 Kg. - 5 €): • Nombre de la Zona: Envío ordinario por Agencia de transporte • Intervalo de Peso Min.: 0 • Intervalo de Peso Max.: 5 • Coste (EUR): 5 • Pulsamos Añadir. Ahora introducimos el intervalo 2 (de 5.01 a 10 Kg. - 10 €): • Nombre de la Zona: Envío ordinario por Agencia de transporte • Intervalo de Peso Min.: 5.01 • Intervalo de Peso Max.: 10 • Coste (EUR): 10 • Pulsamos Añadir. Ahora introducimos el intervalo 3 (de 10.01 a 20 Kg. - 20 €): • Nombre de la Zona: Envío ordinario por Agencia de transporte • Intervalo de Peso Min.: 10.01 • Intervalo de Peso Max.: 20 • Coste (EUR): 20 • Pulsamos Añadir.
20
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Ya tenemos operativo nuestro sistema de gastos de transporte por intervalos. Ahora vamos a generar una compra de un Producto 1 (3 Kg) y un Producto 2 (4 Kg). En total la compra sumaría 7 Kg, con lo cual el sistema, automáticamente, deberá coger el intervalo número 2 para aplicar el gastos de transporte. Puede ver una imagen abajo del resultado.
21
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Ejemplo 4. Cálculos de los Gastos de transporte por provincias (Solo para España). En este ejemplo vamos a crear 2 zonas de envío, una de ellas será para España con un coste fijo de 10 €. La otra zona de envío será para Baleares, con un coste de envío de 20 €. PASO 1. Lo primero es crear las Zonas de Envío. Hacemos click en Productos - Zonas de envío y pasamos a rellenar los datos de la primera Zona (España): • Nombre: escribimos Envío para España Península. • Provincia: aquí no seleccionamos ninguna opción. • País: seleccionamos nuestro país, para este caso selecciono España. • Gratuito. Importe Max. Compra: aquí no escribimos nada. NOTA: si queremos aplicar transporte gratuito a nuestros clientes superando una cierta cantidad en nuestro pedido, escribimos aquí la cantidad a superar. • Detalles: escribimos, Envío ordinario a toda la Península Española por Agencia de transporte. • Pulsamos Añadir. Ahora creamos la zona de Baleares: • Nombre: escribimos Envío para las Islas Baleares. • Provincia: Seleccionamos Baleares. • País: seleccionamos España. • Gratuito. Importe Max. Compra: aquí no escribimos nada. NOTA: si queremos aplicar transporte gratuito a nuestros clientes superando una cierta cantidad en nuestro pedido, escribimos aquí la cantidad a superar. • Detalles: escribimos, Envío transporte.
ordinario
a
• Pulsamos Añadir.
22
las
Islas
Baleares
por
Agencia
de
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
PASO 2. Una vez introducidas las Zonas de Envío vamos a agregar sus respectivos Gastos de transporte, hacemos click en Productos - Gastos de Transporte. Para la zona Envío normal introducimos los siguientes datos: • Nombre de la Zona: seleccionamos Envío para España Península. • Intervalo de Peso Min.: escribimos el peso mínimo, por ejemplo 0. • Intervalo de Peso Max.: aquí escribimos un peso máximo que seguro nunca se va a sobrepasar en los pedidos. Por ejemplo escribimos 10000. • Coste (EUR): 10. • Pulsamos Añadir. Sin salirnos de la pantalla, ahora vamos a configurar el Gastos de transporte para la el Envío urgente: • Nombre de la Zona: seleccionamos Envío para las Islas Baleares. • Intervalo de Peso Min.: escribimos el peso mínimo, por ejemplo 0. • Intervalo de Peso Max.: aquí escribimos un peso máximo que seguro nunca se va a sobrepasar en los pedidos. Por ejemplo escribimos 10000. • Coste (EUR): 20. • Pulsamos Añadir. Podrá ver en la parte inferior de la página los 2 Gastos de transporte creados.
Ya tenemos los gastos de transporte preparados. Con esta configuración, si algún cliente de España península hace una compra se aplicará el gastos de 10 €. Por el contrario, si la compra la realiza un cliente de las Islas Baleares se aplicará el gasto de 20 €. 23
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Con estos 4 ejemplos pueden quedar perfectamente explicados como se configuran los gastos de transporte dentro de urbeCOM. Comentarle que estos cuatro ejemplos son orientativos y que el sistema le brinda la posibilidad de crear multitud de combinaciones para sus gastos de transporte. Por ejemplo, puede crear una zona de envĂo con gastos de transporte por intervalos, y aparte, puede crear otra zona con gastos de transporte fijos. O crear una zona por provincia para unos gastos de transporte por intervalos y otra zona por paĂs con gastos fijos con portes gratuitos superando una cantidad de dinero. Existen multitud de posibilidades que esperemos que se adapten a sus necesidades.
24
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
PEDIDOS Pedidos - Aprobar. En esta sección se verán el listado de Pedidos realizados en su tienda virtual online ordenados cronológicamente. Debajo del listado se muestra un recuadro con información del pedido seleccionado y todos los datos del cliente. Pasando el ratón por encima del listado de pedidos el recuadro de información se actualizará según en el pedido donde se encuentre el ratón en ese momento. Para la gestión de Pedidos tiene 2 opciones: • Rechazar: si el cliente no paga el pedido o se produce alguna anomalía, haciendo click en este link el Pedido quedará suspendido. Si lo desea puede introducir un texto por la razón de la suspensión del Pedido. • Aprobar: si el pedido se ha realizado correctamente y se ha pagado, haciendo click en Aprobar el pedido quedará automáticamente registrado como correcto.
25
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Pedidos - Denegadas. En esta sección se mostrarán los pedidos que se han denegado. IMPORTANTE: si usted tiene activado el Control de Stock y rechaza un pedido automáticamente los productos se sumarán otra vez al stock.
Pedidos - Aprobadas. Listado de Pedidos correctos o aprobados. Aquí se da la opción de Rechazar el pedido si ha habido algún problema. Además, se puede generar una factura en PDF del pedido presionando en Factura. Para configurar las opciones de las Facturas debe hacer click en Pedidos - Opciones de Facturas.
Pedidos - Listado Completo. Listado completo de todos los pedidos realizados hecho en su tienda virtual online, tanto en espera, rechazados o aprobados. Desde este listado puede acceder a los datos de envío, datos del comprador y detalles del pedido.
Pedidos - Clientes. Listado de clientes que se han dado de alta en su tienda virtual online. Tiene la opción de poder eliminarlos totalmente del sistema.
Pedidos - Formas de Pago. Para aceptar los pagos de los clientes en su tienda virtual online dispone de diferentes formas de pago en el Área de Administración. Usted puede activar las formas de pago que desea para su tienda virtual. A continuación se describen las diferentes formas de pago disponibles: • Paypal: deberá introducir su cuenta (correo electrónico) de Paypal para su funcionamiento. • 2checkout: forma de pago que acepta tarjetas de crédito. Necesitará incluir su SID de 2checkout. • Moneybookers: acepta tarjetas de crédito. Deberá incluir su cuenta (correo electrónico) de Moneybookers. 26
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
• Authorize.net: acepta tarjetas de crédito. Para su funcionamiento deberá incluir su Authorize.net Login ID y Authorize.net Transaction Key. • Google Checkout: pasarela de pago de Google para comprar por internet. Deberá introducir su Google Merchant ID y Google Merchant Key. • Cheque Bancarios: deberá incluir la dirección de envío del cheque bancario. • Transferencia bancaria: debe introducir los datos de la cuenta bancaria a la cual desea que le lleguen los pagos. • Pago por Contrarrembolso: el pago se realiza a la entrega del pedido. Si su agencias de transportes cobra una comisión por esta modalidad de pago podrá incluirla aquí en Porcentaje de gastos contrarrembolso. El sistema sumará automáticamente el porcentaje de esta comisión al pedido. Tenga en cuenta que usted puede incluir más de una forma de pago en su tienda virtual. Para incluir las formas de pago deberá activar su casilla de verificación. No olvide presionar el botón Guardar. Dentro de “Formas de Pago” también puede especificar si dispone de una cuenta PayPal IPN para la descarga de productos digitales y especificar el cuerpo de mensaje electrónico que recibirá el cliente para la descarga del software.
27
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Pedidos - Opciones de Facturas. Cuando se generan los pedidos en su tienda virtual online y estos son aprobados, el sistema da la posibilidad de generar una factura en PDF. En esta sección usted puede configurar las opciones para generar las facturas en PDF. A continuación se explica las opciones disponibles: • Invoice Start Number: número de inicio para la primera factura. Por defecto 1. • Invoice City: ciudad de residencia de la empresa. • Invoice Footer Information: texto que aparecerá en la parte inferior de la factura. • Invoice Company Name & Address: información de la empresa, nombre y dirección. Esta información aparecerá en la parte superior de la factura. Abajo se muestra una imagen explicativa de una factura en PDF.
28
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Pedidos - Estadísticas. En esta sección podrá ver un resumen estadístico de los Pedidos realizados en su tienda virtual online. Los valores que muestran son los siguientes: suma total de los pedidos, valor medio aprox. de un pedido, número total de pedidos, pedidos aprobados, pedidos denegados y pedidos a la espera de ser aprobados.
29
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Sitio web. Sitio Web - Editor de Contenidos. Editor visual para editar las páginas que componen su tienda online. IMPORTANTE: Desde aquí recomendarle el Editor Pro (Sitio Web - Editor Pro) por ser más efectivo y fácil de utilizar. En la parte superior y en horizontal los iconos de opciones. Son cuatro y ejecutan las siguientes operaciones: • El primero (siempre empezando por la izquierda) es para la edición de contenidos. • El segundo es para la configuración avanzada de la página: nombre del enlaces, título de la página, descripción, etc. • El tercero es para borrar páginas. • El cuarto es para previsualizar su tienda virtual. A continuación haremos unos ejemplos para que vea el funcionamiento de todas las opciones de edición. A) Lo primero que haremos es eliminar una página. Por ejemplo, la página de enlaces no le vemos utilidad por el momento. Para eliminar una página debemos de hacer click en el icono de Borrar (tercero por la izquierda) y sin dejar de presionar el botón izquierdo del ratón deberemos arrastrar el icono de borrar a la página que queremos eliminar, en este caso sería la página de “Enlaces”. El sistema nos preguntará si estamos seguros de nuestra decisión, presionamos Aceptar y página borrada.
B) Ahora vamos a cambiar el Titulo de la página “Quienes Somos” por “Nuestra Empresa”. Para hacer esta acción hacemos click en el icono de “Configuración” (segundo por la izquierda) y sin dejar de presionar el botón izquierdo del ratón lo arrastramos a la página que queremos cambiar, en este caso será la página “Quienes Somos”. Se abrirá una página donde podremos cambiar los siguientes parámetros: • Enlace de Texto: Nombre que se mostrará en el Menú de Navegación. Como lo queremos cambiar, aquí ponemos “Nuestra Empresa”.
30
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
• Títulos: Este parámetro es el título que nos muestra en navegador en la parte superior del título de la página. Ponemos por ejemplo “Bienvenidos a nuestra Empresa”. • Activo: seleccionamos Si para que la página este visible. • Defecto: aquí seleccionamos la opción No. • Extensión customizada: Seleccionamos la opción NONE. • Meta descripción: es el texto que llevará la etiqueta HTML “Description”. Aquí podemos poner una breve descripción de nuestra empresa. • Meta Palabras Claves: es el texto que llevará la etiqueta HTML “Keywords”. Aquí puede poner un listado de palabras que describan su empresa. Tenga en cuenta que esta etiqueta antes era importante para la mayoría de los buscadores para posicionar páginas web. Actualmente los mejores motores de búsqueda ya no la utilizan. Una vez introducidos los datos correspondientes hacemos click en Guardar y proceso terminado. C) A continuación vamos a insertar texto en la página recién cambiada “Nuestra Empresa”. Para ejecutar esta operación hacemos click en el icono de “Edición” (primero por la izquierda) y sin dejar de presionar el botón izquierdo del ratón lo arrastramos a la página “Nuestra Empresa”. Se abrirá el Editor Online. Ahora solo deberá escribir los datos que crea convenientes, por ejemplo, una descripción de su empresa con los servicios y productos que ofrece. Al texto que usted escriba puede darle formato (negrita, cursivas, listas ordenadas o desordenadas, enlaces, etc.) Seleccionando la opción correspondiente. Una vez introducidos todo el texto deberá hacer click en el icono de “Save” (Primer icono) para guardar los cambios y ya podrá cerrar la ventana del Editor. D) Si quiere revitalizará como esta quedando su tienda virtual, puede hacer click en el icono de “Previsualización” (cuarto por la izquierda) y sin soltar el botón izquierdo del ratón arrastrarlo a la página que quiere ver.
31
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Sitio Web - Editor (Pro) Cuando entramos a este editor veremos el árbol de páginas que componen la Tienda Virtual Online. Y debajo del árbol de la estructura hay 2 herramientas más que son: Añadir una Página Nueva al sitio web y Cambiar la estructura de la página. La primera, Añadir una Página Nueva al sitio web, es como su propio nombre indica para insertar nuevas páginas a su Tienda Virtual, si usted hace click verá que se abre un formulario donde tendrá que insertar varios datos: • Enlace de Texto: Nombre del vínculo que aparecerá en su Tienda Virtual. • Tipo de Página: aquí podemos elegir que la página que vamos a crear sea “Principal“, es decir, que no cuelgue o dependa de otra página, o que sea una subpágina de otra, es decir, que dependa de otra página principal. • Título: (opcional) para añadir un Título HTML <title>titulo</title> a la página. Es muy importante añadir un buen Título a todas nuestras páginas, ya que Google utiliza mucho este dato para realizar búsquedas. • (Meta) Corta descripción: (opcional) aquí insertaremos el contenido que iría en las etiquetas HTML <meta name=description>. Siempre es una buena costumbre añadir en esta etiqueta una breve descripción de la página. • (Meta) Palabras Clave: para añadir palabras a la etiqueta HTML <meta name=keywords>. Antes los buscadores utilizaban mucho esta etiqueta para posicionar páginas web, hoy en día esta etiqueta apenas es tenida en cuenta por los principales buscadores. Una vez introducidos todos los datos presionamos el botón Añadir la Página. La segunda herramienta, Cambiar la estructura de la Página, es para hacer seleccionar alguna de nuestras páginas y hacerla subconjunto o subpágina de otras páginas. El árbol de la estructura de Sitio web es una herramienta bastante eficaz para editar las páginas de su Tienda Online, veamos como funciona. A la derecha de los recuadros que representan las páginas de su Tienda virtual puede ver unas flechas rojas de arriba y abajo, son para cambiar el orden de las páginas en su sitio web. Presionando en algunas de las fechas verá como cambia el orden. Para seleccionar una página haremos click en el recuadro de la página que queremos editar, veremos como cambia de color el recuadro. Seleccionada la página, haremos click con el BOTÓN DERECHO DEL RATÓN, y se abrirá un menú con varias opciones:
32
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
• Establecer como predeterminada: si hacemos click en esta opción la página seleccionada será la primera en abrirse cuando algún usuario entre en nuestra Tienda Virtual. • Desactivada: esta opción es para desactivar temporalmente alguna de nuestras páginas, y por lo tanto, no se muestran en nuestra Tienda Virtual. La página no queda eliminada, sigue estando hay, pero no se muestra a los usuarios. Para volver a mostrar la página deberemos seleccionar Activar. • Iniciar el Editor WYSIWYG: si hacemos click aquí se abrirá una ventana con el Editor. Con este Editor podemos insertar, modificar eliminar cualquier contenidos en nuestras páginas. Solamente deberá escribir lo que desea que aparezca y modificar con las opciones que presenta el Editor (negritas, cursivas, añadir hora, añadir listas, cambiar color del texto, insertar tablas, pegar contenido de word, etc...). IMPORTANTE: cuando añadimos/editamos algún contenido en este Editor es importante presionar el botón de Guardar (Save) para realizar los cambios, es el situado en la esquina superior izquierda de la ventana del Editor. • Editar código HTML: si usted tiene experiencia con el código HTML o utiliza algún software de composición de páginas web (dreamweaver, frontpage), puede desde aquí pegar el código HTML necesario para la página seleccionada. • Insertar Ext. Propia: dejar en blanco, no seleccionar ninguna. • Ajustes de la Página: se abrirá una página para añadir algunos elementos importantes: - Enlace de Texto: Nombre que se mostrará en el Menú de Navegación. - Título: Este parámetro es el título que nos muestra el navegador. Etiqueta HTML <title>titulo</ title> - Activo: seleccionamos Si para que la página este visible, y No para que no aparezca. - Defecto: Si para que aparezca la primera al entrar en nuestra Tienda Virtual. - Extensión customizada: Seleccionamos la opción NONE. - Meta descripción: es el texto que llevará la etiqueta HTML <meta name=description>. Aquí podemos poner una breve descripción de nuestra empresa o servicio. - Meta Palabras Claves: es el texto que llevará la etiqueta HTML <meta name=keywords>. Aquí puede poner un listado de palabras que describan su empresa. Tenga en cuenta que esta etiqueta antes era importante para la mayoría de los buscadores para posicionar páginas web. Actualmente los mejores motores de búsqueda ya no la utilizan. • Borrar Página: eliminar totalmente la página de nuestra Tienda Virtual.
33
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Sitio Web - Menú de Navegación. El menú de navegación de se tienda virtual online se compone, por defecto, de Inicio, Quienes Somos , Enlaces, Ayuda y Contacto, y según la plantilla que haya elegido, este menú tendrá un aspecto gráfico predeterminado.
Desde esta sección del Administrador podrá cambiar dicho aspecto gráfico del menú de navegación. Para esta acción dispone de 2 herramientas: Estándar y Menú Personalizado. IMPORTANTE: si cambia de una opción a otra no olvide de presionar el botón Guardar. A continuación se explica con detalle cada una de las 2 opciones. ESTÁNDAR. Si tiene seleccionada esta opción, haga click en Opciones para acceder a la página de edición. La página esta dividida en 2 columnas. La primera (izquierda) es para editar el aspecto gráfico del Menú y la segunda (derecha) es para editar el aspecto gráfico del Submenú (si hubiese). Verá las siguientes herramientas: • Links Font: aquí puede cambiar el tipo de letra del menú. • Links Font size: para cambiar el tamaño de la letra del menú. • Links Font color: color de la letra de menú. Para cambiarlo tendrá que introducir el valor hexadecimal del color. • Links Text Decoration: para cambiar el formato de la letra del menú. Tiene como opciones: itálica, negrita y subrayada. • Links Text Decoration Mouseover: igual que el anterior pero cuando pasa el puntero del ratón por encima del texto. • Level 1 - Width: ancho del menú. Para cambiar este valor deberá introducir la medida en píxeles. Tenga cuidado si pone un valor demasiado grande, puede deformar la página. • Level 1 - Height: Altura del menú expresado en píxeles. • Links Padding: distancia en el eje Y del texto. 34
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
• Level 1 - Links Offset: distancia en el eje X del texto. • Level 1 - Background color: color de fondo del menú. Si desea cambiar el color de fondo debe introducir el valor hexadecimal del color. • Background color - Mouseover: Color de fondo del menú pero cuando pasa el puntero del ratón por encima. Si desea cambiar el color de fondo debe introducir el valor hexadecimal del color. • Level 1 - Border style: el estilo del borde del menú. Puede elegir entre el sólido o ningún borde. • Level 1 - Border color: Color del borde expresado en hexadecimal. • Menu Direction: posición en la que se muestra el menú. Puede elegir entre Horizontal o Vertical. • Parámetros Guardados: si hace algún cambio no olvide presionar este botón. MENÚ PERSONALIZADO. Si usted tiene conocimientos HTML puede utilizar esta opción para construir un menú más personalizado. Si presiona en Opciones podrá configurar los siguientes parámetros: • Show separator: Si quiere que, entre botón y botón de su menú de navegación, aparezca un linea de separación pulse TRUE. • Menu direction: dirección en el que aparece el menú de la tienda virtual online (VERTICAL O HORIZONTAL). • Custom links template: Código HTML del contenedor del botón del menú de navegación. • Use template: si usted ha generado una plantilla pulse en TRUE. En Construct/Modify podrá personalizar aún más su menú de navegación. En esta sección podrá editar botón a botón la composición del menú de navegación. Cuando accede podrá ver todas las secciones o páginas de su tienda online, si hace click en alguna de ellas podrá editar las siguientes opciones: • NINGUNO: opción activada por defecto, no se aplica nada. • HTML: código html del botón de la sección. • IMAGEN: también puede insertar de fondo del botón del menú una imagen que usted haya diseñado con anterioridad. Active esta opción si es su caso y posteriormente seleccione la imagen que desea. Importante: la imagen o gráfico lo debe antes de subir a su administrador. Para subir una imagen haga click en Herramientas Manejar imágenes. Los botones de su tienda online puede tener, si lo desea, 3 estados:
35
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
- Inactivo: cuando no se ha realizado ninguna acción sobre el botón. En este caso se verá la imagen que ha insertado arriba. - Activo: es cuando un usuari@ hace click en el botón y accede a la página correspondiente al botón que ha pulsado. Si usted desea que se muestre una imagen distinta para este estado del botón, active Image Selected y seleccione la imagen. - Ratón encima (MouseOver): es cuando el ratón pasa sobre algún botón. Si usted quiere aplicar una imagen a este estado o acción, active Image - Mouse Over y seleccione la imagen.
EXTENSIONES. Extensiones - Noticias. En su tienda virtual online tiene la posibilidad de insertar noticias de interés para sus usuari@s. Desde esta sección se proporciona lo necesario para poder introducir sus noticias: • Título: como su nombre indica, aquí se escribe el título de la noticia. • Contenido: texto completo de la noticia. • Activo: Si el estado está en YES, la noticia aparecerá en su tienda online. Si por el contrarió, está en NO, la noticia no aparecerá. Importante: para que la sección de noticias aparezca en su tienda virtual online debe insertar la etiqueta <wsa news/> en su plantilla html.
36
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
DISEÑOS Diseños - Seleccionar un Diseño. Si después de crear nuestra tienda virtual online, descubrimos que la plantilla que hemos elegido no nos satisface, desde esta sección podemos cambiar de plantilla de diseño. También podemos seleccionar plantillas desde aquí plantillas creadas por nosotros para nuestra tienda online. La inserción de una nueva plantilla se explicará en la siguiente sección (Diseños - Añadir un nuevo diseño). Por defecto, el sistema tiene configurado unas plantillas generales con el nombre STANDAR TEMPLATE. Para cambiar de plantilla solo tiene que hacer click sobre la que queramos.
Diseños - Añadir un nuevo diseño. Desde esta sección podemos añadir una plantilla de diseño para nuestra tienda online propia. Para insertar una nueva plantilla deberá introducir los siguientes valores: • Nombre: identificación para la nueva plantilla. • Descripción: no es obligatorio, pero si quiere dar una descripción a la nueva plantilla escriba el texto aquí. • HTML: obligatorio. Aquí se insertaría el código html necesario para el funcionamiento de su tienda online. Necesita tener conocimientos html y insertar en esta sección un código válido. En su código html deberá insertar una etiquetas o tags necesarias para el funcionamiento de la tienda online. Cada una de estas tags realizan una función dentro del código html de la plantilla y se actualizarán automáticamente con la configuración de su tienda online. A continuación se explican: æ <wsa title/> Este TAG agrega el Título a cada una de las páginas web que forman la tienda virtual online. Deberemos insertarlo entre las etiquetas HTML <title><wsa title/></title> 37
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
æ <wsa description/> Este TAG, agrega la Descripción a cada una de las páginas de la tienda online. Se agregará entre las etiquetas HTML <meta name=description content=”<wsa description/>”> æ <wsa product_search/> TAGS para agregar el Buscador de Productos a su tienda virtual. Este TAGs irá colocado donde usted quiera que aparezca dentro del diseño de su tienda online. æ <wsa menu/> Este TAGs inserta el Menú de Navegación en su tienda virtual online. Puede poner el TAG donde usted quiera que aparezca el Menú dentro del código html. æ <wsa product_categories/> TAG que inserta el Menú de Categorías (Subcategorías..) de los productos de su tienda virtual. æ <wsa logins/> Este TAG agrega el formulario para que los Usuarios-Clientes de su tienda online accedan a su cuenta personal. æ <wsa news/> Este TAG agrega las Noticias que usted ha insertado dentro de su Área de Administración. æ <wsa content/> Este TAG debe aparecer en la parte donde usted quiera mostrar todos los contenidos de su página web. Suele estar en la parte de la web más amplia para mostrar correctamente los contenidos, productos, carrito etc.. æ <wsa form/> TAG que debe aparecer siempre justo debajo del TAG <wsa content/>. Su función es mostrar los formularios que usted inserte en su tienda virtual online. æ <wsa languages_menu/> TAG que añade las banderas Británica y Española para convertir su sitio en multidioma. Los idiomas disponibles en el sistema son el Inglés y el español. • Añadir el Diseño: no olvide presionar este botón para guardar los cambios.
Diseños - Modifica. Si necesita modificar la plantilla o eliminarla totalmente del sistema, en esta sección podrá hacer estas acciones. Una vez que entramos en esta sección vemos una tabla con nuestro diseño y 3 acciones: Modifica (WYSIWYG), Modifica (HTML) y Borrar.
• Modifica (WYSIWYG): este editor esta pensado para aquellos usuarios que no tengan conocimientos de programación en HTML. Es un editor gráfico parecido al estilo visual de Word. Si entra en este editor, podrá ver en la parte superior una serie de iconos para modificar su diseño. Importante: pasando el ratón por encima de cualquier icono del editor aparece una leyenda explicativa de la acción del icono. 38
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Entre las acciones que podrá realizar están: æ Modificar textos: negrita, cursiva, subrayado, cambiar tipo de letra, tamaño de letra. æ Alineación de textos: centrado, izquierda, derecha y justificado. æ Pegado de texto: pegar desde Word, pegar desde el block de notas. æ Tablas: insertar tabla, combinar celdas. æ Otras opciones: insertar capas, insertar imágenes, subíndices, superíndices, insertar imágenes, emotions, insertar elementos multimedia, etc.
• Modifica (HTML): para aquellos usuari@s que tengan conocimientos HTML y un buen manejo de programas como Dreamweaver o Frontpage. Usted puede diseñar su página en estos programas, aprovechando toda la potencia que ofrecen, y pegar en este editor el código html generado. Cuando se entra a esta sección, se puede visualizar un cuadro llamado HTML. Pegue el código html en este cuadro y no olvide presionar el botón Guardar para aplicar los cambios.
39
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Diseños - Productos Esta sección se divide en 2 partes: • Products Middle Result: Cambia el aspecto gráfico de la página que muestra los productos en nuestra tienda online. A continuación se muestra una imagen de la parte de la web que edita este formulario.
Debe tener en cuenta, que cuando diseñe el código para este apartado deberá insertar unas etiquetas o TAGs que actualizan automáticamente, en su tienda online, la información correspondiente. Los TAGs son los siguientes: æ [CATEGORY_NAME]: TAG que añade la categoría de los productos. æ [PRODUCT_LINK]: TAG que añade un vínculo a un determinado objeto (imagen, texto). Este vínculo direcciona a la página de Propiedades del producto. æ [PRODUCT_IMAGE]: TAG que añade la imagen del producto. æ [PRODUCT_PRICE]: TAG que añade el precio del producto. æ [PRODUCT_NAME]: TAG que añade el nombre del producto. æ [ADD_CART_LINK]: TAG que añade el vínculo para añadir el producto al carrito de compras de su tienda virtual online. æ [PRODUCT_SHORT_DESCRIPTION]: TAG que añade la descripción corta del producto.
40
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
• Products Final Result: cambia el aspecto gráfico de la página que muestra los detalles del producto. A continuación puede ver una imagen de la página que edita este apartado.
TAGs que añaden el contenido a este apartado: æ [PRODUCT_NAME]: TAG que añade el nombre del producto. æ [PRODUCT_IMAGE]: TAG que añade la imagen del producto. æ [PRODUCT_LONG_DESCRIPTION]: TAG que añade la descripción larga del producto. æ [PRODUCT_PRICE]: TAG que añade el precio del producto. æ [ADD_CART_LINK]: TAG que añade al carrito de compras el producto. Por último, comentar que esta sección no dispone de Editor (WYSIWYG), por lo tanto, deberá tener conocimientos HTML o manejar correctamente programas como Dreamweaver o Frontpage para editar esta sección.
Diseños - Carrito En esta sección puede cambiar el aspecto gráfico del carrito de compras en su tienda virtual online. A continuación le mostramos una imagen del carrito de compras de una tienda.
41
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
TAGs necesarias que añaden contenido al carrito: æ [CART_PRODUCT_REMOVE]: TAG que añade una casilla para seleccionar el producto y poder eliminarlo en el carrito de compras. æ [CART_PRODUCT]: TAG que añade el nombre del producto en el carrito de compras. æ [CART_PRODUCT_PRICE]: TAG que añade el precio del producto en el carrito de compras. æ [CART_PRODUCT_QUANTITY]: TAG que añade la cantidad de productos en el carrito de compras. æ [CART_PRODUCT_TOTAL]: TAG que añade el precio total del producto en el carrito. æ [SUB_TOTAL]: TAG que añade la suma total del carrito de compras. æ [CONTINUE_SHOPPING_BUTTON]: TAG que añade el botón de “Continuar Comprando”. æ [CHECKOUT_BUTTON]: TAG que añade el botón de “Realizar Pedido. Recordarle que esta sección no dispone de editor WYSIWYG y necesitará de nociones de HTML.
Diseños - Menú Categorías. En esta zona tiene la posibilidad de editar el aspecto gráfico de 2 secciones de su tienda virtual online: • Category Browser Template: cuadro para editar el aspecto gráfico de la plantilla del Menú de Categorías. Cuando inserte el código HTML en esta sección debe tener en cuentas las siguientes TAGs que añaden el contenido: æ [CATEGORY_LINK]: Añade un vínculo para direccionar a la categoría correspondiente. æ [CATEGORY_NAME]: Añade el nombre de la categoría al menú de categorías. IMPORTANTE: Tenga cuenta que desde aquí solo cambia el aspecto gráfico de la Plantilla (Template) del menú de categoría, pero no se activa en su tienda virtual online. Para activarlo debe hacer lo siguiente: æ Haga click en Productos - Opciones. æ En Categories Menu Type seleccione TEMPLATE. æ Presione Guardar. • Product Search Template: Modifica el aspecto gráfico de la caja de búsqueda de la tienda virtual online. TAG que añade el contenido: æ [SEARCH_FORM]: añade el formulario y el botón “Buscar“ a la caja de búsqueda.
42
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
HERRAMIENTAS Herramientas - Manejar Imágenes. Gestor de imágenes de su área de administración. En esta zona podrá subir aquellas imágenes que usted considere, para posteriormente utilizarlas en su tienda online. Por ejemplo, puede subir la imagen de su logotipo y insertarla en su tienda virtual. (Este ejemplo en concreto se explicará en la sección de este manual EJEMPLOS PRÁCTICOS).
Cuando accede a esta sección puede comprobar que la página se divide en 2 partes: • Arriba puede ver una caja de formulario con un botón Examinar. Si presiona este botón accederá a su propio ordenador para seleccionar la imagen a subir al gestor. IMPORTANTE: no intente subir imágenes más grandes de 400 KB porque el sistema no le dejará. No olvide presionar el botón Guardar para archivar la imagen en su área de administración. • En la parte inferior hay una tabla con las imágenes ya insertadas en el sistema. Podrá borrarlas seleccionando la imagen y presionando el botón de Borrar. IMPORTANTE: para insertar una imagen en cualquier parte de su tienda virtual online debe hacer lo siguiente: æ Haga click encima de la imagen que quiera colocar. æ Se abrirá una nueva página con la imagen. æ Deberá copiar la URL de la imagen que posteriormente utilizará para colocarla (ej.: http://www.urbecom.com/image.php?id=79825945 ) æ Agregue la imagen donde usted quiera dentro de su tienda virtual online utilizando la URL de la imagen.
43
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Herramientas - Crear nuevo formulario Siempre es necesario crear en cualquier página web y/o tienda virtual online un formulario de contacto para que los usuari@s de su web puedan comunicarse con los administradores de la misma. Desde esta sección podrá realizar el primer paso para crear formularios es un tienda online. Lo único acción a realizar es introducir un nombre descriptivo para su nuevo formulario. Si lo desea, opcionalmente, puede insertar una descripción del formulario que va a crear. A continuación pulse en Próximo para pasar al segundo paso. En la pantalla del segundo pasa añadiremos los elementos necesarios para nuestro formulario. Para que se entienda correctamente este paso, vamos a crear un ejemplo con 3 campos para el formulario. Serán los siguientes: Nombre, Email y Consulta. • Para el campo “Nombre” haremos click en Añadir TexBox. Ahora deberemos introducir los parámetros del campo: æ Field Name: escribimos ”Nombre”. æ Texto: texto que aparecerá antes del campo, escribimos “Nombre”. æ Tamaño: Tamaño que ocupará en píxeles el campo, por ejemplo, escribimos 200 píxeles. æ Obligatory: Activando esta opción, este campo pasará a ser obligatorio, es decir, deberá tener información para el envío del formulario. Si activamos la opción Obligatory deberemos introducir el Mensaje de error que dará el formulario si el campo esta vacío (Por ejemplo: “Por favor, el campo Nombre no puede estar vacío”). æ Hacemos click en Añadir para insertar el campo Nombre. • Para añadir el campo “Email” hay que seguir los mismos pasos que en el campo “Nombre”, pero cambiando “Nombre” por “Email”. • Campo “Consulta”: hacemos click en Añadir Área de texto e introduciremos los siguientes parámetros: æ Field Name: escribimos, por ejemplo, “Consulta”. æ Texto: introducimos, por ejemplo, “Escriba su consulta”. æ Tamaño: lo dejamos en 200 píxeles. æ Row (Filas): los dejamos en la opción por defecto, 5.
44
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Ya tenemos los campos de nuestro formulario creados, ahora tenemos que introducir los parámetros finales de nuestro formulario para que funcione correctamente: • Texto del botón de enviar: esto es el texto que tendrá botón que aparecerá debajo de nuestro formulario, por ejemplo, escribimos “Enviar”. • Correo electrónico para envío de la datos de los formularios(*): obligatorio, aquí debe especificar una dirección de correo electrónico válida para la recepción de los datos del formulario. • Mensaje mostrado al usuario cuando los datos son enviados correctamente: aquí deberá introducir el texto que verá el usuario cuando rellene el formulario y presione el en botón Enviar. Puede poner, por ejemplo, “Muchas gracias por contactar con nuestra empresa, en breve atenderemos a su consulta”. Una vez rellenados estos datos haremos click en Próximo. Aparecerá la pantalla del paso final para la configuración de nuestro formulario, donde
debemos decir al sistema en que página queremos que aparezca nuestro formulario. Para ejecutar esta acción hacemos click en Publicar el formulario en el sitio web y elegimos una página, por ejemplo Contacto [ES] y presionamos en Aplicar. Ya tenemos nuestro formulario insertado en la página de Contacto y funcionando perfectamente.
45
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Herramientas - Manejar Formularios. En esta sección se muestra con una tabla todos los formularios insertados en la tienda virtual online. Dispone de las siguientes herramientas para editar los formularios: • Page: página de la tienda online donde aparece el formulario. Haciendo click puede cambiar de página. • Borrar: como su nombre indica elimina el formulario de la tienda online. • Opciones: haciendo click podemos modificar lo siguiente: æ Nombre del formulario. æ Descripción. æ Texto del botón del formulario. æ Mensaje de envío cuando se envía el formulario. æ Correo electrónico donde se recibe los datos enviados desde el formulario. • Cambiar: desde esta zona podemos editar el aspecto del formulario. También, desde aquí, podemos insertar nuevos campos para el formulario. • Copiar: copiamos el formulario en el sistema para poder utilizarlo en otra página de nuestra tienda virtual online.
Herramientas - Posted Data Página para leer todos los mensajes enviados desde los formularios creados. Los datos que se muestran son los siguientes: nombre del formulario, página donde se encuentra, número total de mensajes enviados, fecha del último mensaje publicado. Haciendo click en “View Posted Data“ podrá ver el contenido de los mensajes.
46
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Estadísticas Estadísticas - Reportes. Sección donde se muestran unas estadísticas básicas del tráfico de su tienda virtual online. Los parámetros que se muestran son los siguientes: • Total: número total de visitas a su tienda online. • Único: visitantes nuevos de su tienda virtual. • Recurrentes: visitantes que acceden repetidamente a su tienda online. • Mostrar gráfica de visitas: si introduce un número de días y hace click en Mostrar aparecerá una gráfica de las visitas únicas y recurrentes de los días que ha insertado.
47
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Opciones Opciones - Estilo del Sitio Web Sección para modificar el estilo general de su tienda virtual online. Parámetros que puede editar: • Disable these styles: esta sección genera una hoja de estilos general para todo el sitio. Si desea que esta hoja de estilos no se visualice, presione en YES. • Default Font: fuente por defecto para toda su tienda online. Seleccione el tipo de letra que más le guste. • Default Font Size: tamaño de la fuente por defecto. • Default Font Color: color de la letra por defecto. Para introducir un color deberá insertar su valor en hexadecimal. • Links color: color de los vínculos de su tienda virtual online. Valor en hexadecimal. • Visited Links Color: color de los vínculos visitados. Valor en hexadecimal. • Hover Links Color: color de los vínculos cuando pasa el cursor del ratón por encima. Deberá introducir el valor del color en hexadecimal. • Headers Font Color: color de los textos que se encuentren entre las etiquetas HTML <h1>...</ h1> - <h2>...</h2> - <h3>... </h3>. • Guardar: no olvide presionar este botón para aplicar los cambios.
48
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Ejemplos Prácticos. Insertar un logotipo en la cabecera del Sitio Web. En este ejemplo práctico introduciremos un logotipo en la parte superior de nuestra tienda. Para hacer esta acción haremos click en Herramientas - Manejar Imágenes.
Para introducir la imagen deberemos hacer click en Examinar y seleccionar la imagen de nuestro propio ordenador. Una vez introducida la imagen hacemos click en Añadir para terminar el proceso.
Debemos de tener en cuenta que no podemos introducir una imagen demasiado grande para nuestro logotipo, ya que puede trastocar drásticamente nuestro diseño de tienda virtual, el tamaño máximo recomendable para el logotipo debe ser de 350 píxeles de ancho x 100 píxeles de alto.
49
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Introducida la imagen de su logotipo en el sistema, haremos click en la imagen para que se abra en el navegador y poder copiar su ruta. Puede ver a continuaci贸n unas im谩genes de ejemplo del proceso:
50
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Copiada la ruta de la imagen en el portapapeles CONTROL + C pasaremos a insertarla en la plantilla de nuestra tienda virtual. Haremos click en Diseños - Modifica. Se abrirá una página con diferentes opciones para cambiar aspectos de nuestra tienda virtual. Elegiremos la opción Modifica (WYSIWYG).
51
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Se abrirá el Editor Online para modificar la plantilla. Elegiremos la opción de Insertar/Editar Imagen.
Aparecerá un cuadro de diálogo donde nos pedirá la ruta de la imagen (Image URL). En ese cuadro insertaremos nuestra ruta de la imagen copiada en del portapapeles con la combinación de teclas CONTROL-V o con el botón derecho de ratón y seleccionando Pegar. También podemos introducir alguna descripción de la imagen, pero no es necesario. Una vez terminado este proceso hacemos Click en Insertar, para terminar el proceso.
52
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Llegados a este punto ya solo nos queda guardar los cambios en editor online, presionado el icono de Guardar.
53
ww.laFresaazul.com / Un proyecto de IPmarketing
Manual del usuari@ urbeCOM
Insertar Productos Destacados en la página de Inicio. En la sección Productos - Productos Destacados podemos seleccionar aquellos productos que queremos resaltar como destacados. Para que estos productos aparezcan en la página de Inicio de nuestra tienda virtual online siga los siguientes pasos: • Haga click en Productos - Productos Destacados. Se abrirá una página con todos los productos insertados en su tienda online. Haga click en aquellos que quiera como destacados. Comprobará como cambian de color negro al rojo. Los productos resaltados en rojo son los destacados. • Haga click en Sitio Web - Editor Pro. Se abrirá una página con el árbol de páginas que componen su tienda online. Seleccione la página de Inicio con el botón izquierdo del ratón y, a continuación, presione el botón derecho del ratón para abrir el menú contextual. • Haga click en Editar Código HTML.
• Se abrirá una página con un cuadro, donde aparecerá el código HTML de la página Inicio. Introduzca al final del todo la siguiente etiqueta: <wsa featured_products/> • Abra su tienda online en el navegador y podrá ver como en la página de Inicio aparecen los productos destacados. • Presione Guardar.
54