Centro de Ayuda

Personaliza tu tienda con el Editor Visual de Temas

El Editor Visual de Temas de Jumpseller es una herramienta intuitiva y potente diseñada para ayudarte a personalizar el tema de tu tienda online con facilidad. Esta completa guía te orientará a través de las distintas características y funciones de nuestro editor visual de temas, permitiéndote crear el tema perfecto para tu tienda.

Puedes acceder al Editor Visual de Temas a través de la sección “Temas” en tu menú lateral de administración o también a través de las acciones de cada tema individual en tu galería de temas en tu panel de administración.

Encuentra el editor visual de Temas

Puedes editar tu tema actual o un tema secundario con el que quieras trabajar sin ponerlo en línea. Para el tema actual accede en tu Panel de Administración > Temas > Editor Visual o en el botón Personalizar de tu tema actual dentro de la Galería de Temas.

Open Visual Theme Editor on Current Theme

Para los temas secundarios, haz clic en el botón acciones y luego en personalizar.

Open Visual Theme Editor on Current Theme

Estructura del Editor Visual

Estructuralmente el editor visual se compone de 3 áreas o secciones:

  1. Barra superior
  2. Barra lateral
  3. Vista previa del tema

Barra superior

Abrir Barra superior

Identificación del tema

Abrir Barra superior Identificación del tema
  • Volver a la galería de temas: Enlace directo para volver a la galería de temas en administrador de tu tienda.
  • Nombre y estado del tema: El nombre actual del tema, puedes renombrarlo dentro de la galería de temas en el botón “Acciones”. Junto al nombre del tema hay un indicador con el estado de este, si es el tema Actual o es un Borrador no publicado. El estado de tu tema lo puedes modificar en la galería de temas en tu panel de administración.
  • Acciones del tema: Junto con el nombre y estado del tema hay un botón con tres puntos dentro que despliega los siguientes items:
    • Versión del tema: Número que indica cuál es la versión actual de tu tema.
    • Link para ver tema en vivo: Este link abre tu tema en una nueva pestaña de tu navegador para previsualizar el tema. Puedes previsualiar un tema principal o un tema en estado borrador.
    • Link al editor de código: Enlace directo al editor de código de tu tema. Recomendamos acceder a la edición de código solo si tienes conocimientos de programación liquid, html, css o javascript.
    • Documentación del tema: Link para ver la documentación del tema.

Administrador de plantillas

Abrir Barra superior Selección de plantilla

En este selector puedes realizar las acciones necesarias para sobre las plantillas de tu tema.

Cambiar de plantilla

Escoge cuál plantilla necesitas pre-visualizar, entre estas se encuentran:

  • Página de inicio: La portada de tu tema, es la página inicial que se muestra al ingresar al dominio principal de tu tienda.
  • Producto: esta plantilla muestra cómo se desplegará cada elemento dentro de la ficha de producto.
  • Categoría: la plantilla de categoría está destinada a mostrar las colecciones de productos que haz categorizado en tu administrador de productos.
  • Página
    • Blog: Plantilla que despliega las publicaciones categorizadas como Post.
    • Post: Plantilla dedicada a las publicaciones que serán mostradas en la plantilla Blog.
    • Default: Esta es la plantilla por defecto para tus páginas de contenido de tipo genérico. Las páginas legales. Términos y condiciones, Políticas de privacidad y políticas de envío, automáticamente usan esta plantilla.
  • Búsqueda: Esta plantilla es donde se muestran los resultados de búsqueda de tu tema.
  • Contacto: Esta plantilla muestra tu información de contacto, redes sociales, direcciones, mapa y formulario de contacto.
  • Error: Cuando tus visitantes lleguen a una página que no existe, por ejemplo por haber ingresado alguna url errónea, esta página es la que se desplegará.

Crear una nueva plantilla

Para las plantillas de Producto, Categoría o Página existe la opción de crear una nueva plantilla personalizada. Para esto debes seguir los siguientes pasos:

  1. Hacer clic en alguna de las plantillas mencionadas anteriormente
  2. Cliquear el botón “Crear nueva plantilla”
  3. Escoger el nombre de la nueva plantilla
  4. Selecciona la plantilla base desde donde se creará esta nueva plantilla
  5. Asociar un producto, una categoría o una página - según corresponda - a este nuevo template para que pueda ser pre-visualizado
  6. Clic en confirmar y ya está creada la nueva plantilla lista para diseñar. La plantilla estará disponible para su edición dentro del listado.

Acciones sobre la vista previa

Abrir Acciones sobre la vista previa
  • Ocultar la barra lateral: Si necesitas más espacio de visualización, puedes ocultar la barra lateral.
  • Vista móvil o escritorio: Estos botones te permiten previsualizar tu tema en ambas versiones.
  • Actualizar: Para volver a cargar la vista previa de tu tema.
  • Activar edición: Te permite activar o desactivar la edición de los componentes a través de la vista previa.
  • Tema del editor visual: Puedes escoger entre la visualización Clara u Obscura.
  • Zoom: Para agrandar y encoger el tamaño de la vista previa de tu tema.
  • Hacer o deshacer Estos botones te permiten devolver cambios o rehacer cambios que hayas aplicado a tu tema.
  • Guardar: El botón guardar, salva todos los cambios realizados sobre tu tema en el editor visual.

Barra lateral

Abrir Barra lateral

En la barra lateral de tu editor visual encontrarás todas las herramientas gráficas que permiten diseñar los temas de tu tienda a tu gusto. A continuación describimos los elementos base que forman el diseño de tu tema.

Configuración del tema

Al comienzo de la barra lateral encontrarás un acceso directo a esta sub-sección dónde podrás hallar las configuraciones generales que aplican sobre tu tema y sus plantillas, tales como colores, tipografia, bloques de producto, códigos personalizados, blog, notificación de agregar al carro, personalización de proceso de compra entre otros. En este link puedes ver un listado de la documentación para temas en específico.

Configuración de la cabecera y pie de página

En tu tema existen dos secciones que estan presentes automáticamente en todas las plantillas que conforman tu tienda:

  • Cabecera: En la cabecera se muestran elementos como barra de búsqueda, logo de la tienda, selectores de moneda e idioma, acceso a la cuenta de usuarios, carro de compras, menú principal entre otros elementos que dependen de cada tema.
  • Pie de página: En el pie de página ubicamos menús personalizados, links a redes sociales, información de contacto, medios de pago.

Configuración de los componentes de cada plantilla

Los componentes de un tema son los bloques de contenido que componen tu tienda: por ejemplo sliders, banners, galerías de productos, cabeceras entre muchos otros. Cada componente tiene su propia configuración general y a su vez algunos poseen sub-componentes que construyen un segundo nivel de contenido que también puede ser configurado individualmente.

Abrir Barra lateral

Para explicar la estructura de los componentes y sub-componentes utilizaremos a modo de ejemplo el componente Slider destacado en la imagen anterior.

  1. Slider: El Slider es un componente el cual tiene sus propias configuraciones indiiduales, como cambio de colores, acciones sobre los slider individuales, espacio, alineación entre otros.
  2. Slide: El Slide es un sub-componente del componente principal Slider, en cada uno de estos puedes modificar la configuración individual, como imágenes, colores, links entre otros.
  3. Agregar sub-componente: Puedes agregar múltiples sub-componente a tu comonente principal, en el ejemplo de la imagen de arriba son Slides. Este mismo ejemplo puede aplicar a muchos componentes de tu tema como Banners, Galería de logos, Barra de confianza entre otros.
  4. Agregar componente: En esta sección puedes agregar un nuevo componente bajo algunos criterios que detallamos a continuación:
    • Nuevo: Puedes crear un componente completamente nuevo y configurarlo desde 0.
    • Duplicar: Crea rápidamente copias de componentes que ya hayas creado en este Tema. Reutiliza diseños y funcionalidades, y modifica la copia sin afectar al original.
    • Reutilizar: Reutiliza el contenido de forma eficiente incorporando componentes existentes de otra plantilla dentro de este Tema. Incorpora diseños y funcionalidades sin empezar de cero. Ten en cuenta que las modificaciones afectarán a ambas plantillas.
Abrir Barra lateral detalles

Figura 1:

  • Inicio: Indica el nombre de la plantilla actual donde están los componentes están siendo editados
  • Slider: Nombre del componente
  • Bienvenido: Nombre del sub-componente
  • Agregar nuevo Slide: Botón para agregar un nuevo sub-componente. En este caso un Slide al Slider

Figura 2:

  • Flecha: Botón para mostrar u ocultar los sub-componentes
  • Basurero: Botón para eliminar el componente y sus sub-componentes
  • Ojo: Botón para ocultar el componente y sus susb-componentes

Figura 3:

  • Círculo gris obscuro: Indica que hay cambios sin guardar
  • Círculo gris claro y ojo tachado: Indica que el componente o sub-componente están ocultos
  • Círculo verde: Indica que hay un componente o sub-componente nuevo sin guardar

Vista previa

En este sector de tu editor visual podrás previsualizar los cambios que vayas realizando en tu tema, las modificaciones que hagas en la barra lateral se mostrarán en esta ventana.

Abrir Vista previa

Al posar el mouse sobre la pre visualización del tema, podrás ver algunos elementos de acceso rápido para la edición de tu contenido.

  1. Nombre del componente: Este elemento identifica el nombre del componente.
  2. Agregar componente: Este botón permite agregar un componente arriba o debajo del componente pre visualizado. Luego de hacer clic en este botón, el editor visual mostrará una ventana emergente con las opciones disponibles de componente para crear.
  3. Acciones sobre el componente:
    • Editar: El lápiz abre el componente a editar en la barra lateral.
    • Duplicar: Permite hacer una copia idéntica del componente.
    • Visibilidad: Permite mostrar u ocultar el componente desde tu tema. Esta opción permite seguir editando el componente sin eliminarlo.
    • Eliminar: Acción de eliminar el componente desde tu tema. Esta opción no se puede deshacer luego de guardar.
    • Re ordenar: Los botones con flechas hacia arriba y abajo permiten re ordenar los componentes de tu tema.

Comienza tu viaje con nosotros!

Pruébalo gratis durante 14 días. No necesitas tarjeta de crédito.