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!