Documentación Bootic

Todo la información para empezar a vender en línea.

Publicar un Banner

Algunas veces necesitas publicar una imagen (o banner) que no necesariamente está asociada a un producto.

El objetivo de esto podría ser:

  • información importante
  • stocks agotados
  • aviso «avance de temporada»
  • promoción de tu producto estrella
  • llamado a concurso
  • resultados de un concurso
  • aviso de periodo vacaciones
  • enlace a tu facebook, twitter o instagram
  • ... un largo etcétera

Requerimientos

A continuación te mostramos tres requerimientos de ejemplo:

  1. Se quiere un banner para destacar la nueva colección Otoño-Invierno, este debe estar en la portada de la tienda y muy destacado.
  2. Se quiere publicar los resultados del concurso "Yo compré en Zapatos en TocosTacos", se necesita una imagen que sea enlazada a una noticia.
  3. Se quiere mostrar una imagen con la flamante nueva cuenta Twitter recién abierta.

Importante: El formato de la imagen para el banner puede ser GIF, JPG ó PNG y el peso no superior a 1MB. Con una imagen que pese 250KB ¡es más que suficiente!.

Requerimiento 1: Banner Otoño-Invierno

Los pasos serían:

  1. Asegúrate que la imagen tiene las dimensiones apropiadas para que no rompa tu diseño, te puedes ayudar de alguna herramienta como por ejemplo Page Ruler (Complemento Google Chrome) para medir el lugar donde irá la imagen.
  2. Sube la imagen utilizando el Editor de Plantillas (Diseño → Editar Plantilla Actual) / Buscar archivos y lo subes (Figura 1).
    Subir archivo
    Figura 1: Subir archivo por medio del Editor de Plantillas
  3. Asumiremos que el archivo tiene nombre banner-otono-invierno.jpg.
  4. Luego editamos la plantilla home.html porque el requerimiento dice que debe estar en la portada de la tienda.
  5. Como es un elemento HTML del tipo imagen debería quedar así: <img alt="Colección Otoño-Invierno" src="{{ 'banner-otono-invierno.jpg' | asset_url }}" />
  6. Listo, la imagen debería estar publicada en la portada, anda a verificar. Recuerda actualizar tu navegador con Ctrl+F5 en Windows o Cmd+R en mac.

¿Y el enlace?

Los pasos anteriores mostrarán la imagen pero no está enlazada a la colección todavía, ahora finalizamos la tarea creando en link.

<a href="/collections/otono-invierno">
    <img alt="Colección Otoño-Invierno" src="{{ 'banner-twitter.png' | asset_url }}" />
</a> 

Listo, tarea terminada.

Agregando banner a la portada de la tienda - clic para zoom

Requerimiento 2: Banner resultado concurso

Los pasos 1, 2 y 4 del requerimiento anterior se repiten.

Asumiendo que la imagen tiene como nombre resultado-concurso.jpg quedaría así en la plantilla:

<img alt="Resultado concurso" src="{{ 'resultado-concurso.jpg' | asset_url }}" />

Y por supuesto el enlace donde nos llevará la imagen (una noticia dentro de nuestra tienda):

<a href="/blog/2014/3/12/resultado-concurso">
    <img alt="Resultado concurso" src="{{ 'resultado-concurso.jpg' | asset_url }}" />
</a> 

Eso es todo.

Requerimiento 3: Banner nueva cuenta Twitter

Nuevamente los pasos 1,2 y 4 del requerimiento 1 se repiten.

Asumiendo que la imagen tiene como nombre icono-twitter.jpg quedaría así en la plantilla:

<img alt="Twitter" src="{{ 'icono-twitter.jpg' | asset_url }}" />

Y lo más importante, ahora ponemos el enlace a nuestra cuenta twitter:

<a href="http://www.twitter.com/tacostacostienda">
    <img alt="Twitter" src="{{ 'icono-twitter.jpg' | asset_url }}" />
</a> 

Listo.

Crea tu tienda hoy mismo. Sin compromisos. Ver planes