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
  • Enlaces en Banners, Sliders, botones o texto
  • Formularios de suscripción
  • Favicon: icono del navegador
  • Sliders y Diseño Responsivo
    • Diseño Responsivo en Sliders con un fondo y elementos en la parte superior
    • Diseño Responsivo en Sliders sin elementos en la parte superior, solo una imagen
• Más allá de las opciones: Personalización de Temas
  • Blocks
  • Partials
  • Archivos y Activos
  • Opciones de Tema

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á a www.yourstore.com/page-name
  
• Correcto: //www.yourstore.com/page-name llevará a www.yourstore.com/page-name
  
• Correcto: //google.com llevará a google.com
  
• Incorrecto: https://example.com no uses el HTTP:// or HTTPS:// 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
    
• 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 los64px*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).