Personaliza tu tema
Personaliza el tema de tu tienda en línea
Tu tema refleja la identidad de tu marca. En Jumpseller, nuestros temas tienen una característica de personalización distintiva para crear experiencias únicas para tus clientes. Llamamos a estas opciones: Opciones del Tema.
En esta guía
Opciones de Tema
Técnicamente, una opción del tema es un campo en una tienda Jumpseller que puede incluir información como imágenes, textos, enlaces, números, archivos, colores, datos lógicos o booleanos, etc. Se utilizan para personalizar el diseño de tu tienda sin la necesidad de tener conocimientos de HTML / CSS, que es el lenguaje principal usado para diseñar sitios web.
Después de seleccionar un Tema, en tu Panel de Administración: Temas> Opciones del Tema, aparecerán todas las opciones del tema seleccionado. En esta guía te mostraremos instrucciones generales y ejemplos de cómo usar las opciones que se incluyen en la mayoría de los temas.
Enlaces en Banners, Sliders, botones o texto
Coloca el enlace a la página que quieres conectar con el elemento. Los enlaces pueden ser internos o externos y deben seguir este formato:
- Correcto:
/page-name
llevará awww.yourstore.com/page-name
- Correcto:
//www.yourstore.com/page-name
llevará awww.yourstore.com/page-name
- Correcto:
//google.com
llevará agoogle.com
- Incorrecto:
https://example.com
no uses elHTTP://
orHTTPS://
en los enlaces, solo usa//
como en//example.com
Obtén el enlace a las páginas de tu tienda en la configuración de "Optimización del Motor de Búsqueda" (SEO): Productos, Categorías y Páginas, tienen estas opciones.
Por ejemplo, en las páginas de Categoría: desplázate hacia abajo hasta la parte de "Optimización de Motor de Búsqueda" donde puedes obtener el enlace permanente (pemanlink) de la categoría. Luego, al escribir ese enlace permanente en la opción del tema "Enlace de Banner" o "enlace a Botón" o similar, redirigirá el banner a la página de la categoría.
Formularios de suscripción
Algunos temas contienen un formulario de suscripción que te permite enlazar tu tienda con Mailchimp, una herramienta de marketing por email fácil de usar. Para instalarla sigue estos pasos:
- Paso 1: Obtén el código de acción de una lista en Mailchimp, usa esta guía, especialmente el paso (8) sobre cómo obtener tu código. Debería verse como el texto subrayado aquí:
- Correcto:
https://jumpseller.us20.list-manage-com/subscribe/post?u=XXXXXXXXXXXXXXXXXXXXXXX$amp;id=119acb
- Correcto:
//jumpseller.us20.list-manage-com/subscribe/post?u=XXXXXXXXXXXXXXXXXXXXXXX$amp;id=119acb
- Incorrect:
http://jumpseller.us20.list-manage-com/subscribe/post?u=XXXXXXXXXXXXXXXXXXXXXXX$amp;id=119acb
- Correcto:
- Paso 2: Pégalo en la opción de tema de URL del formulario, debe estar en la sección de Pie de página (Footer) u Otras Opciones en tus Opciones de Tema.
Favicon: ícono del navegador
Es un icono que los visitantes de la página verán al lado del nombre de tu página en sus navegadores. No existe un estándar definido entre todos los navegadores para esto, algunos podrían funcionar en Firefox pero no en Chrome. Así que para asegurarte de que tu favicon se muestre en todos los navegadores, sigue estas instrucciones:
- Usa los formatos PNG o ICO
- La resolución no debe ser superior a los
64px*64px
Busca el campo Favicon en la sección General u Otro en tus Opciones de Tema.
Sliders y Diseño Responsivo
Los sliders son esos grandes banners móviles que empezaron a hacerse populares hace una década. Las tiendas online quieren mostrar la mayoría de su contenido a la vez.
Hay una nueva tendencia que sugiere que es mucho mejor tener una imagen o una cantidad muy pequeña de imágenes, la mayoría de los clientes solo prestará atención a la primera imagen en un slider que tenga que cargar varias imágenes, arriesgando una pantalla en blanco si la conexión a Internet no es lo suficientemente rápida. Usa más de una imagen en tu slider solo si esto es muy importante para tu negocio.
Diseño Responsivo en Sliders con un Fondo y elementos en la parte superior
En estos tipos de sliders, para hacer visibles y fáciles de leer los elementos ubicados sobre un fondo, la imagen de fondo mantendrá su altura al cambiar de una pantalla a otra más pequeña y reorganizará los botones y los otros objetos para que se ajusten a la nueva pantalla. Este es el mismo slider visto en diferentes dispositivos:
Diseño Responsivo en Sliders sin elementos en la parte superior, solo una imagen.
En algunos temas, como el Simple, hay una opción para Activar el Slider Autoheight.
Más allá de las Opciones: Personalización de Temas
Con algunos conocimientos de HTML/CSS/Javascript, puedes cambiar todos los aspectos visibles de tu tema en tu Panel de Administración: Temas > Editor de código.
¿Eres un experto? Crea tu propio tema.
Blocks
- Diseño: los cambios en este bloque (block) afectarán a todas las páginas de la tienda.
- Inicio: la Página de Inicio
- Producto: las páginas del Producto, pueden tener múltiples plantillas.
- Categoría: las páginas de Categoría de Producto, pueden tener múltiples plantillas.
- Búsqueda: los resultados de búsqueda de Productos.
- Cuentas de Clientes: las páginas de cuentas de clientes, inicio de sesión, registro, cambio de contraseña, pedidos anteriores, etc.
- Páginas de Pago: Carrito, Pagar, Revisar pedido y Página de éxito.
- Mensajes de Error: Todos los errores se mostrarán en esta página.
Partials
Los partials son archivos con las extensiones .liquid, que son usados por elementos que se repiten en más páginas, por ejemplo: las listas de productos. Si editas un partial, los cambios tendrán efecto en todos los elementos que lo están utilizando.
Archivos y Activos
La mayoría de los archivos CSS y Javascript de tu tienda se presentan en la sección de Archivos y Activos en la esquina izquierda del editor de código.
Opciones de Tema
Las Opciones de Tema se administran en un archivo JSON llamado options.json, con la siguiente estructura de ejemplo:
Al modificar un elemento aquí tendrá efecto en tu Panel de Administración: Temas > Opciones de Tema. Úsalos para crear formas simples de cambiar elementos en tu tema.
{
"Social Networks": {
"icon": "archive",
"options": {
"enable_facebook": {
"name": "Enable Facebook Share Button",
"type": "checkbox",
"default": "1"
},
"facebook_url": {
"name": "Facebook URL",
"type": "input",
"default": "https://www.facebook.com/jumpseller"
},
"twitter_url": {
"name": "Twitter URL",
"type": "input",
"default": "https://twitter.com/jumpseller"
},
"number_tweets": {
"name": "Number of Latest Tweets to Display",
"type": "select",
"default": "10",
"options": [
{
"5": "5"
},
{
"10": "10"
},
{
"15": "15"
}
]
}
}
}
}
icon
La clase Font Awesome para el icono que deseas mostrar asociado con un grupo de Opciones de Tema.name
El nombre de la Opción de Tema que se muestra en el Panel de Administración.type
Define el Tipo de Opción. Los valores aceptados son: input, text, checkbox, select, file, color.default
El valor predeterminado de la Opción de Tema.options
Identifica el inicio de las Opciones de Tema dentro de un grupo. También se usa para mostrar las opciones disponibles que se muestran en la Lista de Selección (solo usada cuando type = select).