OmbuShop Crea Tu Tienda Online

Artículos del autor

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!

 

Ejemplos de Liquid

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

Todas las tiendas sobre OmbuShop pueden modificar las partes más importantes de su diseño. Pueden administrar el CSS y el HTML de toda la tienda.

Las únicas páginas que no se pueden modificar son las del carrito de compras y las de checkout.

Para modificar el HTML de alguna página, es necesario administrar los templates en la sección de Diseño y seguir las instrucciones que figuran en nuestra API para diseñadores.

Aquí voy a mostrar algunos ejemplos de cosas que se pueden hacer con el lenguaje de templates que utilizamos: Liquid.

(más…)

OmbuShop y Neolo.com te ofrecen un descuento especial

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

Nos hemos asociado con Neolo.com para ofrecerte un mejor servicio. Ahora podrás recibir un 70% de descuento en tu dominio y direcciones de correo electrónico ilimitadas con el nombre de tu negocio.

OmbuShop te ofrece todas las herramientas necesarias para que puedas vender a través de tu sitio web, y Neolo te brinda  direcciones de correo electrónico ilimitadas con el nombre de tu negocio. Por ser cliente de OmbuShop, tendrás un descuento del 70% en el precio regular del servicio de Neolo.

El servicio de mail hosting de Neolo te proporciona las herramientas necesarias para poder crear las cuentas de email. Luego podrás configurarlas en tus dispositivos y acceder a través del webmail para enviar y recibir correos con tu propio dominio.

Para comenzar y acceder a este descuento exclusivo, sigue los pasos de esta guía: Link a guía

Nuevos Productos de OmbuLabs

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

Con motivo del cierre del año 2015, trabajamos en una serie de productos para obsequiar a todo el equipo de OmbuShop y OmbuLabs. Queremos compartir con ustedes este proceso, con un excelente resultado.

Todo comienza con una idea

Decidimos realizar tres productos: una remera, un cuaderno y una tote bag. Comenzamos definiendo algunas frases sobre diseño. Como todo producto, partimos de una idea, luego un boceto, el diseño y, finalmente, su producción.

Productos con diseño

Para el cuaderno elegimos una frase de Otl Aicher (diseñador gráfico y tipógrafo alemán): Good Art Inspires, Good Design Motivates. Aquí pueden ver parte del proceso de diseño, con decisiones y ajustes finales.

cuaderno-proceso

Para la remera también elegimos una frase muy conocida, que nos inspira día a día en todo lo que hacemos: Done is Better than Perfect.

lettering-2

remera

Por último, y no menos importante, la tote bag. Para el diseño de esta bolsa tomamos como referencia todo lo que es parte de nuestro trabajo cotidiano y nuestra metodología. Realizamos algunas ilustraciones y luego armamos una composición final.

working_at_OmbuLabs

bag-design

totebag

Estamos contentos de poder compartir este proceso con ustedes. Creemos que puede ser aplicado a cualquier emprendimiento o proyecto de diseño. Muy pronto, estos productos van a estar disponible para la venta en Argentina, en la Tienda de OmbuLabs.

Animaciones CSS3

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

El uso de animaciones CSS3 no es una novedad. Sin embargo, es una herramienta indispensable para ampliar las barreras del diseño estático y realizar propuestas más dinámicas para tus clientes o cualquier proyecto de diseño web.
En este post, vamos a repasar las reglas generales y algunos ejemplos. Para empezar, sólo es necesario tener algunos conocimientos básicos de HTML y CSS.

Animaciones CSS3

Las animaciones nos permiten modificar el estilo de algunos elementos de HTML a través de transiciones en una duración determinada. Estas transiciones se definen por medio de keyframes y las propiedades de la animación asignadas al elemento.

Keyframes

En la propiedad @keyframes se define el nombre de la animación junto a las transiciones de la misma. En este ejemplo, hay 3 momentos para la animación color y están afectando la propiedad background-color del elemento div.

Propiedades de la animación

Para animar un elemento, se utiliza la propiedad animation, la cual tiene estas subpropiedades:

  • animation-name: nombre de la animación.
  • animation-duration: duración de la animación en segundos o milisegundos.
  • animation-timing-function: define la curva de velocidad de la animación. Esta subpropiedad cuenta con diferentes opciones:
    • linear: mantiene la misma velocidad a los largo de toda la animación
    • ease:tiene un comienzo lento, luego la velocidad aumenta y vuelve a ser lenta hacia el final
    • ease-in:tiene un comienzo lento y luego mantiene la velocidad.
    • ease-out:mantiene la misma velocidad y luego es lenta hacia el final
    • ease-in-out:el comienzo y el final de la animación son lentos
    • cubic-bezier: la velocidad se define a partir de la función cúbica de Bezier. Acepta cuatro valores entre 0 y 1.
  • animation-delay: es el tiempo de retraso para comenzar la animación. Se define en segundos o milisegundos.
  • animation-iteration-count: es la cantidad de veces en que se repite una animación. También se puede utilizar infinite.
  • animation-direction: es la dirección de la animación. Puede ser linear, reverse, alternate-reverse

En el siguiente ejemplo se puede observar cómo un mismo elemento varía su animación según su animation-timing-function:


 

La propiedad transform

Para crear transiciones de espacio en una animación, se utiliza la propiedad transform. De esta manera se puede rotar, trasladar, escalar o sesgar un elemento. Para más información sobre su sintáxis y uso, recomiendo leer esta guía.

Sobre el soporte y uso de animaciones

Las animaciones CSS3 tienen soporte en la mayoría de los navegadores en sus últimas versiones. Aún así, te recomiendo que utilices los prefijos estandarizados de WebKit.

Screenshot 2016-01-14 10.51.46

No hay límites sobre el uso de animaciones, pero el uso excesivo en todo el sitio o varias animaciones con loop infinito pueden generar problemas de rendimiento. Te recomiendo que antes de comenzar a animar, evalúes qué elementos necesitan ser animados, por qué y cómo van a mejorar la interacción con el usuario para proponer una nueva experiencia.

Otros Artículos

Para profundizar en el tema, recomiendo leer estos artículos. Algunos son más técnicos que otros, pero sin dudas te ayudarán a mejorar tus habilidades con las animaciones CSS3: