Popular Articles

  1. product.tpl

    En el template del detalle de producto vamos a encontrarnos con la estructura que contiene principalmente a 2 snipplets: product/product-image.tpl product/product-form.tpl Pero el archivo comienza con un contenedor con varias clases .js- que re...
  2. Midiendo el posicionamiento y accesibilidad de tu sitio

    Entender cómo está parado tu sitio en términos de SEO y Accesibilidad, es fundamental para saber dónde podés accionar para mejorarlo. En Tiendanube usamos dos herramientas de Google para medir la velocidad: PageSpeed y Lighthouse . Ambas he...
  3. Calculador de envíos

    En el siguiente tutorial, explicamos cómo agregar el calculador de envíos y los locales físicos en tu diseño: El código en este tutorial incluye: El calculador de envíos, tanto en el detalle del producto como en el carrito El filtro entre opcion...
  4. Puntos de anclaje para aplicaciones

    Las plantillas de Tiendanube tienen selectores de HTML pensados para que aplicaciones o agentes externos puedan anclarse al diseño de cada tienda sin tener que adaptar su código en base a cada plantilla. Estos componentes están representados por el...
  5. contact.tpl

    Como la mayoría de los templates, este archivo comienza con el snipplet page-header.tpl para mostrar los breadcrumbs y el título que en este caso es “Contacto” {% embed "snipplets/page-header.tpl" %} {% block page_header_text %}{{ "Contacto"...
  6. Filtros y orden de productos

    En este tutorial vamos a ver cómo agregar los filtros de categorías y propiedades, así como la posibilidad de ordenar los productos, para las páginas de categorías y resultados de búsqueda. Entre las propiedades a filtrar se encuentran: Var...
  7. Selectores ID

    Como su nombre lo indica, los IDs sirven para asociar elementos únicos dentro del HTML que pueden ser manipulados, por ejemplo, con JavaScript. De hecho, al ser un elemento único es más rápido para el navegador encontrarlo para manipularlo como qu...
  8. 404.tpl

    La página del error 404, funciona como resguardo cuando un usuario quiere ingresar a una URL que ya no existe más o esté equivocada. Consiste en el título, incluido con el snipplet page-header.tpl , un mensaje sobre la inexistencia de la página en...
  9. Imagen de la tienda al compartir su link

    En este tutorial vamos a ver cómo agregar la posibilidad de usar otra imagen diferente al logo de la tienda a la hora de compartir el link de su página de inicio o de una categoría.  Esta imagen, técnicamente conocida como OG image (Open Graph Imag...
  10. Blog

    En el siguiente tutorial, vamos a agregar y habilitar la funcionalidad de Blog. HTML 1.  Para empezar creamos el blog.tpl con el siguiente código, dentro de la carpeta de templates . {% embed "snipplets/page-header.tpl" with {...