Crea un tema de Shopify con el motor Liquid

Contenido

• Archivos y carpetas de temas
• Asignación de URL a plantillas
• Líquido: lo básico
• Entendiendo product.liquid
• Producción
• Lógica
• Filtros
• ¿Que sigue?
• Más recursos e inspiración

Durante las últimas semanas, he estado creando el tema de Shopify para Viewport Industries, la empresa Elliot Jay Stocks y yo formamos el año pasado. Elegimos Shopify por varias razones:

1. Nos permite vender productos tanto digitales como físicos
2. Está completamente alojado, lo que significa que no hay servidores de los que preocuparse
3. Es compatible con varias pasarelas de pago que se integran muy bien con nuestro banco.
4. Está basado en temas, lo que significa que podemos reutilizar fácilmente el HTML, CSS y JavaScript de nuestro sitio.

Shopify utiliza un motor de plantillas llamado Liquid para generar datos de su tienda en sus plantillas. Liquid es quizás el único ingrediente de un tema de Shopify que no ha usado antes y puede resultar desagradable. Pero la buena noticia es que no es tan difícil empezar.

Si alguna vez ha utilizado Smarty, ERB o Twig, lo que sigue le resultará familiar. Si no es así, no se preocupe: es solo cuestión de aprender algunas reglas simples. Una vez que haya agregado las habilidades Liquid a su kit de herramientas de desarrollo web, podrá comenzar a crear temas para los clientes en poco tiempo.

Archivos y carpetas de temas

Los temas de Shopify no son más que una serie de archivos (archivos HTML con una extensión .liquid, CSS, JS, imágenes, etc.) y carpetas. Los temas pueden verse y funcionar como quieras: realmente no hay restricciones. Esta es la estructura básica de un tema:

• activos
• config
• diseños
• tema liquido
• fragmentos
• plantillas
• 404. liquido
• articulo liquido
• blog.liquid
• carro liquido
• collection.liquid
• index.liquid
• page.liquid
• producto liquido
• search.liquid

Con estos archivos, puede crear los temas más básicos. Por supuesto, probablemente desee agregar algo de CSS, JavaScript y algunas imágenes. Los pondría en la carpeta de activos. (Vale la pena señalar que actualmente no se le permiten subcarpetas dentro de su carpeta de activos).

Para obtener más información sobre cómo funcionan los temas y para obtener más información sobre las carpetas de configuración y fragmentos, recomendaría leer Tema desde cero y Configuración del tema en Shopify Wiki.

Alternativamente, puede registrarse en el programa gratuito para socios, crear una tienda de prueba e inspeccionar uno de los muchos temas gratuitos disponibles en el área de administración de su tienda de prueba; simplemente vaya al editor de temas ubicado en el menú Temas.

Asignación de URL a plantillas

Los temas de Shopify funcionan asignando la URL actual a una plantilla específica. Por ejemplo, si estamos viendo un producto que tiene la siguiente URL ...

http://www.unitedpixelworkers.com/products/indianapolis

... entonces Shopify sabrá usar tu product.liquid plantilla. Es por este motivo que solo debe utilizar los nombres de archivo enumerados anteriormente para sus plantillas.

Además de que Shopify sabe qué plantilla mostrar en relación con la URL actual, pone a nuestra disposición una serie de variables muy específicas. Se conocen como "variables de plantilla" y nos permiten mostrar datos en nuestras plantillas.

Por ejemplo, en nuestra plantilla product.liquid, tenemos acceso al nombre apropiado producto variable. Esto significa que podemos mostrar el nombre, la descripción, el precio y la disponibilidad de nuestro producto en nuestra plantilla. Usaremos la combinación de Liquid y variables de plantilla para completar nuestras plantillas con datos relacionados con nuestros productos.

Para obtener una lista completa de las variables de plantilla disponibles, visite Shopify Cheat Sheet de Mark Dunkley.

Líquido: lo básico

Liquid está aquí para hacernos la vida más fácil como diseñadores de temas. Una de las principales formas en que lo hace es mediante el uso de diseños. Los diseños son ideales para incluir elementos de página comunes, como un encabezado, navegación principal, pie de página, etc.

En la estructura de mi carpeta anterior, verá un archivo llamado tema liquido en la carpeta de diseños. Puede pensar en theme.liquid como nuestra plantilla maestra. Todas nuestras otras plantillas, como product.liquid, se representan dentro de esta plantilla maestra. Puede tener más de un diseño si lo desea, pero el predeterminado siempre debe llamarse theme.liquid.

No he visto el archivo theme.liquid de United Pixelworkers, pero se puede imaginar que contiene el marcado para las áreas señaladas en rojo a continuación.

Así es como se vería un diseño theme.liquid básico:

1. ! DOCTYPE html>
2. html>
3. cabeza>
4. {{content_for_header}}
5. título> El título de la página va aquí / título>
6. / cabeza>
7. cuerpo>
8. {{content_for_layout}}
9. / cuerpo>
10. / html>

Notarás dos frases envueltas en llaves dobles: {{content_for_header}} y {{content_for_layout}}. Estos son nuestros primeros ejemplos de Liquid en acción.

Shopify a menudo usa {{content_for_header}} para agregar archivos específicos a la sección head> de un documento: por ejemplo, agregar un código de seguimiento. {{content_for_layout}} es donde aparecerá el contenido de nuestra plantilla mapeada por URL. Por ejemplo, si estamos viendo la página de un producto, nuestro archivo product.liquid reemplazará {{content_for_layout}} en nuestro archivo de diseño.

Entendiendo product.liquid

Ahora que hemos repasado los conceptos básicos de los diseños, es hora de mirar una plantilla.Las tiendas tienen que ver con los productos, así que veamos product.liquid.

A continuación, se muestra un ejemplo muy simple pero funcional de una plantilla de product.liquid.

1. h2> {{product.title}} / h2>
2. {{ Descripción del Producto }}
3. {% if product.available%}
4. form action = "/ cart / add" method = "post">
5. select id = "product-select" name = ’id’>
6. {% para variante en product.variants%}
7. option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
8. {% endfor%}
9. / seleccionar>
10. tipo de entrada = "enviar" nombre = "agregar" valor = "Agregar al carrito" id = "compra" />
11. / formulario>
12. {% demás %}
13. p> Este producto no está disponible / p>
14. {% terminara si %}

Hay una serie de conceptos clave de Liquid en funcionamiento aquí. Veámoslos en orden.

Producción

La primera línea de código contiene la frase {{ Titulo del producto }}. Cuando se procesa, esto generará el título del producto, que, como ya sabe, está determinado por la URL. En el ejemplo de United Pixelworkers que se muestra a continuación, el título del producto es simplemente "Indianápolis".

Liquid usa el formato de sintaxis de puntos. En este caso, {{product.title}} equivale a la variable de plantilla de producto y su atributo de título. Podemos generar la descripción del producto de la misma manera usando {{ Descripción del Producto }}.

Esto se conoce en términos líquidos como producción. Toda la salida se indica con llaves dobles, de la siguiente manera: {{your_output}}.

Lógica

En la siguiente línea del código, verá una declaración entre llaves seguida de un%: en este caso, {% if product.available%}. Este es otro concepto importante en Liquid conocido como lógica. Más abajo, verá {% else%} y finalmente las declaraciones {% endif%}.

Esto si declaración nos permite dictar lo que muestra nuestra plantilla, en función de una o más condiciones: en este caso, si nuestro producto está disponible o no. Efectivamente esto está diciendo, “si nuestro producto está disponible, muestre la información relacionada con él; de lo contrario, muestre un mensaje que le informe al usuario que está agotado ”.

Todas las declaraciones lógicas en Liquid usan la notación de porcentaje de llaves, es decir, {% if…%}. Solo recuerde cerrar sus estados de cuenta de manera apropiada o se encontrará con problemas. Por ejemplo:

1. {% if product.available%}
2. Mostrar el botón Añadir al carrito aquí
3. {% demás %}
4. Mostrar mensaje sobre la próxima vez que el producto estará disponible
5. {% terminara si %}

Filtros

Liquid nos permite manipular nuestra salida de varias formas. Uno de ellos es utilizar filtros. El contenido que entra en el filtro saldrá por el otro extremo alterado de una forma específica.

Si observa el ejemplo de product.liquid anterior, notará { dinero }. Una variante es un término que se utiliza para describir una variación de un producto: por ejemplo, diferentes colores y tamaños. Lo interesante aquí es que usamos un filtro para cambiar el precio de salida, en este caso, usando el filtro de dinero. Esto dará como resultado que el símbolo de moneda de la tienda se agregue al frente del precio.

Otros filtros incluyen strip_html, que eliminará las etiquetas HTML de un texto determinado y ucase, que lo convertirá a mayúsculas.

También puede unir filtros. Por ejemplo:

1. {article.content}

En este caso, tomamos el atributo de contenido de la variable de plantilla de artículo y lo pasamos al filtro strip_html y finalmente al filtro truncar. Notarás que el filtro de truncar nos permite especificar cuánto tiempo queremos que sea la salida final: en este caso, 20 caracteres.

Los filtros también nos permiten hacer un trabajo rápido en la creación de elementos de imágenes y secuencias de comandos en plantillas. A continuación, se muestra una forma muy rápida de utilizar un filtro para generar una imagen con una etiqueta alt asociada:

1. {asset_url}

El uso de esto en nuestro tema de Shopify dará como resultado el siguiente elemento img que se representará en nuestra plantilla:

1. img src = "/ files / shops / your_shop_number / assets / logo.png" alt = "Logotipo del sitio" />

La asset_url El filtro es muy útil ya que devuelve la ruta completa al tema actual activos carpeta. El uso de este filtro le permite aplicar su tema en varias tiendas y no tener que preocuparse por las rutas.

¿Que sigue?

Con suerte, estos pocos ejemplos le han demostrado que Liquid no es tan complicado. Por supuesto, hay mucho más que puedes hacer con él, pero al dominar la salida, la lógica y los filtros, estarás en el buen camino para comprender la mayor parte de lo que necesitarás para crear un tema de Shopify.

Más recursos e inspiración

• Tutoriales útiles para principiantes de Shopify
• Hoja de trucos de Shopify de Mark Dunkley
• Blankify: un tema de inicio de Shopify
• Tutorial: creación de un tema desde cero
• El programa de socios de Shopify
• 40 tiendas Shopify inspiradoras