Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Diseñémos un tema de Shopify Diseñémos un tema de Shopify

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Belen Rt (you can also view the original English article)

Recientemente, Themeforest abrió una nueva sección en la que puedes comprar o vender temas para Shopify! Shopify es una solución de comercio electrónico que facilita el proceso de empezar con un negocio en línea. Puedes tener una tienda en línea y funcionando en minutos.

Para dar comienzo al catálogo de Shopify en ThemeForest, los autores de cada plantilla aceptada recibirán un bono de $100 - hasta que haya diez plantillas en la categoría.

Shopify es conocido por su flexibilidad de diseño. Mira algunos ejemplos. Shopify creó (y más adelante lanzado como código libre) el motor de plantillas Liquid. Liquid permite completa libertad de diseño para los diseñadores.

En este tutorial, te enseñaré cómo diseñar un tema de Shopify utilizando Liquid. Una vez que tengas los conceptos básicos, podrás diseñar un tema y enviarlo a Themeforest.

¿Qué es Liquid?

Liquid es un motor de plantillas desarrollado y utilizado por Shopify. Este procesa los archivos de las plantillas Liquid, las cuales tienen extensión ".liquid". Los archivos Liquid son simplemente archivos HTML con código incrustado. Puesto que Liquid permite la personalización completa de tu HTML, literalmente puedes diseñar una tienda para verse como cualquier cosa.

Liquid fue originalmente desarrollado en Ruby para usarlo con Shopify y fue lanzado como un proyecto open source. Desde entonces, se ha utilizado en otros proyectos Ruby on Rails y ha sido portado a PHP y javascript.

Una Rápida Vista Previa de Liquid

Echemos un vistazo a lo que se necesita para empezar con Liquid.

Como puedes ver, Liquid es solo HTML con código incrustado. Es por esto que Liquid es tan poderoso, te da total poder sobre tu código y hace que sea fácil trabajar con las variables que tienes disponibles.

¿Qué está sucediendo arriba?

Shopify banner

En líquido, hay dos tipos de marcado: Salida y Etiquetas. Las etiquetas de Liquid están rodeadas por llaves y signos de porcentaje; salida está rodeada por dos llaves.

En el fragmento anterior, la primera línea de Liquid es: {% para producto en productos %}... {% endfor %} Este es un ejemplo de una etiqueta de Liquid. La etiqueta for se repite sobre una colección de artículos y te permite trabajar con cada uno. Si alguna vez ha usado los bucles For en PHP, Ruby, javascript, o (inserte aquí cualquier lenguaje de programación), funciona del mismo modo en Liquid.

La siguiente línea de Liquid en el fragmento anterior es {{product.title}}. Este es un ejemplo de una salida de Liquid. Este preguntará por el título de un producto y mostrará el resultado en la pantalla.

La siguiente línea de Liquid introduce algo nuevo: {{product.price | money_with_currency}} Aquí tenemos un ejemplo de un filtro de Liquid. Permiten procesar una determinada cadena o variable. Los filtros llevan el valor a la izquierda de los mismos y hacen algo con él. Este filtro en particular se llama format_as_money; toma un número, antepone un signo de dólar y envuelve con el símbolo de moneda correcto.

Un ejemplo sencillo:

puede generar el siguiente código HTML

La última línea de Liquid arriba: {{product.description | prettyprint | truncar: 200}} muestra cómo puedes encadenar filtros. Los filtros actúan sobre el valor que está a la izquierda de ellos, incluso si ese valor pasa a ser el resultado de otro filtro. Así que el fragmento en cuestión aplicará el filtro prettyprint a product.description y después aplicará el filtro truncate a los resultados de prettyprint. De esta manera, ¡puedes encadenar tantos filtros Liquid como necesites!

¿Qué más ofrece Liquid?

En términos de las etiquetas Liquid, además de la etiqueta for, hay otras. Las más comunes son:

Comentario:

IF/Else:

Case:

Revisa la lista completa de etiquetas.

Liquid también ofrece muchos filtros que puedes utilizar para administrar tus datos. Algunos comunes son:

Capitalize:

Join:

Date:

Revisa la lista completa de filtros disponibles.

Anatomía de un Tema Shopify

Los temas de Shopify tienen una estructura simple. Consiste en una carpeta de atributos, diseño y plantillas. Echemos un vistazo a qué es lo que sucede y dónde:

  1. carpeta de atributos: En la carpeta de atributos almacena todos los archivos que deseas utilizar con tu tema. Esto incluye todas las hojas de estilo, scripts, imágenes, archivos de audio, etc., que vas a utilizar. En tus plantillas puedes acceder a estos archivos con el filtro de asset_url.
  2. carpeta de diseño: Esta carpeta debe contener solo un archivo llamado theme.liquid. El cual tiene los elementos globales para tu tema de Shopify. Este código se envuelve alrededor de todas las otras plantillas en tu tienda. Aquí está un ejemplo de un theme.liquid muy básico:

    Elementos Necesarios

    Hay dos elementos MUY importantes que deben estar presentes en un archivo de theme.liquid. El primero es {{content_for_header}}. Esta variable debe colocarse en la cabeza de tu theme.liquid. Permite a Shopify insertar cualquier código necesario en la cabeza del documento, como una secuencia de comandos para las estadísticas de seguimiento. Para aquellos familiarizados con WordPress, esto es bastante similar a la función wp_head().

    El otro elemento MUY importante es {{content_for_layout}}. Esta variable debe colocarse en el cuerpo de tu theme.liquid; es el lugar donde se procesarán todas las demás plantillas de Liquid.

  3. carpeta de plantillas: Esta carpeta contiene el resto de tus plantillas de Shopify. Consiste en:
    1. index.liquid: Se muestra como la página principal de la tienda.
    2. product.liquid: Cada producto utilizará esta plantilla para mostrarse a sí mismo.
    3. cart.liquid: Muestra el carrito de compra del usuario actual.
    4. collection.liquid: Muestra colecciones de productos.
    5. page.liquid: Muestra las páginas estáticas que la tienda puede haber creado.
    6. blog.liquid: Muestra cualquier blog de Shopify para la tienda.
    7. article.liquid: Muestra cualquier artículo de blog e incluye un formulario para enviar comentarios.
    8. 404.liquid: Se muestra en cualquier momento en que la tienda regresa a 404.
    9. search.liquid: Muestra resultados de búsqueda de la tienda.

Como pudiste haber adivinado, cada una de estas plantillas tiene acceso a diferentes variables. Por ejemplo, product.liquid tiene acceso a una variable de product que contiene el producto actual que se muestra, blog.liquid tiene acceso a una variable de blog e index.liquid tiene acceso a todos ellos. Si estás interesado en qué variables se pueden utilizar en la plantilla, por favor, revise la documentación de Liquid.

Un Esqueleto Básico para Empezar

Lo mejor de diseñar para Shopify es que puedes utilizar todas las habilidades que ya tienes: HTML, CSS, JS, etc. El único obstáculo en el proceso es conocer qué variables de Liquid están disponibles en cada plantilla.

Aquí es donde Vision entra.

Vision – Shopify en una caja

¿Qué es Vision?

Vision es una aplicación independiente que te permite crear temas para tiendas Shopify en tu máquina local sin tener que inscribirse en una tienda o configurar una base de datos ni todas esas otras cosas geek.

¿Qué necesito para ejecutar Vision?

Vision viene completo con todo lo necesario para ejecutar directamente de la caja. Si ya tienes un editor de texto y un navegador web instalado, ¡estás listo!

Como si eso fuera poco, Visioin viene pre-cargado con temas preparados de Shopify. Shopify ha permitido a personas utilizar estos temas como bloques de construcción, por lo que puedes iniciar con uno de estos temas existentes como base y expandir sobre él!

Resumen

Shopify es una plataforma de comercio electrónico en crecimiento rápido, cuenta ya con miles de vendedores que buscan dar a conocer sus productos. Usando Vision, puedes empezar a desarrollar en cualquier momento. Las diez primeras plantillas publicadas en la categoría de Shopify en Themeforest, obtendrán un extra de $100. ¡Así que empieza!

Si usted necesita más información sobre diseño con Shopify, tienen amplia documentación en su wiki. Mira la guía del tema de Shopify, utilizando Liquid y empezando con Vision.

Las mejores plantillas de Shopify en ThemeForest... ¡Hasta ahora!

  • Drifter

    Drifter

    "Este elegante tema de Shopify cuenta con líneas limpias y detalles de diseño moderno que muestran tus productos. Custom jQuery lightbox permite a tus productos ser vistos con todo detalle".

    Ver tema

  • Drifter

    Fancy Pink

    "Un tema de Shopify moderno, 2.0 diseño web de lujo."

    Ver tema


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.