Estás leyendo la publicación: Core Templating Engine de 3dcart es lo último en diseño web de comercio electrónico
Comenzar un negocio en línea es mucho más fácil de lo que solía ser, pero el diseño web para su tienda de comercio electrónico aún puede ser un desafío. Es posible ser propietario de un negocio y desarrollador con habilidades de diseño, pero aun así, es mejor emplear su valioso tiempo en administrar y hacer crecer su negocio. Es por eso plantillas de sitios web de comercio electrónico están disponibles para una variedad de plataformas para que pueda crear un gran sitio web sin conocimientos especializados. Pero seamos claros: no todas las plantillas de comercio electrónico son de alta calidad. El diseño no optimizado y la funcionalidad móvil deficiente son comunes.
Es por eso que 3dcart presentó Core Templating Engine, un marco de tema revolucionario que usamos como base para todos los temas actuales de 3dcart. Con las plantillas Core, el diseño del tema se ha revisado para que sea más flexible desde el punto de vista del diseño y técnicamente superior, lo que ofrece grandes mejoras para los desarrolladores y usuarios, ya sea entre bastidores o no.
Echemos un vistazo más de cerca al Core Templating Engine y las ventajas que ofrece para el diseño de tiendas 3dcart.
Introducción al motor de plantillas central
El Core Templating Engine está diseñado para brindar varias ventajas tanto a los propietarios de tiendas como a los desarrolladores de temas de comercio electrónico, al mismo tiempo que ayuda a sus visitantes a navegar y comprar sin esfuerzo desde cualquier dispositivo. Los beneficios inmediatos incluyen un diseño optimizado para dispositivos móviles, máxima flexibilidad y la facilidad de crear una experiencia de usuario de alta calidad para aumentar sus conversiones. Entremos en detalles sobre la estructura de los temas principales y por qué ofrecen una experiencia superior en general.
¿En qué se diferencian los temas principales de los temas HTML5 heredados de 3dcart?
El marco Core es un reemplazo completo de nuestro marco de tema HTML5 anterior. Esto no quiere decir que Core Templating Engine no use el lenguaje HTML: HTML5 era simplemente el nombre del estándar de tema anterior de 3dcart. Core es un motor de temas completamente reescrito y actualizado que trae toneladas de mejoras a las tiendas 3dcart y brinda una mejor experiencia de navegación a sus visitantes. Además, está construido teniendo en cuenta consideraciones técnicas que beneficiarán a los visitantes del sitio de varias maneras.
Fundación Bootstrap
Oreja es el marco más popular y versátil para aplicaciones receptivas, diseño de sitio web para dispositivos móviles primero. Bootstrap incluye bibliotecas CSS, HTML y JavaScript que facilitan la implementación de varias características que son ideales para tiendas en línea de alto rendimiento. Bootstrap también hace que sea mucho más fácil crear un diseño receptivo, que es el método preferido para crear un sitio web optimizado para dispositivos móviles de acuerdo con las directrices de SEO de Google. Los sitios web receptivos se adaptan a todos los tamaños de pantalla y mantienen una apariencia uniforme en todos los dispositivos.
Al utilizar Bootstrap como base para Core Templating Engine, 3dcart ha abierto muchas puertas para los diseñadores de sitios web que buscan crear y personalizar sitios web de comercio electrónico completamente funcionales que incluyen características populares de calidad de vida como menús desplegables mejorados y mucho más. Nuestra implementación de Bootstrap garantiza que todos los temas de 3dcart Core respondan de manera predeterminada al adoptar un enfoque móvil primero: a diferencia de los métodos anteriores de diseño web, la versión de escritorio es una extensión basada en la versión móvil y no al revés.
Esto es esencial hoy en día cuando estadísticas de comercio electrónico muestran que la mayoría de los compradores en línea prefieren navegar y comprar en el móvil. Sin embargo, esto no significa que los temas principales funcionen mal en el escritorio; en cambio, a sus clientes se les garantiza una experiencia fluida y consistente sin importar qué dispositivo usen.
Google AMP (páginas móviles aceleradas) para productos
Los temas de 3dcart Core incluyen AMP de Google funcionalidad para varios tipos de páginas en su sitio web. AMP es un estándar móvil potente y eficiente que permite la carga casi instantánea en dispositivos móviles, incluso si el cliente tiene una conexión de datos más lenta.
La misión de Google con AMP es mejorar la experiencia del usuario para las personas que navegan y compran en dispositivos móviles, por lo que las páginas web habilitadas para AMP se consideran más “útiles” según los estándares de SEO de Google. Esta es una de varias razones por las que el uso de un tema de 3dcart Core ayudará a que su sitio web se clasifique más alto en los resultados de búsqueda, ya que se priorizan las páginas web “más útiles”.
AJAX y optimización de código para velocidad
AJAX (JavaScript asíncrono y XML) es una técnica de desarrollo que utiliza JavaScript, HTML, XML y CSS para suavizar enormemente la experiencia del usuario de los sitios web al optimizar la forma en que la página web intercambia información con el servidor. Con AJAX, una página puede actualizarse sin necesidad de volver a cargar, por lo que los clientes no tendrán que esperar a que se actualicen las páginas. Teniendo en cuenta la cantidad de páginas que un cliente de una tienda en línea necesitará visitar con frecuencia, es útil y fácil de usar para reducir la cantidad de tiempo que pasan esperando que se recarguen las páginas. Es por eso que Core Templating Engine tiene AJAX incorporado para brindar esta valiosa funcionalidad a su sitio web de comercio electrónico, de modo que cuando los clientes agreguen un producto a su carrito o se registren en su lista de correo, la página que están viendo no necesitará volver a cargar.
La estructura del código también afecta la velocidad de la página, ya que los navegadores web cargarán todos los elementos de una página en el orden en que están escritos dentro del código, y si ese código está desordenado, el navegador web tendrá que filtrar espacios en blanco, formato innecesario , u otro desorden dentro de los archivos. El código no optimizado hará que los visitantes esperen que una página sea utilizable ya que sus navegadores cargan primero otras partes del sitio web. Los temas principales utilizan CSS y JavaScript minimizados, lo que significa que el código se comprime tanto como sea posible y se eliminan todas las redundancias y el desorden. Al optimizar la estructura del código en nuestras plantillas principales y diferir la carga de CSS y JavaScript, su sitio web de 3dcart mostrará primero el contenido importante para que sus visitantes puedan utilizar su sitio web de inmediato.
Otros avances en la velocidad del sitio
El Core Templating Engine tiene en cuenta otras consideraciones de velocidad además de AJAX y el código minificado. La cantidad de archivos que el navegador web de un visitante necesita cargar también afecta la velocidad de la página, por lo que Core toma el paso adicional de combinar ciertos archivos donde corresponda para minimizar aún más el tiempo que tarda su sitio web en cargarse. El almacenamiento en caché avanzado también le permite conservar la página de inicio y las categorías de su sitio web en la memoria del navegador hasta por 2 horas para reducir aún más la necesidad de cargar.
Priorizar el contenido para el espectador es otra forma de mejorar la experiencia del usuario. Hablamos de eso cuando describimos cómo Core Templating Engine carga primero los elementos más importantes, pero el marco también incluye otras funciones para este propósito. Las imágenes y el video se pueden cargar de forma asíncrona con el resto de la página para que no retrasen otro contenido y se carguen cuando se necesiten en lugar de todos a la vez. Por ejemplo, las imágenes cerca de la parte inferior de la página no se cargarán hasta que el cliente se desplace hacia abajo. Estas características mejoran enormemente los tiempos de carga, ya que las imágenes y los videos son los elementos que generalmente constituyen la mayoría de los datos que una página necesita para cargar y, por lo tanto, afectan drásticamente la velocidad a menos que se retrase de esta manera.
Para una ventaja adicional en velocidad, los temas principales pueden precargar la siguiente página que visita un cliente al comenzar a buscar la información cuando el visitante pasa el mouse sobre un enlace. Esto permite que la siguiente página comience a cargarse de forma preventiva en segundo plano, de modo que cuando el cliente hace clic, parece cargarse instantáneamente.
Puede activar o desactivar Caché de página, Carga diferida de imágenes y Carga previa de página en la sección Rendimiento que se encuentra en Configuración > General en su Administrador de tienda en línea de 3dcart. Entre Google AMP, AJAX, la estructura de codificación optimizada y otras características, los temas creados con Core Templating Engine se cargarán a velocidades ultrarrápidas, lo que hará que los compradores entren en acción sin demora.
Los beneficios de un sitio web más rápido
¿Por qué es tan importante que tu sitio web sea rápido? ¡Porque los clientes odian esperar! Solo toma unos segundos para que un nuevo visitante decida presionar el botón Atrás y busque un sitio web mejor y más rápido. De hecho, solo tiene unos 3 segundos para causar esa primera impresión que no tiene precio. La velocidad de carga de la página no solo es importante para la experiencia del usuario en un sitio web, sino que también afecta el SEO y puede ser el factor decisivo para que un cliente decida comprar en su sitio o ir a otro lado.
Esto hace que la velocidad de la página sea esencial para su tasa de conversión. Es crucial que su sitio web evite todo lo que podría causar fricción para un cliente, y las velocidades de carga lentas causan fricción de sobra. Si su sitio es lo suficientemente lento, los clientes pueden darse por vencidos y decidir comprar en otro lugar antes de siquiera leer sobre su negocio o ver sus productos. Incluso los visitantes repetidos se cansarán rápidamente de las páginas web lentas y pueden renunciar a las compras que de otro modo tenían la intención de hacer.
El aumento de la velocidad de la página es una parte esencial para mejorar la experiencia del usuario de su sitio web y, dado que los clientes prefieren comprar en sitios web que son agradables de usar, un sitio web más rápido también tendrá una tasa de conversión más alta. Además, Google tiene en cuenta la velocidad del sitio cuando clasifica las páginas en los resultados del motor de búsqueda y coloca los sitios web más rápidos más arriba porque es más probable que sean útiles para los buscadores.
Es por eso que Core Templating Engine de 3dcart pone tanto énfasis en la velocidad: lo ayuda en todo, desde el reconocimiento de su marca hasta su tasa de conversión y su SEO.
Más beneficios de experiencia de usuario de los temas principales
Gracias a su base Bootstrap, Core Templating Engine hace que sea más fácil que nunca agregar bonificaciones de experiencia de usuario bajo demanda a las tiendas en línea de 3dcart. Por ejemplo, los encabezados fijos son una ayuda de navegación altamente recomendada que mantiene el menú en la pantalla en todo momento, y se incluyen de inmediato en muchos temas principales. AJAX también se incluye en la categoría de experiencia del usuario, ya que permite a los clientes agregar artículos a su carrito o registrarse en su lista de correo sin necesidad de esperar a que la página se vuelva a cargar después.
Generación superior de ventanas a través de modales
En el caso de que el sitio web necesite generar una ventana emergente, como para obtener una vista previa rápida de un carrito, se abren como ventanas modales en lugar de las ventanas emergentes anticuadas, lo que las hace mucho menos molestas y mucho más optimizadas. Los modales son simplemente “tarjetas” que aparecen dentro de la ventana existente, a diferencia de las ventanas emergentes que obligan al navegador a abrir otra. Las ventanas emergentes son lentas, pueden causar problemas en dispositivos móviles y, a menudo, el navegador del usuario las bloquea, por lo que los modales son superiores en todos los aspectos.
Carruseles de la página de inicio para productos destacados, los más vendidos y más
Su página de inicio está configurada para atraer la mayor atención posible de los clientes atrayéndolos con productos destacados, nuevos lanzamientos, más vendidos y publicaciones de blog, todos los cuales aparecen en atractivos carruseles de desplazamiento para permitir la mayor cantidad de contenido posible en el frente. página sin necesidad de que el cliente se desplace por una gran cantidad de productos: las secciones de desplazamiento permiten a los clientes elegir investigar lo que más les interesa, más rápidamente, y los alientan a explorar su sitio web. Puede ocultar cualquiera de estas áreas en el Administrador de la tienda en línea de 3dcart si lo prefiere.
Opciones de vista de lista y cuadrícula de categorías
Las páginas de categorías normalmente se muestran como una cuadrícula, pero algunos clientes prefieren verlas como una lista, y los temas principales les brindan esa opción en forma de un botón simple que les permite cambiar de vista. En dispositivos móviles, el diseño ya coloca categorías en una vista de lista para optimizar el diseño receptivo, por lo que el botón está ausente para evitar el desorden innecesario en la experiencia móvil.
Lista de deseos avanzada y función Agregar al carrito
Para ayudar a los clientes a ahorrar tiempo de compra y alentarlos a generar interés en sus productos, pueden agregar artículos a su Lista de deseos directamente desde la página de inicio y las páginas de categorías en lugar de solo desde las páginas de productos, siempre que hayan iniciado sesión en su cuenta en tu tienda.
Además, la experiencia de compra se vuelve más intuitiva con los botones dinámicos Agregar al carrito que cambian a Elegir opciones según sea necesario, cuando un artículo tiene múltiples variantes que deben seleccionarse primero. Esto mantiene el mensaje claro para sus clientes para que nunca tengan dudas sobre lo que hará al hacer clic en ese botón. Esto los hace sentir bienvenidos y ayuda a que su marca parezca honesta.
Finalmente, incluso puede verificar a sus visitantes humanos sin obstaculizar su experiencia de navegación mediante el uso de un CAPTCHA invisible. Según Googlelos CAPTCHA invisibles utilizan “una combinación de aprendizaje automático y análisis de riesgo avanzado que se adapta a amenazas nuevas y emergentes” para distinguir a los visitantes humanos de los robots sin interrumpir sus compras.
Aumente las conversiones con una mejor vista del carrito y el pago
La capacidad del cliente para ver y evaluar su carrito de compras, y seguir adelante con un pago sin problemas, es crucial para su tasa de conversión. carros abandonados son un problema grave en el comercio electrónico y una de las mejores maneras de combatirlos es mejorar el carrito de compras y el proceso de pago de su sitio web tanto como sea posible. Ese era otro de nuestros objetivos con los temas principales.
Una de las características más convenientes (y divertidas) es el carrito flotante. Cuando un cliente agrega un artículo a su carrito, ya no necesita navegar a la página Ver carrito solo para verlo. En su lugar, aparecerá una pequeña pestaña al costado de la página, y el cliente puede hacer clic en ella para que su carrito se deslice hacia afuera, con una lista de los artículos actuales. Esta es una forma ingeniosa y conveniente para que un cliente obtenga un repaso rápido sobre los productos que se está preparando para comprar, especialmente durante largas sesiones de compras. Como propietario de la tienda, tiene la opción de habilitar o deshabilitar el carrito flotante y elegir ocultar su pestaña hasta que el cliente agregue un producto.
Los temas principales también brindan mayor comodidad y facilidad de uso a su página tradicional Ver carrito, a través de botones de cantidad más y menos. Esto significa que el cliente no tendrá que ingresar cantidades manualmente, lo cual es muy útil en dispositivos móviles, donde a menudo es molesto ingresar texto. También está presente un botón flotante Proceder al pago para que los clientes puedan finalizar su compra directamente desde la página Ver carrito.
El proceso de pago se maneja mediante un nuevo marco que elimina las distracciones, como la navegación y los pies de página del sitio, lo que ha demostrado ayudar a aumentar las conversiones. La dirección de envío está colapsada de forma predeterminada para ayudar a evitar abrumar al cliente con detalles. También puede elegir entre un pago de varios pasos o de una sola página, el último de los cuales es el preferido por muchos clientes debido a que elimina la necesidad de cargar varias páginas de pago.
La verificación de direcciones de Google también agiliza el proceso de pago en los temas principales al ayudar a evitar errores cuando los clientes ingresan su dirección de envío y facturación. Los clientes que regresan también pueden iniciar sesión en su cuenta existente a través de una ventana modal que no los redirige fuera del proceso de pago, lo que garantiza que no pierdan su lugar. También puede tener la opción de permitir que los clientes inicien sesión con Facebook o usen el pago como invitado.
No hemos dejado nada fuera, incluso los pequeños detalles. Por ejemplo, al colocar los nombres de los campos dentro de los cuadros de texto en lugar de etiquetarlos sobre el campo, hemos reducido la cantidad de desplazamiento que el cliente debe hacer. En general, el pago de 3dcart Core es más rápido, menos confuso y más atractivo para los clientes: todas las necesidades para aumentar las conversiones.
Obtenga más tráfico con SEO superior y fragmentos enriquecidos
Hemos discutido cómo la velocidad y la usabilidad del sitio mejoran la optimización de su motor de búsqueda, especialmente en dispositivos móviles, y cómo Core Templating Engine está diseñado para proporcionar automáticamente estas ventajas a su sitio, pero también hace un esfuerzo adicional en forma de fragmentos enriquecidos completos. . Los fragmentos enriquecidos son un método para dar formato a los resultados del motor de búsqueda para mostrar la mayor cantidad de información posible, por ejemplo, una imagen de producto, calificación de estrellas y otra información. Esto anima a los usuarios a hacer clic en el resultado de su motor de búsqueda en lugar de otro.
Si bien algunos temas de comercio electrónico incluyen fragmentos enriquecidos parciales, los temas de 3dcart Core los hacen disponibles, incluidos priceValidUntil, brand, addedRating y más. El resultado final es que el enlace de su sitio web dentro de los resultados del motor de búsqueda se ve más informativo, profesional y confiable que otros, lo que genera más clics.
Beneficios entre bastidores del motor de plantillas central
Core Templating Engine funciona para los diseñadores al permitirles un enfoque modular para el desarrollo de temas, destinado a permitir la máxima creatividad. En pocas palabras, esto se hace a través de bloques de código y variables, que trabajan juntos para habilitar diferentes secciones y elementos de diseño en un sitio web. Con el motor rediseñado, los bloques de código que antes estaban reservados para el marco del sitio ahora se pueden usar en otros lugares, lo que abre nuevas posibilidades de diseño y vías para la personalización.
El diseño modular significa una mayor personalización
El Core Templating Engine utiliza páginas de plantilla que contienen el código para diferentes partes de un sitio web de 3dcart. Por ejemplo, el código para la barra lateral izquierda se encuentra en el archivo leftbar.html, con otros componentes del diseño de página, cada uno manejado por archivos respectivos. El archivo de plantilla principal es frame.html, que maneja la interfaz de usuario general y la navegación para una tienda 3dcart. En la gran mayoría de los casos, frame.html es el único archivo que debe editarse al crear un tema principal.
El uso de bloques de código y variables permite que el motor Core Templating funcione como un conjunto de bloques de construcción para el desarrollo de temas, lo que permite que los temas se construyan de forma modular y amplía las posibilidades de diseño al alcance de la mano del desarrollador de temas. Está diseñado para ser lo menos restrictivo y personalizable posible, lo que permite a los diseñadores flexionar realmente sus capacidades.
Los colores, las fuentes y otras imágenes (además del diseño y las características incluidas) se controlan con CSS (hojas de estilo en cascada), el método más familiar para un diseñador web.
Personalización más sencilla con el editor de temas y el editor de páginas
El Editor de temas es una manera fácil de personalizar su tema principal sin editar el código. En lugar de necesitar conocimientos de desarrollo, puede elegir colores y ver cómo se actualiza su tema en tiempo real antes de guardar los cambios. Algunos temas principales ya vienen con varios ajustes preestablecidos, lo que le permite aplicar instantáneamente una apariencia completamente nueva a todas las partes de su sitio web, incluida la página de error 404 “No encontrado” que muchas plataformas de comercio electrónico descuidan.
El editor de páginas es una nueva integración que le permite editar, mover y dar formato al texto directamente en las páginas de contenido de su sitio web para que sea mucho más fácil crear los diseños que imagina. En lugar de tener que editar el texto en su tablero de 3dcart, puede trabajar directamente en la página y ver exactamente cómo se verá.
Cómo cambiar a un tema principal
Si es nuevo en 3dcart, automáticamente podrá elegir entre los temas principales justo cuando crea tu sitio web de comercio electrónico. Si es un comerciante existente de 3dcart que busca cambiar de un tema heredado, comience eligiendo un nuevo tema de nuestra tienda de temas de comercio electrónico. Consulte los temas que le gustan haciendo clic en ellos y seleccionando Vista previa del tema para ver cómo aparecerá el tema en un sitio web en vivo.
Una vez que haya elegido un tema, deberá agregarlo a su tienda en línea. Si el tema es gratuito, puede encontrarlo en su tablero de 3dcart, listo para instalar. De lo contrario, haga clic en Comprar este tema en el tema que desee. A partir de ahí, solo lleva unos segundos instalar y activar el nuevo tema Core en su tienda en línea.
Si desea personalizar su tema más profundamente de lo que el Editor de temas y el Editor de páginas pueden hacer posible, el completo Documentación del motor de plantillas principal explica todo lo que necesitas saber para hacer todas las personalizaciones que quieras.
Sin embargo, debe comprender HTML y CSS para comenzar, pero no se desespere si no está familiarizado con los lenguajes de codificación de sitios web. Expertos en Diseño Web están disponibles para ayudarlo a personalizar su tienda para que coincida con su marca y su visión de su sitio web.
¿Listo para una revolución en el diseño?
Core Templating Engine es la próxima generación en diseño web de comercio electrónico y reúne todas las ventajas posibles para usted y sus clientes. Si ya es comerciante de 3dcart, le animamos a que se cambie para poder aprovechar los beneficios de nuestros temas principales.
Si no está en 3dcart pero desea vender en línea, no hay mejor lugar para comenzar, y si ya tiene una tienda en línea existente, también podemos ayudarlo a migrar a 3dcart. Comience registrándose para un programa de 15 días Tienda en línea GRATIS prueba para ver Core Templating Engine en acción y saber si 3dcart es lo mejor para su negocio.
