Que es Shopify ¿Líquido? Un resumen rápido de los conceptos básicos

Mas de 4.4 millones de Los sitios web de comercio electrónico se construyen utilizando el Shopify plataforma. Es la plataforma de comercio electrónico todo en uno que ha sacudido la web desde su inicio en 2006. Los comerciantes eligen esta plataforma para alojar sus tiendas en línea por muchas razones, desde la fácil configuración de pagos hasta las herramientas de marketing integradas y mucho más. 

Pero uno de los aspectos críticos de Shopify es su creador de sitios intuitivo con miles de temas y Shopify integraciones de aplicaciones para elegir. 

Sin embargo, mientras el constructor sin código le permite crear sitios web impresionantes y únicos, existen algunas limitaciones. Por ejemplo, cuando comienza a crear su tienda en línea, debe elegir un tema que defina la disposición y el nivel de control que obtiene sobre su contenido. Incluso si selecciona un tema vacío, es decir, uno sin contenido, todavía hay una arquitectura de código subyacente que predefine cómo se organiza el contenido.

Pero hay buenas noticias. Si quieres crear el tuyo Shopify plantilla para su sitio o el de otra persona, hay Shopify Líquido.

¿Interesado? Únase a mí mientras me esfuerzo por responder la pregunta: ¿Qué es Shopify ¿Líquido? ¡Vamos a sumergirnos!

Que es Shopify ¿Líquido?

Curiosamente, Shopify Liquid ha existido desde Shopify's inicio. Cuando ShopifyLos creadores de primero diseñaron la plataforma, construyeron un proyecto de código abierto para servir como lenguaje de plantilla para todos Shopify página web plantillas. 

Para los no iniciados, el "lenguaje de programación de código abierto" se refiere al código fuente de un software que está disponible gratuitamente para el público, lo que permite que cualquier persona use, modifique y distribuya el código para cualquier propósito. 

Creado usando Ruby, Shopify Líquido esencialmente sirve como un marcador de posición para que pueda insertar datos en un predefinido format (más sobre esto a continuación).

¿Entonces, cómo funciona esto?

Para comprender esto, primero debe saber que los sitios web suelen ser estáticos o dinámicos. Los almacenes estáticos están codificados para mostrar el contenido exactamente como está escrito, por ejemplo, en HTML. Por el contrario, un sitio web dinámico puede mostrar diferentes contenidos dependiendo de cómo interactúe el usuario con él. 

Ahora supongamos que tiene un sitio web estático; el esqueleto básico del sitio está predeterminado, pero desea generar contenido dinámico. Aquí es donde escribir Shopify Líquido en su código HTML es útil. Esto se presta como marcador de posición para el contenido dinámico. 

Shopify Liquid actúa como intermediario entre su tienda y Shopifyservidor de Liquid, lo que permite a Liquid extraer datos de Shopifyservidor de y entréguelo a su tienda. Liquid puede solicitar tres tipos principales de datos:

1. Objetos
2. Etiquetas
3. Filtros

A continuación, exploraremos cada tipo de datos por separado:

Objetos Líquidos

Los objetos son similares a una biblioteca de funciones o contenido; dentro de cada objeto, hay varias propiedades. 

Si no está familiarizado con el concepto de objetos, aquí hay una breve descripción:

Un objeto es un concepto fundamental en la programación. Un objeto consta de dos componentes: 

1. Propiedades que definen el estado del objeto
2. Funciones que definen el comportamiento del objeto.

Para ilustrar mejor cómo funciona esto, usaremos un ejemplo no relacionado con la codificación. Por ejemplo, un coche. Aquí, el automóvil, es decir, el objeto, podría tener funciones como "acelerar", "girar" y "frenar". Por el contrario, las propiedades podrían ser las "ventanas", "puertas", etc. del automóvil. 

En pocas palabras, los objetos son un importante concepto en codificacion porque ayudan a organizar sistemas complejos en partes más manejables.

Por ejemplo, supongamos que está creando un personalizado Shopify tema y quiero mostrar un Titulo de Blog en tu plantilla. Puedes usar Liquid para traer esoformation de Shopifyy mostrarlo en algún lugar de la página. En este ejemplo, esta es la pieza de código de Liquid que usaría para lograr esto:

{{Blog.title}} 

Analicemos esto:

• Aquí, 'blog' es el objeto. 
• La propiedad que queremos dentro de este bibliotecas está marcado por 'título. " 
• La '.' le dice a Liquid cómo se relacionan estos dos bits de datos. 
• Los corchetes dobles son sintaxis líquida que define el {{contenido/salida que desea}} que desea del Shopify servidor. 

Etiquetas líquidas

Cuando usas Shopify Líquido, las etiquetas agregan lógica al contenido que solicitamos del Shopify servidor para ayudar a definir cuándo el contenido debe ser visible en la página. Por ejemplo, supongamos que queremos mostrar un gráfico en particular en nuestras publicaciones de blog festivas. Es decir, queremos que este gráfico solo aparezca cuando se cumpla una condición específica. 

Así es como se vería esto:

{% if blog.title == 'celebración' %}

**imagen HTML**

{% terminara si %}

Esto puede parecer complejo, pero si lo desglosamos, es bastante simple de entender:

• Las etiquetas usan una sintaxis ligeramente diferente a la de los objetos que se ven así  {%…%}.
• La primera etiqueta {% if blog.title == 'celebración' %} le dice a Liquid qué condición debe cumplirse antes de solicitar contenido del servidor.
• La condición que solicitamos está definida por una declaración 'si'. Si está familiarizado con la codificación, sabrá que las declaraciones 'si' funcionan al comparar dos o más datos entre sí. Si coinciden, pasará a la siguiente línea de nuestro código. Aquí,  if blog.title == 'celebración,' le pedimos a Liquid que verifique si el título de nuestro blog contiene la palabra 'celebración'. Si lo hace, bajará a la siguiente línea de nuestro código. Si no es así, Liquid no devolverá ningún contenido.
• En este ejemplo, si tenemos un título de blog que contiene la palabra 'celebración', Liquid extraerá y mostrará nuestra imagen HTML.
• Una vez hecho esto, va a la siguiente línea {% terminara si %}, que termina nuestro programa.

Este es solo un ejemplo de lo que puede hacer con las etiquetas. Shopify Liquid tiene etiquetas para:

• Control cuando se ejecuta el código
• Iterar/iteración (repetir) un bloque de código
• Pantalla ciertas marcas HTML
• Crear nuevas variables.

Filtros de líquidos

Los filtros son fragmentos de código que cambian o modifican la salida de un objeto. Por ejemplo, pueden cambiar el color, la fuente, el tamaño o el aspecto de los elementos del sitio web. 

Pero, además de cambiar los aspectos visibles del objeto, pueden realizar funciones en un objeto. Por ejemplo, si desea mostrar los títulos de su blog en mayúsculas, un filtro podría ayudarlo a lograrlo sin cambiar manualmente todos los títulos de su blog:

{{ blog.title | uppercase }}

• La sintaxis de los filtros es {{…}}.
• Aquí, la propiedad del objeto que estamos buscando es 'Titulo de Blog'.
• El filtro que estamos aplicando es mayúscula.
• La '|' separa la entrada y la salida de nuestro código.

Ahora, cuando un usuario mire el título de nuestro blog, aparecerá en mayúsculas.

Beneficios de Shopify Líquido

Supongamos que es un diseñador o desarrollador de sitios. En ese caso, uno de los beneficios más significativos de Shopify Liquid es que no necesita los datos de la tienda (es decir, enformation sobre la tienda) para crear o modificar un sitio web. Esto se debe a que cuando un usuario hace por primera vez una Shopify tienda, todo enformatEl ion se almacena en el Shopify servidor, lo que significa que puede usar Liquid para simplemente recuperar los datos que necesita. 

Sin embargo, si no es un desarrollador web, sino que es solo el propietario de una tienda que busca mejorar su tienda, también hay beneficios para usted:

• Fácil de aprender y usar: Liquid tiene una sintaxis simple y es fácil de entender, lo que lo hace accesible para desarrolladores y no desarrolladores.
• Contenido dinámico: Liquid permite la creación de contenido dinámico
• Personalizable: Con Liquid, puede crear plantillas y temas personalizados, lo que le otorga un control total sobre la apariencia de su tienda de comercio electrónico.
• Desempeño mejorado: Las plantillas de Liquid se compilan y almacenan en caché, lo que mejora rendimiento y velocidad del sitio web en comparación con otros motores de plantillas.
• Gran comunidad: Shopify tiene una gran comunidad de usuarios, que brinda acceso a una gran cantidad de conocimientos y soporte, lo que facilita la búsqueda de soluciones a problemas comunes relacionados con Liquid.

Requisitos

Entonces, ¿qué necesitas para empezar a usar Shopify ¿Líquido?

Si ya tienes un Shopify tienda, Shopify El líquido estará disponible para que lo use de forma gratuita. Discutiremos cómo puede encontrar Liquid a continuación. Pero todo lo que necesita saber por ahora es que todos los sitios creados en Shopify está construido con Liquid, por lo que puede comenzar a editar manualmente este código tan pronto como haya creado un sitio.

Sin embargo, si no tienes un Shopify store, necesitarás hacer uno para comenzar a jugar con Liquid. 

1. Primero, dirígete a Shopify y seleccione un plan. Rellena tus datos y crea tu cuenta.
2. De tu Shopify administrador, haga clic en temas. Shopify proporciona automáticamente un tema predeterminado. Puede dejar esto como está o elegir otro tema para comenzar.
3. Shopify tiene una lista de verificación que puede revisar para completar su tienda. Querrá hacer todo lo básico, como agregar páginas de productos, diseñar su escaparate, etc.

Ahora que tiene el esqueleto básico de su tienda en línea, puede extraer estos datos del Shopify server y personalícelo usando Liquid (más sobre esto a continuación). 

Si bien no necesita experiencia en codificación para comenzar a usar Liquid, la familiaridad con los principios básicos de codificación hará que su viaje sea más fácil. Pero en su mayor parte, puede encontrar extensa documentación de autoayuda y tutoriales en el Shopify portal de desarrolladores. Aquí encontrarás una sección entera dedicada a Fundamentos líquidos. 

Es aconsejable que dedique algún tiempo a leer estas guías antes de comenzar. Si bien Liquid es una poderosa herramienta de personalización, también tiene el potencial de arruinar su sitio si no sabe lo que está haciendo.

Empezar con Shopify Líquido

Entonces, usando lo que hemos aprendido hasta ahora, veamos cómo podemos editar nuestro Shopify tema usando Liquid. 

Para acceder a Liquid, siga estos pasos:

1. Duplica tu tema: Para evitar contratiempos importantes, es wise para hacer una copia de su tema antes de comenzar. De esa manera, si comete algún error, su original Shopify El tema permanece intacto. Para hacer esto, navegue a la sección de temas en el lado derecho de su Shopify panel. Elija el tema que desea editar y haga clic en acciones para ver el menú desplegable. Ahora, seleccione duplicar.
2. Cambia el nombre de tu duplicado: Cuando dupliques un tema, lo verás aparecer en tu lista de temas. Puede cambiar el nombre de su copia para no confundir el original y el duplicado. Simplemente haga clic en el botón de acciones nuevamente y presione cambiar el nombre en el menú desplegable. 
3. Entrando al editor de código: Ahora, seleccione acciones en su duplicado nuevamente y seleccione editar código. Será dirigido a la lista completa de códigos dentro de su tema. Eche un vistazo a las carpetas enumeradas a su derecha. Debería ver un montón de carpetas que contienen diferentes aspectos de su tema, como el diseño, las plantillas, las secciones, etc. Abra la carpeta de plantillas. 
4. Codificación en líquido: Dentro de la carpeta de plantillas, verá una lista de archivos con el tipo de archivo .liquid. También puede crear una nueva plantilla de archivo de Liquid seleccionando el botón más en la carpeta de plantillas. Te preguntará qué plantilla quieres hacer, es decir, página, sección, blog, etc., y que le pongas nombre al archivo. Para editar un archivo, haga doble clic en un archivo de plantilla y se abrirá en el editor de código a la derecha.

Dentro de cualquier archivo de Liquid, verá un script HTML. Este es el esqueleto de su sitio web. Puede usar el lenguaje Liquid dentro de este HTML para recuperar enformation de la Shopify servidor. Siempre que utilice la sintaxis de Liquid correcta, es decir, los corchetes, debería mostrar su contenido en consecuencia.

Para ilustrar, veamos un ejemplo sencillo:

Cambiar el tamaño de las imágenes usando Shopify Líquido

Las imágenes son un aspecto esencial de la mayoría Shopify historias. Pero si está utilizando varias imágenes, puede ser una pesadilla ajustar el tamaño de todas correctamente, para que se vean ordenadas. Para arreglar esto, estamos viendo el img_url filtrar. Al igual que otros filtros, img_url está diseñado para modificar el contenido que toma del Shopify servidor. Puede utilizar este filtro para cambiar el tamaño, la escala y la formaty recorte. 

Esta es una técnica excelente porque el filtro solo modifica temporalmente una imagen existente; no crea una nueva imagen cada vez que representa su plantilla, por lo que no ralentizará el tiempo de carga de su sitio. 

Entonces, ¿cómo cambiamos el tamaño de una imagen?

Primero, debemos decidir dónde queremos aplicar los cambios. Puedes aplicar el filtro img_url a cualquier objeto con una propiedad de imagen, incluyendo:

• Productos
• Variantes de producto
• Artículos de línea
• Colecciones
• Artículos

Una vez que decida qué imágenes desea editar, necesita saber qué propiedad wish apuntar. Para averiguar qué propiedades tienen un atributo de imagen, consulte Shopifylista de objetos y sus propiedades. 

En este ejemplo, apuntaremos a las imágenes de nuestro artículo de blog.

Aquí está el código básico:

{{ blog.articles.image | img_url: ‘100×100' }}

Descompostura:

• Blog es el objeto que estamos buscando, y queremos la propiedad  , ya que contiene todos los artículos de nuestro blog. Específicamente, queremos cambiar las imágenes en los artículos de nuestro blog, por lo que apuntamos a la imagen propiedad dentro de los artículos.
• Ahora aplicamos el filtro. img_url. Si dejamos esto como está, simplemente mostraría una imagen extraída de la URL proporcionada por el Shopify servidor. Sin embargo, también vamos a dar un parámetro extra: el tamaño de la imagen '100×100' (tenga en cuenta que Shopify utiliza píxeles para determinar rangos de tamaño).
• Finalmente, envolvemos nuestro código usando la sintaxis de doble corchete de Liquid, que se usa para los filtros. 

¡Y hemos terminado! Esto debería devolver la salida para todas las imágenes de nuestro blog, haciéndolas de 100 por 100 píxeles de tamaño.

Consejos y comida para llevar

Espero que después de haber leído este artículo, ahora tenga una respuesta a la pregunta: ¿Qué es Shopify ¿Líquido?

Como se puede ver, Shopify Líquido es una herramienta versátil que puede cumplir varias funciones al diseñar o editar un Shopify plantilla. Si bien hay una pequeña curva de aprendizaje, una vez que te acostumbras, es razonablemente fácil de usar, especialmente en comparación con otros lenguajes de codificación más complejos como Javascript.

Si estás interesado en usar Shopify Liquid, le recomendamos que siga estos consejos para aprovecharlo al máximo:

1. Comience con una sólida comprensión de Liquid: Una sólida comprensión de Liquid le permitirá crear temas personalizados más complejos. Con esta base, los nuevos usuarios pueden aprovechar todo el potencial de Shopify para crear tiendas en línea únicas y atractivas.
2. Pruebe su tema a fondo: La prueba es esencial para garantizar que su tema personalizado funcione como se espera en diferentes navegadores y dispositivos. Al detectar los problemas de compatibilidad a tiempo, evita posibles frustraciones para sus clientes.
3. Utilice las herramientas y los recursos disponibles: Shopify tiene una gran cantidad de recursos disponibles para ayudar a los desarrolladores de temas, ¡así que utilícelos! Cuando se utiliza, esto puede hacer que el proceso de desarrollo sea más rápido y fácil.

Con todos estos puntos cubiertos, creo que es seguro decir que Shopify Liquid puede ser una forma divertida y eficaz de actualizar o crear un entorno más atractivo y dinámico. Shopify almacenar. 

Eso es todo de mi parte; A ti. Cuéntame sobre tus experiencias con Shopify ¡Líquido en los comentarios a continuación!