Popular Articles

  1. Barra de categorías en la página de inicio

    En este tutorial vamos a agregar un componente en la página de inicio para mostrar las categorías. HTML Lo primero que vamos a hacer es crear las carpetas home y navigation dentro de la carpeta snipplets, si es que todav&iacut...
  2. ¿Cómo implementar Scroll infinito en el listado de productos?

    Las plantillas de Tienda Nube ofrecen scroll infinito por defecto. Para poder imitar este comportamiento, debes tener en cuenta las siguientes consideraciones: 1. El código para crear listado de productos tiene que estar encapsulado en...
  3. Theme Base

    Base es una plantilla pensada como punto de partida para el desarrollo de nuevos diseños en Tiendanube. Este lienzo en blanco Incluye todas las funcionalidades que un e-commerce debe tener: Slider en la página inicial Banners Vi...
  4. ¿Qué es Twig?

    Twig es un motor para generar templates basado en PHP, a través del cual creamos todos los templates o archivos reutilizables de un theme en Tiendanube.  Nuestros desarrolladores generan código backend haciendo posible que podamo...
  5. ¿Cómo cargo una hoja de estilo CSS?

    El archivo CSS debe ser guardado dentro de la carpeta Static y referenciado de la siguiente forma en el archivo layout.tpl : {{ 'css/style.css' | static_url | css_tag }} El CSS también puede ser un archivo .sass o .t...
  6. Popup de compra rápida

    En este tutorial vamos a ver cómo agregar un popup con el formulario de producto, el cual puede ser visto desde el ítem en el listado de productos. HTML 1. Lo primero que vamos a hacer, es agregar un nuevo snipplet llamado quic...
  7. Snipplets

    Los snipplets son la unidad mínima de HTML dentro de una plantilla y se encuentran dentro de la carpeta con su mismo nombre.  Representan componentes aislados que pueden ser incluidos en uno o varios lugares de la tienda como por ejempl...
  8. Objetos

    Los objetos son variables determinadas por la plataforma. Y cada objeto tiene diferentes atributos que son separados por un punto. Podemos llamar a estos objetos de dos maneras: {% ... %} y {{ ... }} . La primera se utiliza para ejecutar sentenc...
  9. Información de medios de pago y cuotas

    En este tutorial, vemos cómo agregar visibilidad sobre medios de pago y cuotas en tu diseño: El código en este tutorial incluye: Cuotas en el listado de productos, el detalle del producto y el carrito (solo aplica en tiendas ...
  10. Imagen por variante

    Esta funcionalidad permite relacionar una imagen dependiendo de la variante de producto. Ejemplo: tengo una remera con una variante en azul y rojo, y quiero mostrar las fotos de ambos modelos.  1. En layout.tpl registrar una funci&...