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.

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

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

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

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

• 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

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.

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.

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.

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.

---

Preguntas frecuentes

• ¿Puedo personalizar el código de mi tema? Sí, puedes editar el código de tu tema utilizando el editor de código accesible a través del Editor Visual. Sin embargo, es importante tener en cuenta que cualquier cambio que realices puede tener un impacto significativo en la funcionalidad de tu tienda y puede requerir conocimientos técnicos avanzados. Te recomendamos encarecidamente que consultes con nuestro equipo de soporte antes de hacer cualquier modificación. Simplemente cuéntanos tus objetivos y comparte tu código, y estaremos encantados de ayudarte a conseguir el resultado deseado. Nuestro equipo de expertos te guiará a lo largo del proceso y se asegurará de que tu tienda siga siendo totalmente funcional y esté optimizada.

• ¿Puedo importar temas de otra plataforma? Aunque técnicamente es posible copiar/pegar el código de cada plantilla desde un tema externo, tendrás que modificar los elementos necesarios para que funcionen en Jumpseller. Esto incluye botones como “agregar al carrito” y “realizar pago”, que deberán modificarse según nuestra guía técnica en www.jumpseller.com/support/liquid.

• ¿Cómo puedo actualizar mi tema a una versión más reciente? Para actualizar tu tema a una versión más reciente, puedes seguir estos pasos:

  • Ve a Temas > Galería.
  • Busca el nombre de tu tema actual en la Galería.
  • Instala la versión más reciente del tema. Aparecerá una ventana emergente, ofreciéndote la opción de copiar el contenido de tu versión actual a la nueva versión.
  • El tema actualizado se guardará como tema secundario en la sección “Otros temas instalados”.

  Si has realizado grandes personalizaciones en el código de tu tema, te recomendamos que te pongas en contacto con nuestro equipo de soporte antes de actualizarlo para asegurarte de que tus personalizaciones son compatibles con la nueva versión.

• ¿Puedo crear mi propia plantilla? Sí, puedes crear tu propia plantilla utilizando el editor de código. Simplemente ve a Temas > Editor de código > sección Plantillas > Selecciona el tipo de plantilla y haz clic en “Añadir plantilla”. Se creará una copia de la plantilla predeterminada y podrás añadir tu propio código. Dependiendo del tipo de plantilla, puedes seleccionar cuál utilizar en la configuración de cada elemento. Por ejemplo, las Plantillas de Producto se mostrarán como una opción en los Ajustes de Producto, las Plantillas de Categoría se mostrarán como una opción en los Ajustes de Categoría, etc.

Estamos aquí para ayudarte, así que si tienes alguna duda, puedes contactarnos en cualquier momento.