Liquid HTML - Products
Snippets/portions of code you can use to customize your theme in the most common ways our customers ask us. You can show products from a single cat...
Personaliza tu tienda con el Editor Visual de Temas
En esta página
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 guiará 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.
Estructura de temas
El diseño de un tema se compone de plantillas, y las plantillas se componen de componentes. Los componentes pueden dividirse a su vez en subcomponentes. Esta estructura permite personalizar y organizar fácilmente el diseño y la funcionalidad de un tema.
Por ejemplo, considera una página de producto como la de la siguiente imagen, que presenta una cabecera con un logotipo, un menú de navegación y un ícono de carrito. Debajo de esta cabecera hay una sección que contiene una galería de imágenes del producto, el nombre del producto, las valoraciones de los clientes, un botón “Agregar al carrito” y una descripción. Más abajo, hay un componente de productos destacados, seguido de un pie de página que incluye información adicional, un menú secundario y un logotipo que representa un método de pago admitido por la tienda. Esta estructura jerárquica garantiza un diseño intuitivo y fácilmente adaptable.
El Diseño de la tienda está formado por elementos que aparecen en la mayoría de las páginas de la tienda, como el encabezado y el pie de página.
La plantilla de producto incluye elementos esenciales como el botón “Agregar al carrito”, el título del producto, las imágenes y la descripción.
En el siguiente ejemplo, hemos incorporado un componente que muestra productos relacionados. Sin embargo, se pueden incorporar componentes adicionales, como un video de YouTube o productos de una categoría específica que estén actualmente a la venta. Esta flexibilidad permite un contenido diverso y atractivo en todas las páginas de la tienda.
Al personalizar los componentes, todas las plantillas de tu tienda tendrán un diseño único en todo el sitio.
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.
Familiarízate con la interfaz del editor visual
La interfaz del Editor Visual de Código consta de las siguientes secciones:
Barra lateral
Contiene los componentes y ajustes que puedes añadir, modificar o eliminar dentro de tu tema.
De arriba abajo, estos son los elementos:
- Logotipo de Jumpseller: Es un ícono en el que puedes hacer clic y que te lleva a tu Panel de Administración.
- Móvil/Escritorio: Esta opción te permite cambiar entre la versión móvil y de escritorio del área de vista previa.
- Actualizar: Este botón actualiza el área de Vista Previa para mostrar cualquier cambio que se haya realizado.
- Ayuda: Esta opción proporciona acceso a la documentación que describe todas las opciones del tema seleccionado.
- Tienda: Al hacer clic en este botón se abre una nueva pestaña con tu tienda.
- Editor: Esta opción te redirige al editor de código.
- Auto/Luz/Oscuro: Esta opción te permite cambiar el esquema de colores de la interfaz. El ajuste Auto utilizará el predeterminado de tu sistema.
Menú componentes
Contiene los elementos y ajustes que puedes añadir, modificar o eliminar dentro de tu tema.
En esta sección puedes añadir, editar y eliminar componentes de plantilla. Las opciones del Menú Componentes son las siguientes:
-
Configuración general: Estos parámetros te permiten configurar elementos que son generales para el tema y las plantillas, como colores, estilos de etiquetas de promoción y otros elementos que no están directamente relacionados con un componente específico.
-
Componentes: Aquí puedes editar los componentes de la plantilla seleccionada y cualquier subcomponente. También puedes añadir nuevos componentes desde la Galería o eliminarlos. Algunos temas incluyen dos componentes especiales llamados Encabezado y Pie de página que te permiten personalizar específicamente esas partes del tema.
Barra superior
La Barra Superior de la interfaz del Editor Visual proporciona controles para seleccionar qué plantilla modificar, deshacer y rehacer cambios, y guardar tu trabajo. También incluye un Botón Contraer que te permite ocultar o mostrar el Menú de Componentes.
Estos son los elementos de la Barra superior:
- Selector de plantilla: Este menú desplegable te permite seleccionar la plantilla que quieres personalizar.
- Botón Contraer: Este botón cuadrado te permite ocultar o mostrar el Menú de Componentes.
- Deshacer/Hacer/Guardar: Estos botones controlan los cambios que has realizado en tus plantillas. Para previsualizar la Configuración General, deberás hacer clic en el botón Guardar.
Editar el diseño de tu tienda
Personalizar el diseño de tu tienda online es una parte esencial para crear una identidad de marca única y memorable. Con el Editor Visual de Jumpseller, puedes modificar fácilmente el diseño de tu tienda sin ningún conocimiento de código. Desde ajustar los colores y las fuentes hasta reorganizar los elementos de la página, el Editor Visual te da un control total sobre el aspecto de tu tienda.
En esta sección, te proporcionaremos una visión general de los elementos del Editor Visual que te permiten personalizar el diseño de tu tienda.
Disposición de la tienda
El diseño de la tienda es la columna vertebral de un sitio web, ya que sus elementos y reglas están presentes en todas las plantillas del tema. El diseño de la tienda suele incluir la cabecera y el pie de página del sitio web, así como otros elementos que son coherentes en todas las páginas, como el logotipo del sitio web y el menú de navegación. Edita el diseño de tu tema en las secciones Configuración general, Encabezado y Pie de página del Menú Componentes.
Plantillas
Las plantillas definen la estructura básica de un sitio web y determinan qué componentes se utilizan. Se pueden personalizar para diferentes páginas de un sitio web con el fin de mantener la coherencia y simplificar el proceso de diseño. Elige tu plantilla en la Barra superior. Esta es una lista de todas las plantillas de una tienda:
| Plantilla | Descripción |
|---|---|
| Inicio | Tu página de inicio. |
| Resultados de la búsqueda | Resultados de la búsqueda de productos. |
| Error | Página de error. Esta página se mostrará cuando tu cliente aterrice en una página que no existe. |
| Restablecer contraseña | Permite a los clientes restablecer su contraseña. |
| Acceso del cliente | Permite a los clientes acceder a su cuenta. |
| Creación de clientes | Permite a los clientes crear una cuenta nueva. |
| Edición para clientes | Permite a los clientes editar su dirección. |
| Cuenta Cliente | Muestra información sobre la cuenta del cliente. |
| Contacto | Proporciona un formulario para que los clientes se pongan en contacto con la tienda. |
| Éxito | Éxito en el pago de Checkout v1. |
| Revisión Orden | Permite a los clientes revisar su pedido para Checkout v1. |
| Formulario de pago | Muestra un formulario para que los clientes pasen por caja Checkout v1. |
| Carrito | Muestra el carrito del cliente. |
| Páginas | Se utiliza para las páginas personalizadas del sitio web. |
| Productos | Muestra detalles sobre un producto concreto. |
| Categoría | Muestra una lista de productos de una categoría. |
Componentes
Los componentes son los bloques de construcción fundamentales de la estructura de un Tema estructurado. Pueden incluir cabeceras, pies de página, vídeos, banners, deslizadores y otros elementos que se utilizan para construir páginas en un sitio web. Los componentes pueden incorporarse, editarse y eliminarse en el Menú Componentes del Editor Visual, y pueden reutilizarse en diferentes plantillas para mantener la coherencia tanto en el diseño como en la funcionalidad.
Mediante el uso de componentes, los diseñadores de sitios web pueden crear diseños y funciones complejas de forma eficaz sin apenas conocimientos de código, ya que los componentes individuales pueden manipularse y reorganizarse fácilmente. Esto también facilita el mantenimiento del sitio web, ya que los cambios en un componente se reflejarán en todas las plantillas que lo utilicen.
Puedes modificar fácilmente los componentes con el Ayudante del Editor de Temas, que te permite editar los ajustes, así como duplicar, ocultar, eliminar y también reordenar los componentes directamente en la vista previa en línea. También puedes hacer clic en el botón “Agregar componente” en la posición deseada y elegir el tipo de componente que quieras añadir.
<
Subcomponentes
En el contexto del Editor Visual, los subcomponentes son los elementos más pequeños que forman un componente. Por ejemplo, un componente Banners podría incluir un subcomponente para cada imagen del área de banners, mientras que un componente Slider tendría un subcomponente distinto para cada diapositiva.
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.
Para obtener información actualizada sobre el estado de nuestro sistema y todos sus servicios, visita status.jumpseller.com. También puedes suscribirte para recibir notificaciones sobre cualquier actualización o trabajo de mantenimiento en el sitio.