Elabora tu propia plantilla de Mercado Libre

Si estas pensando en tener tu espacio de ventas dentro del portal de Mercado Libre o ya lo tienes y necesitas una plantilla  única, original y quieres hacerla tu mismo, en ese caso te contaré de que manera lo hago yo, quizás te animes y la hagas tu mismo.

portadaML

Hoy me tocaba actualizar la plantilla del eshop en Mercado Libre de la empresa donde trabajo y decidí contarles cómo lo hago para que ustedes mismo lo puedan realizar de una manera sencilla. Claro siempre es bueno y conveniente acudir al profesional de diseño gráfico, que puede darte sugerencias de los mejores colores, fuentes y diseño en general.

Pero si estás comenzando con tu tienda en Mercado Libre y tienes facilidad para diseñar y conocimientos básicos de HTML, te aseguro que con esta explicación lo lograrás, sólo tienes que  considerar que los diseños deben ser atractivos y expresar tu personalidad como vendedor, la información debe ser clara con imágenes de buena calidad para que tus compradores conozcan tus productos y sus beneficios.

Lo primero que te daré a conocer es el uso de las plantillas que Mercado Libre te brinda gratis en HTML (Lenguaje de Marcado de Hipertexto) para que puedas mejorar la calidad y contenido de tus publicaciones, y así aumentar tus ventas. Esta es una manera rápida y está a tu disposición.

En la sección “Describe tu producto” encontrarás un editor de HTML y plantillas pre-diseñadas. Sólo deberás cargar tus fotografías, incluir la descripción del producto y agregar enlaces a tus botones personalizados.

No quiero profundizar en este punto, te cuento que en el portal de Mercado Libre está una muy buena explicación para que uses sus plantilla en este enlace Uso de HTML en mis publicaciones.  Y si no sabes mucho de código y quieres ampliar tu conocimiento sobre HTML, en el mismo portal está un instructivo que te puede ayudar aquí instructivo de uso.

Como verás dentro de Mercado Libre existen plantillas que fácilmente puedes emplear pero seguro quieres darle tu toque personal a las mismas y te diré cómo lo hago yo. Seguro hay otras maneras, seguro otras vías, yo sólo te diré lo que a mi me funciona y además en poco tiempo tengo una plantilla lista para usar sin ninguna complicación.

¿Que necesitas para hacer una plantilla?

Yo uso Adobe Photoshop, así que, tendrás que tener algo de conocimiento básico de este software y además algo de conocimiento de  HTML y lo más importante, ganas y entusiasmo de hacer algo de tu propia inspiración.

Seguro terminarás dándote cuenta que eres muy talentoso y lograrás hasta obtener ingresos vendiendo plantillas en el mismo Mercado Libre o con tus amistades, nunca están demás unos ingresos extras. Inspírate y busca siempre dar lo mejor, pero sobre todo diviértete.

Lo primero que tienes que hacer es crear un documento con un ancho entre 800 y 900 píxeles. Yo uso 900 px. para aprovechar al máximo el espacio. El largo, lo que tu quieras. Para empezar puedes crear un documento de 900px. 1600px.

Previo a ésto te sugiero darte una vuelta por los eshops de otros vendedores, no es que te vas a copiar diseños, sólo quiero que veas la información que se suele colocar en las plantillas. Por ejemplo: las condiciones de ventas, la forma de pago, información general de tus productos y/o servicios.

También es muy importante que leas detenidamente las políticas de Mercado Libre sobre la información que puedes o no compartir, así como los productos que no debes vender para evitarte denuncias y suspensiones, para eso es necesario también revisar  lo establecido en la Ley Orgánica de Costos y Precios Justos al momento de publicar tu producto o servicio, ésto para el caso de Venezuela específicamente.

Luego que tengas los puntos que deseas agregar a tu plantilla, te será más fácil organizarla y buscar las imágenes que apoyen tu diseño y empezar a armar tu plantilla. Yo hago un bosquejo en una hoja y a mano de lo que deseo, me parece mas fácil y rápido de esta manera.

Volvamos a Photoshop, tienes tu documento abierto y empiezas a armar la estructura que deseas. Lo mas importante es que dejes un área en blanco con suficiente tamaño para que luego que montes la plantilla, ese espacio sea, el que vayas a destinar para poner fotos y descripción de tus productos, luego en el código HTML verás como destinar esa área como editable. Es muy fácil no te preocupes.

Mira este ejemplo, recuerda el ancho debe estar entre 800 px. y 900 px. y el largo lo que consideres necesario:

modeloplantilla

La estructura no tiene que ser igual a ésta, pero fíjate que deje un espacio en blanco destinada a ser el área editable. Como ya te comente antes puedes colocar tu logo, condiciones de ventas, instrumentos de pago, medios de transporte y entrega, etc.

Seguidamente, luego que ya tengas todo tu diseño y estés conforme, vas a usar la herramienta para crear sectores en tu diseño, con ésto lograrás dividir en partes esta plantilla y en el código HTML se armara por partes, una tabla con celdas.

En el ejemplo como notarás la dividí en 4 sectores y el área editable es el sector 3 la cual siempre la dejarás en blanco, yo coloque un bosquejo de una producto y muestra de texto sólo para que veas que tanto espacio debes dejar para éste fin.sectores3

Ya definido el diseño y dividido en sectores vas a “Guardar para web” y en las opciones indicarás que guarde HTML e imágenes, de esta forma te creará un documento HTML y una carpeta con las imágenes que pertenecen a cada sector.

guardar-webhtmleimagenes

Abre el documento HTML en un editor de texto para que veas el código creado por el mismo Adobe Photoshop. Se creó una estructura de tabla con celdas y encontraras que hay cuatro lineas de código destinado a los sectores/imágenes de tu diseño, así que, ubica el numero 3 que ya habíamos dicho va a ser tu área editable y va a ser algo como esto:

codigohtml

Ese “<td>………03.jpg</td>” es tu área editable, pero para eso debes transformar el contenido. Verás que la imagen tiene un alto y un ancho definido, esas medidas las vas a pasar como una característica de la celda,en vez de tener este código en esa linea:

“<td><img src=”imagenes/modeloplantilla_03.jpg” width=”617″ height=”674″ alt=””></td>”

Deberás  modificarlo de esta manera:

“<td width=”617″ height=”674″ alt=””></td>”

Como veras eliminaste la imagen, pero como la celda debe mantener el tamaño original, pasaras la información de alto y ancho dentro de <td…………..>

De esta forma:codigohtmlmod

Ahora ya tienes tu plantilla. Abre tu “archivo.html” en un explorador y veras el resultado de tu plantilla.

Algo muy importante, las imágenes las debes hostear, puedes hacer uso de un servidor privado, donde está hospedada la página web de tu empresa por ejemplo, pero si no tienes contratado un hospedaje web puedes recurrir a sitios gratuitos como www.imageshack.us o www.photobucket.com donde únicamente solicitan que te registres para hacer uso de sus servidores.

Luego que subas a la red tus imágenes, debes obtener de ella la dirección con la cual vas a sustituir la ubicación, que como verás cuando hiciste la plantilla en primer lugar era local, y la cambiaras dentro de “<img src=”http//:www.xxxxxx…../ modeloplantilla.jpg”>” en las cuatro lineas pertenecientes a las imágenes. Esta sustitución ya la puedes hacer dentro del mismo editor HTML de Mercado Libre.

Ya de aquí en adelante puedes seguir la instrucciones que ofrece Mercado Libre para usar tu propia plantilla, que es un procedimiento sumamente fácil. Cuando la tengas lista y cargada en Mercado Libre, recuerda guardarla como una plantilla para que cada vez que necesites publicar un producto te sea fácil aplicarla.

Espero haberte podido ayudar, cualquier duda por favor escríbeme y con gusto te responderé.

Suerte y que te diviertas.

32 thoughts on “Elabora tu propia plantilla de Mercado Libre

  • April 7, 2016 at 1:35 am
    Permalink

    Es interesante y como siempre muy bien explicado.
    Muchas gracias por la información

    Reply
    • April 7, 2016 at 4:19 pm
      Permalink

      Gracias Ricardo por leer y comentar. Cualquier inquietud no dudes en preguntar. Un abrazo

      Reply
  • July 9, 2016 at 9:34 pm
    Permalink

    Interesante, estoy tratando de publicar un articulo en ML pero no tengo eShop. Lo que sucede es que tengo mi imagen .jpg creada en 900x1800px la subo a photobucket tomo el link y lo agrego en mi publicación personal con la herramienta de edición de imagen HTML y cuando le doy a aceptar esta imagen se redimenciona no ocupando todo el ancho de la publicación… En teléfonos celulares se ve bien, pero si abres la publicación desde la pc se ve muy angosta. Sabes como arreglar eso ?

    Reply
    • July 15, 2016 at 7:21 pm
      Permalink

      Hola Asdrúbal disculpa la tardanza. Estuve viendo tu publicación y el enlace original de la foto, pero la que subiste a Photobucket dice que tiene 512x1024px y reviso el código en Mercado Libre y la imagen dice justo eso. Fíjate si por error subiste una más pequeña o copiaste el enlace de otra y no la de 900x1800px, a eso se debe que lo veas más pequeño. De todas formas descargué la imagen original y ese es el tamaño. Vuelve a subir tu imagen y cambia el enlace en Mercado Libre. Me cuentas como te fué.
      ¡Gracias por leer mi post!

      Reply
      • May 30, 2017 at 5:06 pm
        Permalink

        hOLA ! TENGO EL MISMO PROBLEMA, CUANDO LO LLEVO A MERCADO LIBRE, SE REDIMENCIONA, UTILICE IMAGESHACK. ME PARECE QUE CUANDO LAS SUBO A ESTA PAGINA SE ACHICAN, PERO NO LOGRO ENTENDER PORQUE, SI PODES AYUDARME, TE LO SUPER AGRADECERIA! MUY BUENO EL POST, CON ESTE HICE TODO EL RESTO. GRACIAS!

        Reply
  • October 6, 2016 at 1:00 pm
    Permalink

    Hola Wendy! estoy super atorada y desesperada. Ya hice mi diseño en photoshop, pero como previamente lo diseñe en illustrator, pase los elementos, pegue objetos y el texto lo escribí. Al salvarlo como .html no sale nada en el bloc de notas, que pasa? ojalá me pudieras ayudar. Gracias.

    Reply
    • October 6, 2016 at 1:36 pm
      Permalink

      Hola Paola, que gusto saludarte. Presumo que debe ser alguna opción al guardalo como html que no estarás marcando, recuerda que al “guardar como” debes en formato seleccionar HTML e imágenes, que luego más adelante esa ubicación de imágenes vas a sustituir por la dirección web donde las almacenes (servidor externo como menciono en el blog). Es raro que no veas nada en el archivo. Si quieres y luego de probar lo que te digo antes y si no lo logras resolver, me puedes enviar el archivo original en PSD y lo reviso. Quedo pendiente de ti, un beso.

      Reply
      • October 11, 2016 at 4:02 pm
        Permalink

        Wendy! gracias por responderme. Ya pude sacar el código metiéndolo a Firefox y yendo a configuración, pero cuando lo pego en mi editor de texto, no me lo guarda como .html y por lo tanto no puedo subirlo a ML. ¿Crees que pudieramos hacer un skype como tutorial? te pago con gusto. Saludos 😉

        Reply
  • October 6, 2016 at 4:02 pm
    Permalink

    Hola! Quería saber si el html que yo diseñé lo tengo que armar responsive para que se adapte a todas la pantallas o es un html común.

    Gracias!

    Reply
    • October 6, 2016 at 10:48 pm
      Permalink

      Hola María Cecilia, no es necesario hacerlo responsive porque vas a subirlo al portal de Mercado Libre y ellos se encargan de ese detalle. Solo hazlo con la medida de ancho que sugiero en el post y el largo que consideres necesario. Me comentas eñ resultado¡Éxito!

      Reply
    • October 21, 2016 at 6:34 pm
      Permalink

      Excelente Paola, estaba segura que lo lograrías ¡Te felicito! Un abrazo

      Reply
  • October 19, 2016 at 3:33 pm
    Permalink

    Wendy sos una grosa, me sirvió muchisimo tu explicacion!

    Reply
    • October 21, 2016 at 6:35 pm
      Permalink

      Franco me alegra mucho que te haya servido y lo hayas podido aplicar con éxito ¡Un Abrazo!

      Reply
  • November 5, 2016 at 4:31 am
    Permalink

    Hola, la verdad no entiendo la parte que dice “vas a usar la herramienta para crear sectores en tu diseño” ¿cual es esa herramienta? yo soy mas de corel, photoshop poco, agradezco si me explicas ese punto ya que no he podido pasar de ahí, Gracias.

    Reply
    • November 6, 2016 at 6:00 pm
      Permalink

      Hola Alejandro que gusto tenerte por acá. Estoy segura que revisando este enlace vas a poder superar este obstáculo https://helpx.adobe.com/es/photoshop/using/slicing-web-pages.html
      Allí hay una explicación perfecta sobre el uso de sectores. Cualquier cosa me vuelves a escribir, pero me gustaría revisaras allí primero, mejor que Adobe no podría explicártelo yo.

      Reply
  • November 25, 2016 at 5:57 pm
    Permalink

    Muy bueno!
    Voy a probar y despues te cuento!!
    Gracias por la info!

    Reply
    • December 1, 2016 at 8:24 pm
      Permalink

      Gracias a ti por comentar Bárbara, cuéntame por favor cómo te fue. Un abrazo

      Reply
  • February 1, 2017 at 8:55 pm
    Permalink

    hola wendy, subo una imagen a ML en html y en la pc se ve barbara pero en la app del celu me dice que la app no carga las html, si la quiero reemplazar por una descripcion plana… Si me podrias ayudar te lo voy a agradecer infinitamente. Saludos!!

    Reply
    • February 2, 2017 at 3:49 pm
      Permalink

      Hola Marcelo un gusto saludarte. Te pregunto para aclarar, almacenaste las imágenes en un servidor privado por ejemplo donde está hospedada la página web de tu empresa o en un servidor gratuito como http://www.imageshack.us o http://www.photobucket.com y en html sustituiste la dirección de imagen con la que te proporciona el servidor? Tengo la impresión que sea ese el inconveniente. Verifica y me comentas. Un abrazo,

      Reply
  • February 17, 2017 at 2:01 pm
    Permalink

    Hola, como estas, en el caso de que por ejemplo en la plantilla de formas de pago, o entrega, tenga que modificarla, deberia ser el mismo url ya que todas las publicaciones contiene la misma imagen. Como se procede?

    Reply
  • February 27, 2017 at 5:42 pm
    Permalink

    Excelente explicación. Logré realizar lo que necesitaba felizmente! Muchas gracias!

    Reply
  • March 2, 2017 at 8:43 pm
    Permalink

    Hola Wendy me pasa lo mismo que marcelo, yo en particular use un servidor privado donde tengo la futura pagina web… Como crees solucionarlo? Gracias desde ya.

    Reply
  • March 17, 2017 at 10:58 pm
    Permalink

    Hola, Wendy! Mil gracias por el tutorial, ya pude crear las imágenes sectorizadas en photoshop. Hasta ahora tuve la misma dificultad que Marcelo, cargaba una imagen desde el editor HTML y se veía bien en la compu pero no se cargaba en el celular (se veía la descripción de la imagen y el cuadrado de la imagen pero en blanco). La imagen estaba cargada en wix, ahora estoy usando diferentes repositorios a ver si ese es el problema (photobucket y tinypics). ¿Puede ser que ahora haya limitaciones para usar plantillas en los celulares?

    Reply
  • March 23, 2017 at 1:42 am
    Permalink

    hola amiga muchas gracias por tu ayuda, hace tiempo que intentaba subir una plantilla y no podia gracias a tu post entendi donde estaba mi falla, ya lo logre mil gracias

    Reply
  • April 6, 2017 at 11:49 pm
    Permalink

    hola wendy un saludo consulta en photobucket en que formato se guardan las imágenes? y entiendo después de guardadas me aparecen 3 enlaces para cada imagen cual es el que debo de tomar, saludos desde méxico

    Reply
  • June 2, 2017 at 12:17 am
    Permalink

    Para los que tuvieron problemas en la visualización de imagenes desde el teléfono mobil, le falto una barra invertida a la línea de código que se modifica para el área editable…

    “”

    así no deberían tener problemas. Saludos

    Reply
    • July 6, 2017 at 1:55 pm
      Permalink

      Gracias Lion, espero que eso ayude a los que han tenido problemas con las imágenes. Muchas gracias por el comentario.

      Reply
  • July 4, 2017 at 9:00 pm
    Permalink

    Hola Wendy he descubierto tu blog y eres muy linda en responder todo lo que te preguntan felicitaciones.
    Yo tengo algunas dudas, primero porque no se puede hacer el diseño en ilustrator? Yo lo hice así y no se guarda como html e imágenes. Solo me da opción de guardarlo como imágenes.
    Y a mi también me pasa que cuando subo las imágenes a un host, se ven estrechas y no al tamaño en que la hice.

    Reply
    • July 6, 2017 at 2:04 pm
      Permalink

      Hola Berenice es todo un gusto poder ayudarles. Bueno tu misma te has respondido el porque hacerlo en Photoshop y no en Illustrator. En Photoshop tienes la opción de guardarlo como HTML y por sectores y de paso te genera el código. Yo la verdad en cuanto a resolución de imágenes sobre todo si tienen texto me gusta trabajar en Illustrator que luego utilizo en Photoshop. Es solo cuestión de que te acostumbres a la disposición de herramientas y utilidades y le saques el mayor provecho a ambas aplicaciones. Con respecto a la redimensión de la imágenes fijate la respuesta de “PCLION” mas abajo a ver si te resulta. Varios me han comentado de este inconveniente, pero a mi no me sucede y ninguno me ha pasado un enlace para ver de que manera se les re dimensiona y hacerme la idea del problema. Cuando lo tengas listo, pásame el encale y reviso, para comentarte.
      Un beso enorme.

      Reply
  • December 6, 2017 at 5:44 pm
    Permalink

    Hola! que pasa si quiero hacer mis plantillas en photoshop sin hacerlas editables?

    Guardo un PSD de la plantilla y subo y edito mis productos manualmente?

    Ahi es mas trabajo para mi, pero no tengo que alojar mis imágenes en ningún servidor.

    Es posible? Gracias.

    Reply
    • December 8, 2017 at 3:29 pm
      Permalink

      ¡Hola Ivana! Gracias por comentar, si te funciona buenísimo, nos comentas.
      ¡Un Abrazo!

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *