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

Si prefieres que el slider corra las fotos de forma automática, puedes utilizar este código en lugar del anterior:

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

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.

Los productos de tu Tienda en MercadoLibre

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

Queremos presentar una de las últimas funcionalidades que hemos agregado a OmbuShop. Se trata de la integración de tus productos de tu tienda en MercadoLibre. Esto significa que de ahora en adelante, con nada más que un click, podrás publicar en MercadoLibre el producto que actualmente tienes creado en tu tienda.

Una de las mayores ventajas de publicar tu producto en MercadoLibre es el alcance que éste puede llegar a tener. Hoy en día MercadoLibre es el sitio de e-commerce más importante en Latinoamérica, lo que significa que miles de personas verán tu producto una vez publicado, y como consecuencia aumentarás considerablemente tus ventas.

Sin más palabras, veamos cómo funciona:

Como primer paso, deberás iniciar sesión en tu tienda online y luego dirigirte al listado de tus productos. Una vez allí elige editar alguno de tus productos que ya tienes creados.

mercadolibre_1

Importante: Para que el botón de MercadoLibre se encuentre visible, el producto deberá cumplir con ciertos requisitos obligatorios:

  • Stock disponible
  • Imágenes
  • Descripción
  • Precio

Además de ello, la tienda deberá pertenecer exclusivamente a algún país de America Latina.

mercadolibre_2

La primera vez que hagas click en el botón, se abrirá una ventana para que inicies sesión y autorices a que se comparta la información de tu tienda con MercadoLibre

mercadolibre_3

Una vez aprobada la autorización (recuerda que sólo se solicita una única vez) se creará automáticamente tu publicación en MercadoLibre. Podrás ver el link a ésta en el mensaje de confirmación que aparecerá en la parte superior.

mercadolibre_6

Si sigues el link del mensaje de confirmación o si entras a Mercadolibre por tu cuenta, verás que efectivamente la publicación fue creada con éxito.

mercadolibre_4

mercadolibre_5

Es probable que en algunos casos, luego de publicar en MercadoLibre, debas realizar alguna modificación manualmente en la publicación debido a que hubo algún tipo de incompatibilidad con el producto. Por ejemplo, en algunas ocasiones la categoría que se le asigna automáticamente al producto no es realmente la más precisa; y si MercadoLibre detecta esto, generalmente le manda un email al usuario para que haga la corrección necesaria.

Si bien dentro de MercadoLibre existen diferentes tipos de publicaciones y cada una tiene un cargo distinto, todas las publicaciones que se hagan a través de OmbuShop serán gratuitas.

¡Es momento de que pruebes esta nueva funcionalidad por tu cuenta! Estamos aquí por cualquier duda que tengas.

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!