OmbuShop Crea Tu Tienda Online

Cómo agregar un slider o carrusel en tu tienda

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Ya hemos mencionado la importancia de crear una imagen de marca, generar contenido y mostrarle a tus clientes tu producto de diferentes maneras. En este artículo te contaremos cómo agregar un carrusel o slider a tu tienda, con imágenes de la temporada o de promociones. Es super simple y puede agregar dinamismo al diseño.
Por ejemplo, el Slider de Pitocatalán ayuda a ver de forma rápida el estilo de sus productos.

 

Prepara las imágenes para tu slider

Te recomendamos usar una medida standard de 960px de ancho por 400px o más de alto. A continuación, tendrás que subir las imágenes en la sección de Archivos Extras en Diseño > Personalizar que se encuentra al final de la página. Por cada imagen que subas, el sistema creará una URL de la imagen. Recuerda copiar estas URLs, ya que luego habrá que usarlas en el armado del slider.

files

url

 

Agregar el plugin de BxSlider

Para crear el carrusel, usaremos BxSlider. Ahora debes agregar el plugin a tu tienda. En Diseño> Personalizar, editarás el archivo theme.liquid.

theme

 

Este es el código que debes agregar, con el cual le darás estilo y funcionamiento a tu slider:

See the Pen BXslider by ignacio (@ignacio_bertotti) on CodePen.0


 
screen-shot-2016-12-02-at-1-35-31-pm
 
Luego, tienes que hacer clic en ‘Guardar y volver’

Creando el carrusel

Sólo resta crear el slider en una página de tu tienda. Si quieres agregarlo a alguna página ya creada, debes ir a la configuración de la página.
Si quieres crear una página nueva, debes ir a ‘Páginas’ y hacer clic en ‘Página nueva’. Allí debes agregar el título de la página y, dentro del editor de texto del contenido, hacer clic en ‘HTML’.
html

 

En esta pantalla, hay que ingresar el siguiente código. Y por cada elemento de la lista, agregarás la url de la imagen:

See the Pen xRpezP by ignacio (@ignacio_bertotti) on CodePen.dark

Para que funcione correctamente, la url y el nombre de la imagen siempre deben ir entre “”. Debe quedar así:

slider

Por cada imagen que se quiera agregar al slider, debe existir una línea de código de este tipom, tal como se ve en la imagen:

See the Pen yVprxJ by ignacio (@ignacio_bertotti) on CodePen.dark

Luego de armar el código, haz clic en ‘Update’ y en ‘Crear Página’. Una vez creada, ingresa en tu tienda desde el botón “Ver tienda”. ¡Ya deberías poder ver el carrusel en la página que elegiste!

 

Cómo agregar un Favicon a tu tienda online

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

En todas las tiendas de OmbuShop es posible editar el diseño desde el panel de administración. En este caso explicaremos cómo agregar un favicon, o ícono de favoritos, para otorgarle más personalidad a tu tienda.

Crear favicon

Si no cuentas con el ícono de antemano, puedes crearlo a partir de alguna imagen que tengas. Para esto existen diversos servicios, uno de ellos es Favicon-Generator.
Si utilizas este servicio, luego de elegir la imagen desde tu computadora, deberás elegir la opción “ Apps” y hacer click en “Create Favicon”. Luego podrás descargar el archivo con el ícono en distintos tamaños y formatos.

Agregar favicon a la tienda

Una vez que cuentes con el ícono en tu computadora, debes ingresar en la tienda, dirigirte a la sección “Diseño” e ir a “Personalizar“. Al final de la página, en la sección “Archivos extra”,  podrás subir el ícono desde tu computadora:

Si creaste el ícono con Favicon-Generator, debes elegir el archivo con nombre “favicon-16×16” con extensión “.png”. Cuando subas el archivo, podrás ver que a la derecha del mismo el sistema habrá creado una URL. Esta dirección remite al archivo que fué cargado en el servidor de OmbuShop. Es importante copiar esta dirección, ya que la utilizarás en el próximo paso.

screen-shot-2016-11-25-at-11-00-11-am

 

Por último, deberás ingresar en el archivo theme.liquid

y agregar la siguiente línea de código en la parte superior del archivo, a continuación de “<head>”, con la salvedad de que donde dice “/favicon-16×16.png” debe ir la dirección del ícono, que copiaste en el paso anterior.

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Recordá agregar la dirección entre comillas (“”). Debería quedar así:

screen-shot-2016-11-25-at-11-13-30-am

Por último hay que hacer click en “Guardar y volver” y ¡Listo! Si ingresas en tu tienda, ya deberías poder ver el Favicon en la pestaña del navegador.

Cómo agregar imágenes a las páginas de tu tienda

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

En muchos casos es importante contar con banners o imágenes en las páginas de inicio o institucionales para mostrar un estilo o identidad de marca. En este post te mostraremos cómo agregarlas en pocos pasos.

 

Subir las imagenes a la tienda

El primer paso es subir las imágenes a la tienda, para guardarlas en nuestro servidor y que luego sea posible mostrarlas en la página que más te guste. Para esto, tienes que ingresar en tu Panel de Administración y dirigirte a la sección “Diseño” -> “Personalizar”. Al final de la página, encontrarás una sección llamada “Archivos Extra” donde podrás seleccionar las imágen desde tu computadora y subirlas a la tienda.

screen-shot-2016-10-28-at-11-24-15-am

Una vez que hayas subido las imágenes a la tienda, verás, para cada una, el nombre del archivo a la izquierda y la dirección o link a la derecha. Copia la dirección de la imagen deseada para luego poder agregarla en la página.

Insertar las imagenes en la página deseada

Para agregar una de las imágenes a la página, ingresaa en el menú “Páginas” y clickea en “Editar” sobre la página a la que quieres agregar la imagen. Esto abrirá el menú de edición de página. Hay que dirigirse al recuadro de contenido y hacer click en el botón “HTML” que aparece en el editor de texto.

screen-shot-2016-10-28-at-2-48-43-pm

Dentro del recuadro que aparece hay que pegar el siguiente código, teniendo en cuenta agregar, entre comillas, el link de la imagen que habíamos copiado antes:

See the Pen link imagen by ignacio (@ignacio_bertotti) on CodePen.dark

Por último hacemos click en “Update” y guardamos los cambios con “Guardar y volver”.
Si quieres agregar más imágenes, puedes repetir los mismos pasos.

¡Listo! ya deberías poder ver la imagen en la página de la tienda 😀

Cómo agregar un formulario de log-in para tus clientes mayoristas

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Ya tienes dados de alta tus clientes mayoristas en tu tienda, es momento de agregar un formulario de log-in para que inicien sesión desde tu tienda.

Dentro del panel de administración de tu tienda, ingresaremos en a la pestaña “Diseño”, y luego a “Personalizar”. Allí estarán los archivos de HTML y CSS de la tienda. En este caso, debemos agregar el formulario dentro del archivo “theme.liquid”, por lo que haremos click en “editar” sobre este archivo.
Podemos agregar el formulario en cualquier sector dentro del archivo, pero recomendamos que sea justo antes de la línea que contiene ul id="navigation_bar" para que quede por encima de los botones de navegación de la página.

Una vez que hayas elegido el sitio donde colocarlo, puedes copiar y pegar este código allí:

 See the Pen EHmfD by Mauro Otonelli on CodePen. 0

Es importante tener en cuenta que si se modifica la plantilla de diseño, los cambios que se hayan hecho a los archivos se perderáb, por lo que es recomendable elegir la plantilla de diseño antes de hacer estas modificaciones.

Recuerda que puedes modificar el estilo del formulario, en consonancia con el diseño de la tienda, desde las hojas de estilo CSS.

Una vez agregado el código al archivo “theme.liquid”, solo queda guardar y podrás ver el formulario en la tienda!

Anuncios de difusión local de Facebook: contactá a los clientes que tenés cerca

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Desde finales del año pasado Facebook implementó un nuevo tipo de publicidad llamado Difusión Local, con él, podés llegar a personas que se encuentren cerca de tu negocio.

facebook-local3-fade-ss-1920

La red social brinda un nuevo tipo de anuncio publicitario llamado “difusión local”, enfocado a los negocios locales “físicos” que buscan captar el tráfico de un público que se encuentra a determinada distancia. Este nuevo tipo de formato publicitario solo alcanza a las personas que estén conectadas a Facebook desde un celular. Si en un anuncio convencional de Facebook podemos elegir un país, una ciudad o un municipio, en el tipo de anuncio de cercanía elegimos personas que están cerca de nuestro negocio. Facebook utiliza la ubicación de nuestra fanpage y, desde allí, podemos elegir el público que está a determinados kilómetros de nuestro negocio, empezando desde 1 kilómetro.

Es una herramienta muy efectiva para generar tráfico hacia negocios captando la atención de un público que se encuentra en ese momento cercano a nuestra ubicación. Este nuevo formato, no ofrece, como otros clásicos de Facebook, amplias posibilidades de segmentación, ya que solo nos permite ingresar criterios relacionados a la edad y género.

En cuanto a sus métricas, permiten visualizar la cantidad de personas alcanzadas y las impresiones que tienen los anuncios, es decir, la cantidad de veces que se muestran.

El formato del anuncio es igual al que utilizamos para generar campañas de generación de tráfico hacia un sitio web, es decir, imágenes de 1200 x 628 píxeles, con menos de 20% de texto dentro la imagen. Además, permite añadir un botón con un call to action (llamado a la acción) que cuenta con diferentes opciones predeterminadas: Me Gusta esta página (con el objetivo de generar fans), Llamar (solo habilitado para anuncios que se muestren en la sección de noticias del celular), Como llegar (permitiendo acceder a un mapa que te indica como llegar al lugar), Más información (te redirige a la fanpage), Enviar Mensaje (para poder enviar un mensaje por inbox)

En este objetivo de publicidad no entra en juego la interacción ni los clicks, sino que se trata de conseguir el mayor alcance posible, es decir, que nuestros anuncios sean vistos por la mayor cantidad de personas. Independientemente de las métricas que ofrece la plataforma, para calificar como exitosa o no la campaña, deberemos estar atentos y medir el tráfico en el local y la conversión en ventas. Si en la creatividad de los anuncios difundiéramos alguna promoción o beneficio, será de mucha utilidad para medir con facilidad cuántas personas vinieron y cuántas realizaron compras.

Es una excelente herramienta para generar amplia visibilidad a costos muy económicos ya que al no estar tan explotada en el país logramos impresiones (veces que se mostró el anuncio) a un valor de un centavo de peso. ¡Una auténtica oportunidad que no podemos dejar pasar!