Diseño de mi tienda

En esta guía te mostramos como personalizar tu tienda en línea.

Este módulo te permite personalizar completamente el diseño de tu tienda. En el modo de diseño, puedes agregar imágenes, videos, productos, modificar los colores, los textos, entre otras opciones, para darle una apariencia única a tu tienda.

Edición de tu tienda

• Dirígete a "Tienda en línea"

Asegúrate de tener un template antes de comenzar, si no sabes como elegir un template te recomendamos leer la guía de Templates.

• Da clic en "Diseño de mi tienda"

 

Configuración

En la ventana de configuración puedes realizar algunos cambios significativos para los motores de búsqueda, también puedes elegir los colores principales de tu tienda, la fuente (tipo de letra), añadir redes sociales, etc.

• Para dirigirte a configuración da clic en "Configuración" en la parte inferior izquierda de la pantalla.
  

• SEO

  • En la sección de SEO puedes modificar el título de página, la descripción, tags personalizados y el favicon (pequeña imagen que apare).

• Estilos

  • En esta sección puedes cambiar el estilo de colores de tu página.

• Redes sociales

  • Aquí puedes agregar diferentes redes sociales para que sean visibles en tu página.

• Fonts

  • Puedes elegir diferentes tipos de letras en esta sección.

 

 

Encabezado

El encabezado es la parte superior de la tienda, en donde se muestra el header que contiene las diferentes ventanas de tu tienda.

• Agregar logo al encabezado

  • Da clic en seleccionar, para seleccionar el logo de tu empresa desde tu ordenador.
    
  • Una vez seleccionado el logo ajusta su tamaño con la barra de "Tamaño de Logo".

• Mostrar

  Elige que mostrar en tu encabezado activando las visualizaciones dando clic en los checkbox respectivos.
  

• Otras funciones

  Cambia el header, tipo de "carrito", "buscar", colores de texto y colores de fondo más abajo dentro de encabezado.
  

Pie de página

Es una área que proporciona información adicional y enlaces útiles para los visitantes.

• Esta are puede contener:
  • • Logo
    • Nombre de la empresa
    • Menú
    • Sección de inicio de cesión
    • Información
    • Métodos de pago
• Añade y elimina la información a tu preferencia con los checkboxes.
  

 

Secciones

Las secciones son las divisiones dentro de una misma ventana de tu pagina web.

Tipos de secciones:

• Carrusel de imagen: Se utiliza como una herramienta visual para mostrar una variedad de productos o promociones en un espacio limitado. El carrusel de imágenes permite a los visitantes de la tienda en línea ver una serie de imágenes en un solo lugar, lo que les brinda una visión rápida de los productos destacados, las ofertas especiales o cualquier otro contenido relevante.
  • Puedes crear un nuevo carrusel dando clic en "Crear nuevo carrusel" después de elegir carrusel de imagen en una sección.
  • El carrusel puede estar compuesto de:
    • Imagenes (formato .jpg, .png, .gif, .svg, .webp).
    • Catergorías de la tienda.
    • Marcas.
      
      
      
• Collage: Se utiliza para hacer un conjunto de imágenes o información dentro de un mismo contenedor.
  • El collage puede estar compuesto por:
    • Imágenes.
    • Texto
    • Producto
    • Categoría
    • Video
    • Mapa
      
      
      
• Multicolumna: Esta función es útil para alinear imágenes y textos.
  
• Imagen + botón + texto: Este módulo resulta útil si deseas agregar alguna imagen con un botón que lleve al usuario a una URL definida y un texto descriptivo.
  
• Imagen: Este módulo te permite agregar una imagen a tu tienda en línea en cualquiera de los siguientes formatos:
  • • .jpg
    • .png
    • .gif
    • .svg
    • .webp
      
      
• Imagen + texto + link: Este módulo te permite agregar alguna imagen y un texto descriptivo, también te permite agregar una URL a la cual el usuario es dirigido en caso de hacer clic a la imagen
  
  
• Banner hover + link: se utiliza para resaltar y promocionar productos, ofertas o categorías específicas de manera visualmente atractiva. Este tipo de módulo combina la funcionalidad de un banner con la capacidad de agregar enlaces o acciones al pasar el cursor sobre él (efecto hover).
  
  
• Carrusel de productos: Este módulo es utilizado para destacar una variedad de productos, el carrusel de productos también mejora la experiencia de navegación del usuario, ya que automáticamente va mostrando diferentes productos.
  
  
  
• Lista de categorías: 
• Lista de productos: En este módulo puedes listar productos agregando imagen, descripción, precio y botón de compra. Este tipo de visualización de productos resulta útil para ahorrar espacio y ordenar productos.
  
• Texto: En este tipo de módulos puedes agregar títulos, textos descriptivos de tu página o marca, etc.
  
  
• Botón: Te permite añadir un botón personalizado en el cual puedes elegir su forma color y texto, este botón redirigirá al usuario a una URL establecida
  
  
• Contacto: En este módulo los usuarios pueden escribir su correo, número, información y un mensaje en caso de tener dudas o aclaraciones.
  
  
• Video: En este módulo puedes agregar un video para realizar la experiencia de usuario más interactiva y entretenida.
  
  
• Mapa: Aquí puedes agregar ubicaciones que quieras mostrar en tu tienda, puede ser un almacén, tienda o punto de entrega.

Configuración de imágenes

Puedes cambiar las imágenes de tu página web siempre y cuando sea un módulo que lo permita como por ejemplo:

• • • Imagen + texto + link
    • Imagen
    • Banner hover + link
    • Imagen + botón + texto
    • Collage
    • Multicolumna
    • Carrusel de imagen
• Cambia o sube imágenes dando clic en el botón de "Subir imágenes".
  
• En caso de querer una imagen diferente para móvil desactiva el checkbox de "Usar misma imagen para móvil" y sube la imagen deseada.
  
  
  

Configuración de botones

Todos los botones de tu página web son personalizables, puedes cambiar su tamaño forma, color, etc.

• Cambia el URL al que va dirigido el botón en la parte de "URL de botón".
  
• Escribe el texto de visualización de botón en "Texto de botón".
  
• Activa, desactiva y cambia colores del botón con los check boxes.
  
• Selecciona la forma del botón.
  
• Selecciona la posición y el tamaño del botón.
  

Edita textos a detalle

Edita los textos de cada módulo a tu preferencia.

• Da clic en el módulo de texto que deseas editar.
• Da clic en "Editar texto a detalle".
  
• Cambia color de texto, fondo y posición.
  
  
  

Agregar una sección

• Opción 1: Dirígete a la parte inferior de la página y da clic en el botón de "Añadir sección" representado con un +
  
• Opción 2: En el menú desplegable izquierdo, asegúrate de ver las secciones y sus nombre ve a la parte inferior y da clic en "Añadir sección".
  

Elimina una sección

• Da clic sobre la sección para seleccionarla.
• En el menú desplegable izquierdo ve a la parte inferior y da clic en "Eliminar sección".
  

Cambia un módulo

• Da clic al módulo que deseas cambiar.
• En el menú desplegable izquierdo ve a la parte inferior y da clic en "Cambiar módulo".
  
• Selecciona el módulo de tu preferencia.

 

Editar diferentes páginas de la tienda (Nosotros, Contacto, Términos y condiciones, etc.)

• Asegúrate de guardar los cambios realizados haciendo clic en el botón de "Guardar cambios" en la parte superior derecha.
• Despliega el menú de la parte superior y selecciona la página que deseas editar a continuación.
  

 

Previsualización en diferentes dispositivos

Si deseas ver como se verá tu página en un celular o tablet, puedes cambiar la visualización dando clic en los siguientes botones en la parte superior:

• Da clic en "Ver" tienda para previsualizar los cambios.
  

 

Guardar cambios

• Da clic en el botón de "Guardar cambios".
• Da clic en el botón de "Confirmar".

 

¡Listo ahora ya sabes como diseñar tu tienda!