Machine Translated by Google

Aprendizaje
Líquido
Consejos, sugerencias y trucos para
comenzar con el desarrollo de temas de Shopify
Machine Translated by Google

Introducción

Liquid, el lenguaje de plantillas de Shopify, es la columna vertebral de todos los temas

de Shopify y se utiliza para crear un puente entre los archivos HTML y los datos contenidos
en una tienda de Shopify. En última instancia, esto le permite recuperar y mostrar datos
(como el nombre de un producto o una serie de imágenes de productos) en su tienda en

línea o en la de su cliente. No hace falta decir que aprender Liquid es la piedra angular de
todo gran desarrollador de Shopify.
¡éxito!

Ya sea que estés comenzando con los temas de Shopify o que seas un Shopify
experto experimentado, siempre hay cosas nuevas y útiles para aprender que te
ayudarán con el desarrollo de tu tema diario. Hemos compilado una lista completa de

consejos, sugerencias y trucos para usar Liquid que lo ayudarán a llevar sus habilidades
de desarrollo de temas de Shopify al máximo nivel.
siguiente nivel.

En esta guía, cubriremos:

• Una descripción general del lenguaje de plantillas Liquid.

• Cómo configurar un entorno de desarrollo “local”.

• Técnicas para aprovechar al máximo tus plantillas de Shopify.

• Cómo usar Liquid para mejorar tus imágenes.

• ¡Además, aún más consejos, trucos y trucos para personalizar las tiendas Shopify
usando Liquid!
Machine Translated by Google

Tabla de contenido

1 / Una descripción general de Liquid: lo que necesita saber 5

2 / Cómo configurar un tema de Shopify "local"

Entorno de desarrollo 21

3 / Cómo se asignan las URL a la plantilla de Shopify 28

4 / La plantilla product.liquid 32

5 / Cómo usar plantillas alternativas 36

6 / El poder de los archivos de diseño alternativos 41

7 / Usar listas de enlaces en tu tema de Shopify 45

8 / Usar fragmentos en tu tema de Shopify 53

9 / Usar secciones y bloques en tu tema de Shopify 61

10 / Cómo usar all_products en un tema de Shopify 69

11 / Manipular imágenes con el filtro img_url 74

12 / Formas de personalizar el elemento img 81

13 / Creación de Hooks CSS útiles en Liquid 84

14 / Uso de Liquid's case/when Control Tags 87

El programa de socios de Shopify 90

Machine Translated by Google

CAPÍTULO 1

Una visión general

de Líquido: ¿Qué
Necesitas saber

Si eres nuevo en el desarrollo con la plataforma Shopify, podrías

preguntarse a qué se refiere realmente toda la charla sobre Liquid.
En este capítulo, explicaremos todo lo que necesita saber sobre Liquid,
cómo encaja en la creación de temas de Shopify y los conceptos básicos
que le permitirán comenzar a crear plantillas de comercio electrónico
potentes y envolventes. Comencemos con un poco de historia.

Liquid fue desarrollado por el cofundador y CEO de Shopify, Tobias Lütke, y

ahora está disponible como un proyecto de código abierto en GitHub. Hoy en
día, se usa en muchos proyectos de software diferentes, desde sistemas de
administración de contenido hasta generadores de sitios de archivos planos y, por supuesto, Shopi

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 4

Machine Translated by Google

Liquid: ¿lenguaje o motor?

Algunos se refieren a Liquid como un lenguaje de plantillas, mientras que otros pueden
llamarlo un motor de plantillas. Realmente no importa qué etiqueta aplique, en muchos
sentidos ambas son correctas. Personalmente, nos gusta llamarlo un lenguaje de plantillas.
Tiene una sintaxis (como los lenguajes de programación tradicionales), tiene conceptos
como salida, lógica y bucles, e interactúa con variables (datos), tal como lo haría con un

lenguaje centrado en la web como

como PHP.

Sin embargo, ahí es realmente donde terminan las similitudes. Hay muchas cosas que

no puedes hacer con Liquid, por diseño. Por ejemplo, no tiene el concepto de "estado", no
le permite profundizar en las cubiertas de la plataforma y, en ocasiones, puede parecer
contradictorio para los programadores experimentados. Sin embargo, se ha pensado muy

bien, y lo que al principio puede parecer una limitación suele ser intencionado y por una
buena razón.

funcion de liquido
Liquid, como cualquier lenguaje de plantillas, crea un puente entre un archivo HTML y
un almacén de datos; en nuestro contexto, los datos son, por supuesto, una tienda

Shopify. Lo hace permitiéndonos acceder a las variables desde dentro de una plantilla
con una sintaxis fácil de usar y legible.

En Shopify, cada plantilla nos permite acceder a ciertas variables sin tener que hacer

ningún trabajo pesado. Por ejemplo, la plantilla product.liquid nos permite acceder a
todos los detalles relacionados con el producto visto actualmente, lo que, a su vez, nos
permite generar estos datos sin tener que saber nada sobre el producto real en sí. Estas

variables se conocen como variables líquidas. También puede usar Liquid para recuperar
datos que no están disponibles para nosotros. Por ejemplo, puedes pedirle a Shopify que
complete una variable que creas con todos los productos de una colección en particular.

Una vez que conocemos los nombres de las variables a las que tenemos acceso, o

creado, podemos usar construcciones de Liquid como "salida" y "bucles" para mostrar los
datos en nuestras plantillas.

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 5

Machine Translated by Google

La plataforma Shopify entiende qué datos recuperar y cómo mostrarlos según

el código de Liquid que tenga en su plantilla. Puede ser un caso simple de mostrar
el nombre de un producto, o algo un poco más complejo, como mostrar una serie
de imágenes de productos.

El gran beneficio de un lenguaje de plantillas como Liquid es que usted, como

diseñador, no necesita saber nada sobre los datos en sí.
Como tal, sus plantillas son 100 por ciento independientes y se pueden aplicar a
varias tiendas sin ningún conocimiento del contenido de las tiendas.

Extensión de archivo y delimitadores de Liquid

Los archivos de Liquid tienen la extensión .liquid . Un archivo .liquid es una
combinación de código HTML estándar y construcciones Liquid. Es una sintaxis
fácil de leer y fácil de distinguir de HTML cuando se trabaja con un archivo de
plantilla. Esto se hace aún más fácil gracias al uso de dos conjuntos de delimitadores.

Los delimitadores de llaves dobles {{ }} denotan salida, y los delimitadores de

porcentaje de llaves {% %} denotan lógica. Te familiarizarás con estos, ya que
cada construcción de Liquid comienza con uno u otro.

Otra forma de pensar en los delimitadores es como "marcadores de posición". Un

marcador de posición se puede ver como una pieza de código que finalmente
será reemplazada por datos cuando la plantilla compilada se envíe al navegador.
Estos datos los determina completamente el diseñador del tema como resultado
del código de Liquid en la plantilla. Como tal, las plantillas de Liquid, al igual que
las plantillas que intercalan PHP y HTML, sirven como representaciones de lo que
se representará.

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 6

Machine Translated by Google

Producción

Examinemos la sintaxis de "salida". Como sugiere el nombre, la salida en

Liquid literalmente generará una parte de los datos de una tienda en una plantilla.

Este es un ejemplo rápido de un marcador de posición de salida que

normalmente encontrará en la plantilla product.liquid: <h2>{{ product.title }}</
h2>

Cuando se represente, generará el nombre del producto visto actualmente en

lugar de {{ }} . Por ejemplo:
<h2>Taza Diner Americano</h2>

La salida, a menos que se manipule con un filtro (que veremos en breve), es

simplemente un caso de reemplazar el marcador de posición completo con una
cadena de texto de su tienda.

Objetos y propiedades
Este ejemplo también nos introduce a la sintaxis de Liquid dot. Esto es
común en muchas plantillas y lenguajes del lado del servidor. Tomando nuestro
shop.name ejemplo podemos dividirlo en dos partes.

El primer elemento que precede al . es el objeto. En este caso, es el objeto de la

tienda. Esta es una variable que representa todos los datos relativos a la tienda
que hemos definido en Shopify Admin. Estos elementos de datos
incluir:

• tienda.dirección

• tienda.colecciones_cuenta

• tienda.moneda

• tienda.descripción

• tienda.dominio

• tienda.correo electrónico

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 7

Machine Translated by Google

• shop.enabled_payment_types

• tienda.metacampos

• tienda.money_format

• shop.money_with_currency_format

• Nombre de tienda

• tienda.contraseña_mensaje

• tienda.dominio_permanente

• políticas.de.tienda

• tienda.productos_cuenta

• tienda.url_segura

• tienda.tipos

• tienda.url

• tienda.proveedores

Los elementos que siguen al . representan las propiedades del objeto de la tienda.
Una propiedad podría ser tan simple como el nombre de la tienda (según
nuestro ejemplo anterior) o podría ser una lista de artículos, como los tipos
de pago habilitados en la tienda.

Propiedades de la colección
Notará en la lista anterior que varias de las propiedades son plurales, como:

• shop.enabled_payment_types

• tienda.metacampos

• tienda.tipos

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 8

Machine Translated by Google

Estas propiedades representan colecciones Liquid. En lugar de devolver una

cadena de datos como el nombre de la tienda, devolverán una serie de datos; en
otras palabras, es una lista de elementos a los que podemos acceder a través de
un bucle de Liquid.

Cuando usa Shopify y Liquid por primera vez, es fácil confundirse con las
colecciones. Por lo tanto, nos referiremos a "colecciones de productos" y
"colecciones de Liquid", siendo la primera una agrupación lógica de productos
definida en Shopify Admin, y la última como una lista de elementos a los que
podemos acceder en el código de Liquid.

Finalmente, vale la pena decir que cada uno de los elementos de la lista en
nuestra colección Liquid también puede tener propiedades. Un buen ejemplo de
esto es product.images. Esto representa una lista de todas las imágenes que se
han agregado a un producto en particular.

Cada una de las imágenes de la lista tiene múltiples propiedades asociadas:

• imagen.alt

• imagen.adjunta_a_variante?

• imagen.id

• imagen.product_id

• imagen.posición

• imagen.src

• imagen.variantes

• Altura de imagen

• ancho de la imagen

• imagen.aspect_ratio

Para acceder a estas propiedades, tenemos que usar un bucle Liquid.

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 9

Machine Translated by Google

Bucles de líquido
Los bucles se utilizan mucho en los temas de Shopify y, afortunadamente, son muy
fáciles de entender. Si ha realizado algún tipo de programación básica, es probable
que el concepto de bucles le resulte muy familiar.

El uso de un ciclo, a menudo conocido como ciclo for, nos permite generar
la misma pieza de código un número conocido de veces en nuestra plantilla.
Como se mencionó anteriormente, un ejemplo típico sería generar todas las
imágenes asociadas con un producto.

Echemos un vistazo a un ejemplo usando product.images Liquid

colección que discutimos anteriormente.

Nuestro objetivo con este bucle es generar todas las imágenes de un producto en
particular. Aquí hay un ciclo muy simple que generará cada imagen en línea:

{% para imagen en producto.imágenes %}

<img src=“{{ imagen | img_url: '100x100' }}”>
{% endfor %}

Vamos a dividirlo en pasos para entenderlo completamente.

Paso 1
{% para imagen en producto.imágenes%}

La primera línea nos presenta el segundo estilo de delimitador, la sintaxis de porcentaje

de llaves {% %} . Aquí, estamos usando un bucle for de Liquid. Los bucles funcionan
con las colecciones de Liquid y nos permiten iterar sobre cada elemento de nuestra
lista. Si el producto que estamos viendo actualmente tuviera seis imágenes asociadas,
nuestro bucle for se repetiría seis veces, si tuviera 10, se repetiría 10 veces, y así
sucesivamente. Solo una vez que se hayan examinado todos los elementos de la lista (o
a menos que le indiquemos lo contrario) se considerará la siguiente parte de la plantilla.

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 10

Machine Translated by Google

Vale la pena señalar que, a menos que preguntemos específicamente qué tan
grande será nuestro bucle, no sabemos cuántos bucles ocurrirán, solo que
Liquid revisará cada elemento de nuestra lista, uno por uno. El ciclo terminará
después de la última iteración, y es en este punto que la plantilla continuará con
su procesamiento.

Para acceder a las propiedades de cada elemento de la lista, designamos

una variable para representar el elemento actual en el ciclo. En nuestro
ejemplo anterior, es image . Si bien esta es una opción obvia y ayudará a
otros diseñadores a comprender su lógica en el futuro, literalmente puede ser
cualquier cosa. Por ejemplo, podríamos usar todas las imágenes del mundo, en
cuyo caso quedaría de la siguiente manera:
{% para todas las imágenes del mundo en product.images %}

Este es, por supuesto, un ejemplo tonto para aclarar un punto: la imagen tiene
mucho más sentido, pero solo queremos enfatizar el hecho de que esta
variable no tiene relación con la colección Liquid.

Paso 2
<img src=”{{ imagen | img_url: '100x100' }}”>

La segunda línea de nuestro código de ejemplo consta de parte HTML y parte

Liquid. También notará que el atributo src se completa con una etiqueta de
salida de Liquid.

Esto nos introduce al concepto de filtros, que se denotan con el

| (tubería) carácter: los veremos con más detalle en breve. En nuestro
ejemplo, el filtro toma la variable de imagen (el elemento actual en nuestro
bucle) y crea una URL completamente calificada para la versión de tamaño de
100 px de la imagen, que se creó cuando se agregó la imagen del producto en
Shopify Admin.

Veremos los filtros, indicados por | carácter, a continuación, pero basta con
decir que esta breve construcción llenará el atributo src con la URL
completamente calificada para la versión de 100px de la imagen actual en nuestra
lista. El filtro hace todo el trabajo de crear el atributo src por nosotros.

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 11

Machine Translated by Google

Paso 3
{% que antes %}

La línea final de nuestro ejemplo es nuestra instrucción de cierre endfor. Esto le dice
a la plantilla que continúe después de que se hayan ejecutado todos los bucles.

Si tuviéramos tres imágenes en nuestro objeto product.images, el resultado final

se vería así:

<img src=“//cdn.shopify.com/s/files/1/2509/4288/productos/
13038FAW_PRO_EarringsD_352_100x100.jpg?v=1509545613”>
<img src=“//cdn.shopify.com/s/files/1/2509/4288/productos/
13039FAW_PRO_SQ_Jewellery4F_022_100x100.jpg?v=1509545613”>
<img src=“//cdn.shopify.com/s/files/1/2509/4288/productos/
13039FAW_PRO_SQ_Jewellery4S_023_100x100.jpg?v=1509545613”>

Los bucles son realmente útiles y es algo que encontrarás a diario en el desarrollo
de tu tema. La salida de imágenes y variantes de productos son dos ejemplos que se
encuentran comúnmente.

Filtros de líquidos
Otra característica muy poderosa de Liquid son los filtros de salida, que usamos
en el ejemplo de código anterior. Los filtros tienen tres propósitos principales:

• Manipulan los datos de salida de alguna manera.

• Permiten que nuestros temas sean agnósticos.

• Ahorran tiempo a los diseñadores de temas al reducir la cantidad

de código que tenemos que escribir.

Los filtros siempre se usan junto con una salida Liquid.

Echemos un vistazo a algunos filtros, comenzando con el filtro de fecha.

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 12

Machine Translated by Google

Al generar una publicación de blog, es probable que desee que el lector sepa
cuándo se publicó:
<p class=”fecha-hora”>{{ artículo.published_at | fecha:
“%a, %b %d, %y” }}</p>

Notarás el | carácter en el medio de la etiqueta de salida. En el lado izquierdo de la

tubería, tenemos el objeto del artículo con su asociado
Published_at propiedad, y a la derecha tenemos el filtro de fecha con un
argumento para indicar el formato de fecha, en este caso %a, %b %d, %y .

Sin el filtro, Shopify simplemente mostraría la fecha en que se publicó el

artículo del blog en el formato en el que está almacenado en la base de datos, que
puede no ser legible por humanos. Sin embargo, al agregar en el | e incluyendo el
filtro de fecha, podemos manipular el formato para que salga en el formato que
queramos. En este caso, la fecha se generaría en este formato:

mar, 22 abr, 14

Agregar una hoja de estilo

En pocas palabras, los filtros nos permiten tomar un dato de nuestra tienda y
cambiarlo. Lo que comenzamos en el lado izquierdo se canaliza a través de nuestro
filtro y emerge en el lado derecho cambiado. Son estos datos finales manipulados
los que luego se generan en la plantilla.

Aquí hay un ejemplo de cómo agregar una hoja de estilo en Liquid:

{{ 'estilo.css' | activo_url | etiqueta_hoja_de_estilo }}

Aquí, estamos usando dos filtros con el objetivo final de crear un elemento de
estilo completo en un archivo de diseño.

Comenzamos a la izquierda con el nombre de nuestro archivo CSS, que se encuentra

en la carpeta de activos del tema. A continuación, aplicamos nuestro primer filtro, en
este caso el filtro asset_url. Este es un filtro increíblemente útil y uno que usará
mucho. Hemos mencionado antes cómo los temas de Shopify, gracias a

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 13

Machine Translated by Google

Líquidos, son agnósticos. No necesitan tener ningún conocimiento de la tienda

en la que están instalados, y el mismo tema se puede aplicar a varias tiendas. Sin
embargo, esto puede causar problemas al intentar hacer referencia a los activos,
ya que necesitamos una forma de saber dónde se encuentra un determinado activo
(imagen, archivo JS, archivo CSS) en la red.

Afortunadamente, asset_url viene a nuestro rescate. Al usar este filtro, Shopify

devolverá la ruta completa a la carpeta de activos para el tema y agregará el nombre
de nuestro activo al final. Solo recuerde que en realidad no verificará que el archivo
exista; depende de nosotros asegurarnos de que la primera parte de la etiqueta, en
nuestro caso, style.css, esté en la carpeta de activos.

Así es como podría verse cuando se genera:

//cdn.shopify.com/s/files/1/0087/0462/t/394/activos/
tienda.css?28178

El filtro final de la cadena, stylesheet_tag , toma la URL y la envuelve en un

elemento de estilo que luego se genera en nuestro archivo de diseño.
Aquí está el resultado final:

<enlace href=“//cdn.shopify.com/s/files/1/0087/0462/t/394/
activos/tienda.css?28178” rel=“hoja de estilo” type=“texto/css”
medios = "todos">

Cada filtro toma la salida de su filtro anterior y, a su vez, la modifica. Cuando

no hay más filtros para pasar datos, el resultado se envía como HTML a la
plantilla.

Hay muchos filtros realmente útiles. Aquí hay algunos que te encontrarás
usando:

• activo_url

• hoja_estilo_etiqueta

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 14

Machine Translated by Google

• script_tag

• fecha

• pluralizar

• reemplazar

• resolver

• dinero

• dinero_con_moneda

• img_url

• enlace a

Lógica líquida
El aspecto final de Liquid que debemos observar es la lógica.

Aquí hay un ejemplo:

{% si producto.disponible %}
<h2>Precio: 99,99 £</h2>
{% más %}
<h2 class=“sold-out”>Lo sentimos , agotado</h2>
{% endif %}

En este caso, estamos controlando la salida de nuestra plantilla usando

una declaración simple if, else, endif. En muchos sentidos, las declaraciones if
son como preguntas. Dependiendo de la respuesta a la pregunta, se generará
una marca diferente o, en algunos casos, ninguna marca.

En el ejemplo anterior, si la respuesta a nuestra pregunta de declaración

if es verdadera (producto.disponible devuelve verdadero o falso),

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 15

Machine Translated by Google

traducir las palabras "Este producto está disponible". Si es falso, nuestra

plantilla continúa y genera el texto que sigue a nuestra cláusula {% else %}; en
este caso, "Lo sentimos, este producto está agotado".

Otra forma de ver la lógica es que nos permite controlar el flujo de una plantilla y, en
última instancia, tomar decisiones sobre qué datos se muestran. Esta es la razón por la
que estas etiquetas de Liquid se conocen comúnmente como etiquetas de "flujo de
control".

Vale la pena señalar que, a diferencia de las etiquetas de salida, la inclusión de

etiquetas lógicas en sus plantillas no da como resultado que se represente nada
directamente, sino que nos permiten controlar exactamente lo que se representa.

Te encontrarás usando declaraciones if mucho en el desarrollo de

temas de Shopify. Aquí hay otro ejemplo:

{% si carrito.item_count > 0 %}
<p>Tiene {{ cart.item_count }} artículo(s) en su carrito
</p>
{% demás %}
<p>No hay nada en tu carrito :( ¿Por qué no echas un <a href= “/
products”>mira nuestra gama de productos</a></p>
{% endif %}

Este ejemplo demuestra cómo puede mostrar la cantidad de artículos en el carrito

de un visitante o generar un enlace a sus productos.

La lista completa de etiquetas de flujo de control que puede usar para crear condiciones
son:

• Si

• a no ser que

• demás

• si no

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber dieciséis

Machine Translated by Google

• caso

• cuando

Operadores
Notará que en este ejemplo estamos usando el operador mayor que >.
Como la variable cart.item_count devuelve el número de artículos en el carrito
del usuario actual, podemos comprobar si es mayor que cero, es decir, si tiene
artículos.

Si esto devuelve verdadero, podemos generar el mensaje con el recuento de

elementos actual; si no, podemos generar <p>No hay nada en su carrito :( ¿Por
qué no tener <a href=“/products”>mirar nuestra gama de productos</a></p> en
su lugar.

De hecho, podríamos refactorizar nuestro ejemplo con un filtro. Al usar el

filtro de pluralización, podemos generar un artículo o artículos dependiendo de
la cantidad de artículos en el carrito. La ventaja aquí es que no tenemos que

conoce el conteo para que Shopify genere la designación correcta:

{% si carrito.item_count > 0 %}
<p>Tienes {{ cart.item_count }} {{ cart.item_count | pluralize: 'item',
'items' }} en su carrito</p>
{% más %}
<p>No hay nada en tu carrito :( ¿Por qué no echas un <a href=
“/products”>mira nuestra gama de productos</a></p>
{% endif %}

Notará que el ejemplo refactorizado ahora incluye el filtro de pluralización que

toma dos parámetros. La primera es la palabra singular y la segunda el plural.

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 17

Machine Translated by Google

Si bien hemos usado el operador > en el ejemplo anterior, hay una amplia
gama de operadores de comparación en Liquid, que incluyen:

Operador Función

== es igual

!= no es igual

< mas grande que

> menos que

>= Mayor qué o igual a

<= Menos que o igual a

o condición A o condición B

y condición A y condición B

contiene incluye la subcadena si se usa en una cadena, o

el elemento si se usa en una matriz

Control de espacios en blanco

El control de espacios en blanco en Liquid le permite eliminar los espacios en

blanco generados por la salida de Liquid. En Liquid, puede usar un guión en su
blanco de la sintaxis, {{-, -}}, {%-, el lado
etiqueta
izquierdo
y -%}
o derecho
para eliminar
de unalosetiqueta
espacios en
representada.

De forma predeterminada, incluso si su código de Liquid no tiene salida, Liquid

en una plantilla seguirá representando una línea vacía en el HTML final.

Por ejemplo:
{% asignar mi_variable = “café” %} {{ mi_variable }}

salidas a:

café

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 18

Machine Translated by Google

Sin embargo, cuando incluye guiones en la sintaxis de su etiqueta,

este espacio en blanco se elimina del HTML representado.

Por ejemplo:
{%- asignar mi_variable = “café” -%} {{ mi_variable }}

salidas a:
café

Si usted es alguien a quien le gusta que su HTML se muestre sin espacios en blanco, como

regla general, puede optar por agregar guiones a toda la sintaxis de sus etiquetas de Liquid.

hoja de trucos líquidos

Si es como nosotros, tendrá dificultades para memorizar todos estos filtros,
operadores y estructuras de Liquid. Afortunadamente, lanzamos una hoja de trucos
de Shopify Liquid para usted, que es una base de datos de búsqueda de todos los
objetos, filtros y etiquetas de Liquid, que se vincula a la documentación del
desarrollador. Es un recurso indispensable, que le recomendamos encarecidamente
que marque como favorito y se familiarice con él.

Resumen
Hemos cubierto mucho terreno en este capítulo, pero esperamos que le haya
dado una sólida introducción a Liquid. Aquí hay un recordatorio de lo que cubrimos:

• Liquid es un lenguaje de plantillas que nos permite mostrar

datos en una plantilla.

• Liquid tiene construcciones como salida, lógica y bucles, y

se ocupa de las variables.

• Los archivos de Liquid son una mezcla de código HTML y

Liquid, y tienen la extensión de archivo .liquid.

• Los archivos de Liquid que se usan en un tema de Shopify son independientes y

no tienen ningún concepto de la tienda en la que se usan actualmente.

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 19

Machine Translated by Google

• Los dos tipos de delimitadores utilizados en Liquid.

• Cómo generar datos de una tienda en una plantilla.

• Cómo manipular datos con filtros y cómo vincular una hoja de estilo

en Shopify.

• Cómo recorrer una colección de Liquid para generar varios

elementos.

• El uso de la lógica y las etiquetas de flujo de control de Liquid.

• Los diferentes tipos de operadores utilizados para la comparación.

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 20

Machine Translated by Google

Capítulo 1 | Una descripción general de Liquid: lo que necesita saber 21

Machine Translated by Google

CAPITULO 2

Cómo
configurar un "local"
Tema Shopify
Desarrollo
Medioambiente
Muchos desarrolladores y diseñadores usan y aman el editor de temas
de Shopify en línea: es fácil trabajar con él y está convenientemente
ubicado dentro del propio administrador de Shopify. Pero si está
buscando desarrollar temas de Shopify localmente, debe saber que no está limitado
al editor de temas en línea.

Para configurar un entorno de desarrollo de temas de Shopify "local",

necesitará usar Theme Kit, una herramienta multiplataforma que le permite
interactuar fácilmente con la plataforma de Shopify, mientras usa todas sus
propias herramientas de desarrollo.

Una vez que se configura el kit de temas, puede integrar más fácilmente
herramientas de flujo de trabajo como Git en el desarrollo de su tema, lo que
le brinda la confianza para trabajar en un tema de Shopify con un equipo de
desarrolladores, trabajar dentro de su editor de texto favorito y tener una
experiencia más localizada. al editar temas. Theme Kit no es un entorno de
desarrollo verdaderamente local, ya que aún requiere una conexión a los
servidores de Shopify. Si está buscando una herramienta de desarrollo local
sin conexión, consulte Motifmate, que admite una opción sin conexión.

Capítulo 2 | Cómo configurar un entorno de desarrollo de temas de Shopify "local" 21

Machine Translated by Google

Instalar el kit de temas

Theme Kit es una herramienta multiplataforma para construir Shopify
Themes, creada por los empleados de Shopify. Theme Kit es un solo binario que no
tiene dependencias. Una vez que descargue Theme Kit, y con un poco de
configuración, estará listo para las carreras de creación de temas.

Algunas de las características notables de Theme Kit incluyen:

• Subir temas a múltiples entornos.

• Cargas y descargas rápidas.

• La capacidad de observar los cambios locales y subirlos

automáticamente a Shopify.

• Funciona en Windows, Linux y macOS.

Si está trabajando en Mac, puede usar homebrew para instalar Theme Kit
ejecutando los siguientes comandos:
grifo de cerveza shopify/shopify
kit de tema de instalación de cerveza

Si está trabajando en Windows, necesitará tener el Chocolatey

Package Manager instalado antes de ejecutar el siguiente comando:
kit de instalación de choco

Si tiene un sistema basado en Linux, puede usar el siguiente script de

instalación para descargar e instalar automáticamente el kit de temas más
reciente para usted:
curl -s https://shopify.github.io/themekit/scripts/
instalar.py | pitón sudo

Solución de problemas de versiones anteriores y pruebas

Capítulo 2 | Cómo configurar un entorno de desarrollo de temas de Shopify "local" 22

Machine Translated by Google

Instalación del kit temático

Antes de ejecutar cualquier comando del Kit de temas, asegúrese de estar utilizando
la versión más actualizada del Kit de temas. Si es la primera vez que instala Theme
Kit, puede ignorar las siguientes instrucciones.

Asegúrese de estar usando la versión más actualizada de Theme Kit ( puede

encontrar versiones aquí). Para actualizar el kit de temas, ejecute:
actualización del tema

Para probar que Theme Kit está instalado y funcionando, y para ver los comandos
disponibles, escriba:
tema --ayuda

Running theme --help debería mostrarte todos los comandos disponibles

y definiciones para el kit temático.

Capítulo 2 | Cómo configurar un entorno de desarrollo de temas de Shopify "local" 23

Machine Translated by Google

Configuración de credenciales de API

Una vez que el Kit de temas esté instalado, necesitaremos algunas cosas para
conectar nuestro tema local a su tienda Shopify existente. Necesitaremos una clave API,
contraseña e ID del tema.

Clave API y contraseña

Tendremos que configurar una clave API para agregar a nuestra configuración y
crear una conexión entre nuestra tienda y el Kit de temas. La clave API permite que
Theme Kit hable y acceda a su tienda, así como a sus archivos de temas.

Para hacerlo, debemos iniciar sesión en la tienda Shopify y crear una aplicación
privada. En Shopify Admin, ve a Aplicaciones y haz clic en el enlace Administrar
aplicaciones privadas en la parte inferior de la página. Desde allí, haga clic en Generar
credenciales de API para crear su aplicación privada. Deberá proporcionar un título; por
lo general, proporcionamos el nombre del cliente y el entorno para mayor claridad.
Asegúrese de configurar los permisos de las plantillas de tema y los activos de tema
para tener acceso de lectura y escritura para generar las credenciales de API adecuadas,
luego haga clic en Guardar.

Shopify cargará una nueva página, que le proporcionará una clave de API y una
contraseña únicas.

identificación del tema

Para conectar un tema existente, necesitamos el número de identificación del tema. Hay
algunas formas de obtener el número de identificación de su tema. La forma más rápida
es ir al Editor de temas, haciendo clic en Acciones > Editar código, y copiar el número
de identificación del tema de la URL; serán los últimos dígitos después de
mystore.myshopify.com/admin/themes/

Si desea crear un tema desde cero, puede hacerlo ejecutando lo siguiente en su línea
de comando, que crea un nuevo tema básico en el directorio en el que lo ejecuta:

tema nuevo --password=[tu-contraseña] --store=

[tu-tienda.myshopify.com]

Capítulo 2 | Cómo configurar un entorno de desarrollo de temas de Shopify "local" 24

Machine Translated by Google

Conectándolo todo con config.yml

Ahora podemos usar toda la información anterior para crear un archivo
config.yml en nuestro tema y luego descargar todo el tema localmente.
El config.yml es vital porque es el archivo que crea una conexión local
con el tema de su tienda Shopify.

Cree un directorio para que viva su tema ejecutando:

mkdir [tu-tema-nombre]

Luego, ingrese a ese directorio usando el siguiente comando:

cd [tu-tema-nombre]

Para crear el archivo config.yml, ejecute el siguiente comando desde

dentro de su directorio de temas, reemplazando los [marcadores de
posición de corchetes] con la información de su tema:
configuración del tema --password=[su-contraseña] --store=
[tu-tienda.myshopify.com] --themeid=[tu-tema-id]

Por ejemplo:
configurar el tema
--contraseña=01464d4e02a45f60a23193ffc3a8c1b3
--store=la-tienda-de-jabones.myshopify.com
--themeid=170199178

Esto creará automáticamente un archivo config.yml para usted. También puede

crear manualmente un archivo config.yml en el directorio con un editor de texto,
que se vería así:

Capítulo 2 | Cómo configurar un entorno de desarrollo de temas de Shopify "local" 25

Machine Translated by Google

También es útil agregar ignore_files al archivo config.yml, para evitar

sobrescribir la configuración del tema de un tema existente, así como otros
archivos que no desea sobrescribir en su tienda con su configuración local.

Por ejemplo, agregar lo siguiente anidado bajo el entorno en config.yml

ignorará settings_data.json:
ignorar_archivos:
-config/settings_data.json

Luego, puede ejecutar el siguiente comando para descargar y configurar su tema

existente en el directorio actual:
descarga de tema

Envía actualizaciones a tu tema

Ahora que se ha establecido la conexión con el tema de Shopify, puedes
ejecutar el siguiente comando en tu directorio de temas:
reloj temático

Theme Kit ahora observará cualquier cambio realizado en sus archivos

locales y los insertará automáticamente en su tema. Para cerrar la conexión
del reloj, simplemente escriba ctrl + c.

Si está buscando más información sobre el uso de Theme Kit, consulte

la documentación y otras características sorprendentes.

Capítulo 2 | Cómo configurar un entorno de desarrollo de temas de Shopify "local" 26

Machine Translated by Google

Resumen
Pasamos por varios pasos para configurar Theme Kit para desarrollarlo localmente.
Aquí hay un recordatorio de lo que cubrimos:

• Shopify es una plataforma alojada, por lo que Theme Kit le permite

sincronizar archivos de temas locales con su tienda Shopify.

• Cómo instalar Theme Kit en OSX, Linux y Windows.

• Cómo solucionar problemas de versiones anteriores de Theme Kit y confirmar

El kit de temas está instalado.

• Cómo generar las credenciales API requeridas para sincronizar su tema

con kit temático.

• Cómo generar un archivo config.yml utilizando la contraseña de su clave API, ID de

tema y URL de la tienda.

Capítulo 2 | Cómo configurar un entorno de desarrollo de temas de Shopify "local" 27

Machine Translated by Google

CAPÍTULO 3

Cómo se asignan las URL a

Plantilla Shopify

Una de las (muchas) características que nos encantan de trabajar con

los temas de Shopify es la estructura de carpetas simple. Cada tienda
puede funcionar con un solo archivo de diseño y un puñado de plantillas,
lo que significa que puede lograr mucho con poco: poder en simplicidad.

Sin embargo, si eres nuevo en los temas de Shopify, es posible que no sepas
exactamente cuándo se procesa cada plantilla o que sepas que la misma
plantilla se usa en varios lugares de la tienda.

Este capítulo se centrará en comprender las condiciones en las

que se representa cada plantilla en una tienda.

Capítulo 3 | Cómo se asignan las URL a las plantillas de Shopify 28

Machine Translated by Google

Asignación de plantillas de URL

Internamente, Shopify tiene su propia tabla de enrutamiento que determina qué plantilla

se muestra en función de la URL solicitada por el usuario. Si alguna vez ha utilizado uno de

los marcos de desarrollo populares, es posible que esté familiarizado con el concepto de

enrutamiento de URL. En pocas palabras: es una forma de determinar qué plantilla enviar

al navegador en función de la URL solicitada.

Mencionamos anteriormente que solo se requieren unas pocas plantillas para

impulsar una tienda. Cada una de estas plantillas sirve para una o más URL; en otras palabras,

podemos utilizar las mismas plantillas para varias URL. Desde una perspectiva de diseño, esto

nos permite reducir nuestros gastos generales cuando construimos una nueva tienda.

URL a plantillas
Aquí hay una descripción general de qué plantilla se representa según lo determinado

por la URL:

/thisisntarealurl ÿ 404.líquido
/blogs/{nombre-del-blog}/{identificación-del-artículo} ÿ artículo.líquido
/blogs/{nombre-del-blog} ÿ blog.liquid
/cart ÿ cart.liquid
/colecciones ÿ lista-colecciones.liquid
/colecciones/{handle-de-coleccion} ÿ collection.liquid
/colecciones/{handle-de-coleccion}/{etiqueta} ÿ collection.liquid
/ ÿ index.líquido
/páginas/{identificador de página} ÿ página.líquido
/productos ÿ lista-colecciones.liquid
/productos/{producto-identificador} ÿ producto.líquido
/search?q={término de búsqueda} ÿ search.liquid

Capítulo 3 | Cómo se asignan las URL a las plantillas de Shopify 29

Machine Translated by Google

Contraseña protegida
Es posible que haya notado que la plantilla password.liquid no está incluida
en la lista. Esta plantilla solo se ve si elige proteger con contraseña su
escaparate y, como tal, anulará todos los demás
URL.

Si su tienda está protegida con contraseña y no tiene una

contraseña.liquid plantilla en su tema, Shopify mostrará su página de inicio de
sesión de contraseña predeterminada en su lugar.

Plantillas alternativas
También vale la pena recordar que la tabla de enrutamiento anterior puede
verse afectado por plantillas alternativas, algo que cubriremos en un
capítulo posterior.

parámetros de URL
Como verá arriba, varias rutas tienen elementos de la ruta de la URL envueltos en
{ } que tendrán un impacto en. Hemos incluido
los datos estoen
cargados para
unadenotar una variable
plantilla.

Por ejemplo, si tomamos el patrón de URL /colecciones/{handle de

colección}, se cargará un conjunto diferente de datos en la plantilla y se enviará al
navegador si solicitamos /colecciones/
bikescompared en lugar de /colecciones/autos.

También notará que varios patrones de URL diferentes comparten el mismo

archivo de plantilla. Por ejemplo, /productos y
/colecciones representarán las colecciones de listas.

plantilla líquida. Del mismo modo, /collections/ {collection- , /colecciones/

handle}/ y /collections/{collection handle}/{tag}

de collection.liquid
hacen uso.

Capítulo 3 | Cómo se asignan las URL a las plantillas de Shopify 30

Machine Translated by Google

nota final
Si alguna vez no está seguro de qué plantilla se está procesando, hay una forma
muy sencilla de comprobarlo.

Todo lo que necesita hacer es agregar {{ template }} a su

archivo theme.liquid y comience a navegar por su tienda. Esta variable global
de Shopify generará la plantilla representada actualmente menos la extensión .liquid.
Es una buena manera de estar doblemente seguro de que sus plantillas funcionan
como se espera.

Aquí hay un ejemplo útil que puede usar en su propio desarrollo de tema
con el resultado que se muestra en la captura de pantalla a continuación:

<p style=“fondo: #f1c40f; relleno: 1em; font-weight: bold;”>Plantilla

actual: {{ template }}.liquid</p>

Capítulo 3 | Cómo se asignan las URL a las plantillas de Shopify 31

Machine Translated by Google

CAPÍTULO 4

El
producto.líquido
Modelo

Hasta ahora, en nuestro libro, hemos visto cómo se asignan las URL
en nuestras plantillas de Shopify. En este capítulo, nos gustaría analizar
más a fondo una plantilla en particular: product.liquid .

Si eres nuevo en los temas de Shopify, product.liquid es la plantilla que

se representa de forma predeterminada cada vez que un cliente ve una
página de detalles del producto. En el próximo capítulo, veremos cómo
crear plantillas de productos alternativas; sin embargo, en este capítulo
nos ceñiremos a la plantilla básica, que se encuentra en la carpeta de
plantillas dentro de un tema de Shopify.

Capítulo 4 | La plantilla 'producto.líquido' 32

Machine Translated by Google

A modo de ejemplo, vamos a utilizar la plantilla product.liquid de nuestro

propio tema inicial "Traje de cumpleaños".

Aquí está en su totalidad:

<h2>{{ producto.título }}</h2>

<p>{{ producto.descripción }}</p>
{% formulario 'producto', producto %}
<seleccione nombre="id">
{% para variante en producto.variantes %}
<option value=“{{ variant.id }}”> {{ variant.title }}- {{ variant.price | dinero }}</
opción>
{% endfor %}
</seleccionar>

< tipo de botón=“enviar” {% a menos que producto.disponible %} deshabilitado

=“deshabilitado” {% endunless % } >
{% si producto.disponible %}
<p>Agregar al carrito</p>
{% más %}
<p>Agotado </p>
{% endif %}
</botón>
{% endform %}

Como verá, hay muy poco HTML en esta plantilla. Esto es a propósito, ya
que pretende ser un punto de partida para su propio tema.
Si descarga un tema de Shopify Theme Store, notará que la plantilla product.liquid
estará más involucrada.

Examinemos lo que está sucediendo en detalle. Comenzamos usando la

salida de Liquid para mostrar el título y la descripción del producto:
<h2>{{ producto.título }}</h2>
{{ producto.descripción }}

Como la descripción se ingresa a través de Shopify Admin, no necesitamos

envolver este resultado con más HTML. Por supuesto, si necesita agregar un
elemento contenedor de algún tipo, puede hacerlo.

Capítulo 4 | La plantilla 'producto.líquido' 33

Machine Translated by Google

Descendiendo en la plantilla, llegamos a la etiqueta Liquid form, que crea un

elemento HTML <form> junto con los elementos <input> requeridos para enviar
el formulario a un punto final en particular, en este caso para agregar un producto al
carrito. Hay una variedad de parámetros diferentes que se pueden agregar a la
etiqueta del formulario, según el tipo de formulario que esté utilizando. Puede obtener
más información sobre la etiqueta de formulario en nuestros documentos para
desarrolladores.

A continuación, agregamos un elemento de selección que generará una opción

desplegable para elegir una variante del producto. Dentro de este elemento, creamos
un bucle for para iterar sobre todas las variantes del producto actual y mostrar el
precio de la variante, con formato de moneda, gracias al filtro de dinero.

Por último, para permitir que los compradores envíen este formulario, crearemos
una entrada de botón con el atributo type=”submit” dentro de las etiquetas del
formulario. Usamos la etiqueta de flujo de control a menos que configure una
condición que deshabilita el botón Agregar al carrito si el producto no está disponible.
Si el producto tiene inventario y, por lo tanto, está disponible, el botón dirá "Agregar
al carrito", de lo contrario, dirá "Agotado".

Completamos la plantilla cerrando el formulario con la etiqueta Liquid {%

endform %}.

{% para variante en producto.variantes %}

{% si variante.disponible == verdadero %}
<option value=“{{variant.id}}”> {{ variant.title }} para {{ variant.price |
dinero_con_moneda }}</opción>
{% más %}
<option disabled=“disabled”> {{ variant.title }} - ¡Agotado !</
option>
{% endif %}
{% endfor %}

Esta plantilla utiliza tanto el producto como los objetos variantes . Tienen una gran
variedad de propiedades que puedes mostrar en esta plantilla y vale la pena
investigarlas a medida que desarrollas tus habilidades con el tema de Shopify.

Capítulo 4 | La plantilla 'producto.líquido' 34

Machine Translated by Google

Extendiendo la plantilla
Por supuesto, este ejemplo es relativamente simple y pretende ser un
punto de partida para su propio desarrollo. Hay mucho más que podrías
incluir en esta plantilla:

• Adición de código Liquid para mostrar imágenes de productos y variantes.

• Usar el fragmento de JavaScript de Shopify option_selection.js

para permitir una mejor visualización de las opciones de variantes.

• Usando el | filtro t para recuperar cadenas traducidas de

el archivo de configuración regional de su tema.

• Incluir secciones o fragmentos para extraer código de otros archivos.

Capítulo 4 | La plantilla 'producto.líquido' 35

Machine Translated by Google

CAPÍTULO 5

Cómo utilizar
Alterno
Plantillas

Si eres nuevo en la creación de temas de Shopify, tu primera impresión

podría ser que cada colección, página y página de producto está
controlada por una sola plantilla. Afortunadamente, este no es el caso
y, de hecho, hay varias formas de aplicar plantillas diferentes o
alternativas a estos distintos tipos de página.

Este capítulo lo guiará a través de los conceptos básicos para crear

su primera plantilla alternativa para que pueda comenzar a personalizar
aún más sus temas de Shopify.

Capítulo 5 | Cómo usar plantillas alternativas 36

Machine Translated by Google

Creación de una plantilla alternativa

Crear una plantilla alternativa es sencillo. Hay dos enfoques.

Si está utilizando el kit de temas o está cargando su tema mediante un archivo ZIP,
simplemente puede agregar un archivo a la carpeta de plantillas de su tema utilizando la
siguiente sintaxis de nombre de archivo:

default_template_name.*.liquid

Por ejemplo, una plantilla de página alternativa podría llamarse:

página.sobre.líquido

O, para una plantilla de producto alternativa, podría usar:

producto.zapatos.liquido

El nombre en sí es irrelevante: cuanto más obvio, mejor para que sus clientes puedan

reconocer su propósito fácilmente.

El segundo enfoque es crear una plantilla alternativa dentro de Shopify Admin.

Así es cómo:

1. Desde tu panel de control de Shopify, haz clic en Tienda en línea,

luego haga clic en Temas.

2. Busque el tema que desea editar, haga clic en Acciones,

luego haga clic en Editar código.

3. En la carpeta de plantillas, haga clic en el enlace

Agregar una nueva plantilla .

4. Elija la opción adecuada para su nueva plantilla

y darle un nombre significativo.

5. Edite y guarde su nueva plantilla como lo haría normalmente.

Una descripción completa y un recorrido están disponibles en el

Documentación de Shopify.

Capítulo 5 | Cómo usar plantillas alternativas 37

Machine Translated by Google

Selección de una plantilla alternativa

Una vez que exista una plantilla alternativa, aparecerá un nuevo menú desplegable
en la página de edición correspondiente en Shopify Admin. Esto le permitirá
seleccionar qué plantilla le gustaría aplicar a la colección, página o producto. Shopify
usará la plantilla base de forma predeterminada, por lo que no necesitará cambiar
todos los elementos existentes, solo los que desea que se representen con la nueva
plantilla alternativa.

Cambiar plantillas a través de la URL

Finalmente, hay otra opción para la selección de plantillas que tiene a su disposición.
Eso es poder seleccionar una plantilla en particular usando la cadena de consulta de
vista.

Aquí hay un ejemplo para que lo revise (estos enlaces son solo para fines de
demostración):
http://store.myshopify.com/products/blue-t
camiseta?view=especial

En este caso, Shopify cargará una plantilla de producto llamada:

producto.especial.liquido

Capítulo 5 | Cómo usar plantillas alternativas 38

Machine Translated by Google

Esta técnica funciona para todas las plantillas. Aquí hay un ejemplo de
página de colección:
http://tienda.myshopify.com/colecciones/
ordenadores?view=list

En este caso, Shopify cargará una plantilla de colección llamada:

colección.lista.líquido

Si la plantilla solicitada no existe, Shopify fallará correctamente y usará la plantilla

predeterminada o la plantilla especificada en el administrador.

Un caso de uso muy común para esta técnica es cambiar entre una lista y una
vista de cuadrícula dentro de una colección de productos.

Plantillas alternativas con secciones

Según su tema y el tipo de plantilla que haya creado, es posible que deba
crear un nuevo archivo de sección. Si su nueva plantilla contiene el código
que desea editar, no será necesario crear una sección. En este caso,
simplemente puede editar su nueva plantilla según sea necesario.

Sin embargo, si su nueva plantilla incluye una etiqueta de Liquid para una sección
que contiene el código que desea editar, deberá crear una nueva sección para
ese código alternativo.

Por ejemplo, si está creando una plantilla de producto alternativa, deberá

crear una nueva sección, ya que la mayor parte del código que compone la página
del producto se almacena en un archivo de sección, en lugar del archivo de plantilla.

En su archivo de plantilla, puede encontrar: {% section 'product template'

%}

Reemplace product-template con el nombre de la nueva sección que creará a

continuación. Por ejemplo, si llama a su nueva sección product-alternative , su
código debería verse así: {%
sección 'producto-alternativo' %}

Capítulo 5 | Cómo usar plantillas alternativas 39

Machine Translated by Google

Comience a implementar plantillas alternativas hoy

Las plantillas alternativas son un gran ejemplo del poder de los temas
de Shopify. Al tomarse unos minutos para comprender cómo crearlos,
aplicarlos e incluso cambiarlos a través de una cadena de consulta,
comienza a exponer el poder de la plataforma y ofrece a sus clientes, y a
sus clientes, experiencias de comercio electrónico aún más ricas.

Capítulo 5 | Cómo usar plantillas alternativas 40

Machine Translated by Google

CAPÍTULO 6

El poder
de suplente
Archivos de diseño

Nuestro capítulo anterior se centró en cómo crear y usar plantillas alternativas

al crear temas de Shopify. Ahora dirijamos nuestra atención a los archivos de

diseño de Liquid.

Si no está familiarizado con los diseños, encontrará el archivo predeterminado, el tema.

liquid , en la carpeta de diseños dentro de su directorio de temas. Si nunca has

visto uno antes, te estarás preguntando qué está pasando.

El archivo theme.liquid se puede considerar como la plantilla maestra para su

tienda. Efectivamente, es un contenedor para todas nuestras otras plantillas que se

encuentran en la carpeta de plantillas. Como regla general, los elementos que se

repiten en un tema (p. ej., navegación del sitio, encabezado, pie de página, etc.) a
menudo se colocarán dentro de theme.liquid .

Depende totalmente del diseñador del tema decidir cuánto código se incluye en
un archivo de diseño. Por ejemplo, algunos desarrolladores a menudo prefieren
tener ciertos elementos de un archivo de diseño incluidos como fragmento o
sección, ya que esto les permite reutilizarlos en archivos de diseño alternativos, un

tema que trataremos en breve. Solo recuerda que todas las páginas representadas
en un tema de Shopify, a menos que se indique lo contrario, se basarán en el
archivo de diseño predeterminado theme.liquid .

Capítulo 6 | El poder de los archivos de diseño alternativos 41

Machine Translated by Google

Los beneficios de los archivos de diseño

Uno de los principales beneficios de los archivos de diseño es que nos permiten
seguir el principio DRY (Don't Repeat Yourself). Al tener todos nuestros
elementos comunes en un solo archivo, nos permite hacer cambios globales
muy fácilmente. Otro beneficio es que nuestras plantillas ( product.liquid ,
collection.liquid , etc.) no están abarrotadas de marcas que se repiten en toda
la tienda.

Creación de un archivo de diseño

Independientemente de la cantidad de HTML que incluya en un archivo de

diseño, hay dos etiquetas importantes de Liquid que debe incluir en un archivo de
diseño de Shopify:

1. {{ content_for_header }} debe colocarse entre

la etiqueta de apertura y cierre <head>. Esto inserta los scripts
de Shopify necesarios en el <head>, que incluye scripts para Google
Analytics, análisis de Shopify, aplicaciones de Shopify y más.

2. {{ content_for_layout }} debe colocarse entre

la etiqueta de apertura y cierre <body>. Esto genera
contenido dinámico generado por todas las demás plantillas
( index.liquid , product.liquid , etc.).

theme.liquid , junto con sus dos etiquetas de marcadores de posición requeridas,

son necesarios para que Shopify valide un tema.

Diseños alternativos

Un archivo de diseño no cubrirá todas las eventualidades, y habrá

situaciones en las que necesitará un diseño completamente diferente.
Podría comenzar a ocultar elementos con CSS, pero eso se siente un poco
mal: el enfoque mucho mejor es crear un diseño alternativo completo con un
marcado HTML diferente.

Capítulo 6 | El poder de los archivos de diseño alternativos 42

Machine Translated by Google

Un buen ejemplo de esto es una página de destino específica para un producto

o una página de suscripción a un boletín informativo que no requiere los mismos
"muebles del sitio" que el resto del sitio. En estas situaciones, es posible designar que
la página de destino se represente con un archivo de diseño "alternativo".

Crear un diseño alternativo es muy sencillo. Lo primero que debe hacer es crear un
nuevo archivo y darle un nombre relevante y la extensión .liquid. Luego, guárdelo en
la carpeta de diseños en su directorio de temas.
En este archivo, coloque cualquier HTML que necesite (por ejemplo, declaraciones HTML, CSS,

enlaces JS, etc.) junto con los dos marcadores de posición discutidos anteriormente.

Para usar este archivo de diseño y anular efectivamente el archivo de diseño

predeterminado theme.liquid, usamos la siguiente sintaxis de Liquid como la primera
línea en cualquier archivo de plantilla ( index.liquid , product.liquid , etc.):

{% diseño 'alternativo' %}

En este caso, no se aplicará el theme.liquid predeterminado, sino el diseño llamado

alternativo.liquid.

También es posible solicitar que no se aplique el archivo de diseño.

La sintaxis para solicitar que no se aplique un archivo de diseño es:
{% diseño ninguno %}

Esta debe ser la primera línea en la parte superior de la plantilla correspondiente

( index.liquid , product.liquid , etc.). Un caso de uso para esto podría ser cuando se
procesa la salida de su tienda en una sintaxis alternativa como JSON.

Usar fragmentos para ser aún más SECO

Si sabemos que un tema utilizará varios diseños, a menudo eliminamos el
código del archivo de diseño y lo colocamos en un fragmento. Esto significa que
podemos reutilizar el código en múltiples diseños. Por ejemplo, a menudo tenemos la
siguiente estructura:

Capítulo 6 | El poder de los archivos de diseño alternativos 43

Machine Translated by Google

fragmentos/html-header.liquid Contiene toda la cabeza esencial.

elementos hasta el cuerpo de apertura

etiqueta.

fragmentos/html-footer.liquid Contiene cualquier etiqueta de secuencia de comandos

relevante y la etiqueta del cuerpo de cierre.

fragmentos/header.liquid El encabezado principal que se utiliza en

la mayor parte del sitio.

fragmentos/pie de página.líquido El pie de página principal que se utiliza en la mayor

parte del sitio.

Para usarlos, nuestro archivo de diseño base se vería de la siguiente manera:

{% renderizar encabezado html %}

{% encabezado de representación %}
{% render pie de página
%} {% render html-pie de página %}

El beneficio de este enfoque es que cuando crea un archivo de diseño alternativo, no

necesita volver a crear todo el contenido de su encabezado y pie de página HTML, lo que

significa que puede actualizarlo todo desde dos archivos.

Si solo está utilizando uno o dos diseños, quizás sea excesivo. Veremos más de cerca cómo

funcionan los fragmentos con los temas de Shopify en el capítulo 8.

Comienza a usar diseños alternativos en tu flujo de

trabajo de desarrollo de temas de Shopify
Los archivos de diseño alternativo pueden ser extremadamente útiles cuando necesita

un marcado radicalmente diferente para una página o conjunto de páginas en particular.

Junto con el uso de plantillas alternativas, es una herramienta poderosa en su caja de

herramientas de creación de temas y, literalmente, le brinda infinitas posibilidades para

personalizar la apariencia de una tienda.

Capítulo 6 | El poder de los archivos de diseño alternativos 44

Machine Translated by Google

CAPÍTULO 7

Usar listas de
enlaces en tu Shopify
Temática

Una de las funciones menos utilizadas en Shopify son las listas de enlaces.
Como sugiere su nombre, una lista de enlaces es una simple colección de
enlaces. Los elementos de enlace se pueden crear para apuntar a una página,
colección o producto dentro de Shopify, o a una URL fuera del dominio de la tienda.

Es posible usar una lista de enlaces por una variedad de razones. En este
capítulo, examinaremos un caso de uso común de un tema: navegación anidada
usando una lista desordenada. Mediante el uso de listas de enlaces y Liquid,
tendremos control total sobre el menú desde el administrador, lo que brinda
flexibilidad al comerciante que administra la tienda.

Capítulo 7 | Usar listas de enlaces en tu tema de Shopify 45

Machine Translated by Google

Creación de una navegación anidada

Shopify agregó la capacidad de crear un menú de navegación anidado, hasta tres niveles de

profundidad desde una sola página, mediante el uso de una nueva interfaz de edición de menús.

Anteriormente, los menús se creaban utilizando varios menús y el identificador de cada menú

para vincularlo a su enlace de menú principal. En el momento de escribir este artículo, todas las

tiendas recién creadas tienen la nueva interfaz de usuario de menús anidados, donde puede

arrastrar, soltar y anidar elementos de menú fácilmente.

Si bien es común incluir la navegación en un archivo de diseño, el predeterminado es theme.liquid ,

puede probar el concepto de navegación anidada en cualquier plantilla.

Creación de menús
Comenzaremos creando un nuevo menú, nuestro menú principal, dirigiéndonos a la pestaña

Navegación en Shopify Admin, que se encuentra en

el enlace de la tienda en línea en la barra lateral.

Todas las tiendas nuevas tienen un menú predeterminado predefinido llamado "Menú principal".

Para agregar elementos a la lista, simplemente haga clic en el botón Agregar otro enlace y

asigne a su nuevo elemento un "nombre de enlace" y un destino. El menú desplegable de

selección le permitirá vincular fácilmente a secciones internas, como un producto o colección en

particular. Alternativamente, puede ingresar su propia URL (ya sea interna o externa) eligiendo

"dirección web" de las opciones.

Una vez que tengamos esto en su lugar, podemos comenzar a considerar el código de Liquid que

necesitaremos para generar esto en nuestro tema.

Puede arrastrar y soltar elementos de menú anidados para crear una navegación de varios

niveles, y con algo de JavaScript y CSS puede diseñarlo fácilmente en un "supermenú" o

"menú desplegable".

Capítulo 7 | Usar listas de enlaces en tu tema de Shopify 46

Machine Translated by Google

Salida del menú

Para generar el menú en un archivo de tema, necesitaremos conocer el identificador
del menú. Como se discutió en otros capítulos, los identificadores son identificadores
únicos dentro de Shopify para productos, colecciones, listas de enlaces y páginas.

Comencemos con la salida de todos los elementos de la lista de enlaces del menú principal.
Podemos usar un bucle for simple que hemos usado muchas veces antes para generar
los elementos de la lista de enlaces a su vez:

<ul>
{% para enlace en linklists.main-menu.links %}
<li><a href= “{{ enlace.url }}”>{{ enlace.título }}</a></li>
{% endfor %}
</ul>

Esta sintaxis de Liquid no es nueva para nosotros, sin embargo, vale la pena examinar
la sección inicial de Liquid:
{% para enlace en linklists.main-menu.links %}

Una vez más, estamos usando el enlace variable para contener los datos relacionados
con cada elemento en la lista de enlaces, mientras recorremos todos los elementos. Para
acceder a los datos, necesitamos acceder a todos los enlaces en la lista de enlaces con un
manija del menú principal.

Recuerda, el menú principal predeterminado que existe en una tienda Shopify tiene
el mango del menú principal , por eso se usa arriba. Si nuestra sintaxis se
el menú tenía un identificador de marcas del Reino Unido , refactorizara como:

{% para enlace en linklists.uk-brands.links %}

Cada elemento de enlace tiene propiedades que incluyen:

• URL

• título

Capítulo 7 | Usar listas de enlaces en tu tema de Shopify 47

Machine Translated by Google

En nuestro ejemplo anterior, {{ link.url }} generará la URL que ingresamos o

generamos en el administrador, y {{ link.title }} generará el texto que atribuimos al
enlace.

Navegación multinivel
Ahora que tenemos la estructura básica de Liquid para un menú de un solo nivel,
debemos considerar cómo crear un submenú para nuestros elementos de nivel superior.
En primer lugar, debemos regresar a Shopify Admin y crear nuestro primer submenú.

Puede que no esté 100 por ciento claro inicialmente, pero cada enlace en una lista de
enlaces, además del menú en sí, tiene un identificador único al que tenemos acceso en
Liquid.

Echemos un vistazo a un ejemplo. Si nuestro menú principal tiene tres niveles de

enlaces, podría verse de la siguiente manera:
• Casa

• Sobre nosotros

• Mujeres

Accesorios

§ Pendientes
§ Bufandas

Lo bueno de usar menús anidados en Shopify es que los elementos de menú anidados se
pueden obtener directamente desde su enlace principal usando Liquid.
Esto simplifica en gran medida el marcado necesario para representar un menú anidado,
lo que significa que no necesita conocer el identificador del padre para representar a sus
hijos.

Capítulo 7 | Usar listas de enlaces en tu tema de Shopify 48

Machine Translated by Google

Aquí hay un ejemplo de cómo podemos usar estos identificadores relacionados para generar

un menú anidado profundo de tres niveles:

<ul class="padre">
{% para enlace en linklists.main-menu.links %}
<li><a href=“{{ enlace.url }}”>{{ enlace.título }}</a>
{% si enlace.enlaces ! = en blanco %}
<ul class=“niño”>
{% for child_link in link.links %} <li><a href=
“{{ child_link.url }}”>{{ child_link. título }}</a>

{% si enlace_hijo.enlaces ! = en blanco %}
<ul class=“nieto”>
{% para grandchild_link en child_link.links %}
<li><a href= “{{ grandchild_link.url }}”>{{ gran
child_link.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>

Notarás que ahora estamos introduciendo una instrucción if en nuestro ejemplo

refactorizado, directamente después de generar el primer nivel de nuestro principal
menú:

{% si enlace.enlaces! = en blanco %}

Esta declaración if verifica si hay un enlace secundario para el enlace actual

el elemento en nuestro bucle existe. Si existe, la plantilla avanza y recorre todos

los elementos del submenú.

Además, en este ejemplo manejamos el submenú child_link y un submenú

grandchild_link de la misma manera, verificando con una declaración if para ver
si hay un enlace secundario para el enlace actual.

Capítulo 7 | Usar listas de enlaces en tu tema de Shopify 49

Machine Translated by Google

elemento, y si existe, la plantilla recorre y genera el submenú.

En el ejemplo anterior, child_link es solo una variable de bucle for que

usamos para representar el elemento actual en el bucle; podría reemplazarse
fácilmente con sub_link y grandchild_link con sub_
sub_enlace. Hemos usado hijo y nieto en este caso para ilustrar la jerarquía
de la navegación anidada un poco más claramente.

Toques finales
Nos gustaría mencionar rápidamente una propiedad de enlace adicional
que será muy útil al crear menús: link.active y link.child_
activo . Ambas son propiedades booleanas (verdadero/falso) que le permiten
saber fácilmente si la página actual está activa, así como si sus elementos
anidados están activos. Aquí está la sintaxis:
{% if link.active %} class=”active {% if link.child_
activo %}hijo- activo{% endif %}”{% endif %}

En este ejemplo, agregaremos una clase CSS de activo si la página actual

La URL es la misma que el elemento de la lista y una clase de niño activo si

Capítulo 7 | Usar listas de enlaces en tu tema de Shopify 50

Machine Translated by Google

la página actual también forma parte del elemento anidado activo. Aquí está el
ejemplo de código completo para completar:

<ul class="padre">
{% para enlace en linklists.main-menu.links %}
<li {% if link.active %}class=“active {% if link.child_ac tive %}child-active{%
endif %}”{% endif %}><a href=“{{ link.url }} ”>{{ enlace.título }}</a>

{% si enlace.enlaces ! = en blanco %}
<ul class=“niño”>
{% for child_link in link.links %} <li {% if
child_link.active %}class="active {% if
child_link.child_active %}child-active{% endif %}”
{% endif %}><a href= “{{ child_link.url }}”>
{{ child_link.título }}</a>
{% si enlace_hijo.enlaces ! = en blanco %}
<ul class=“nieto”>
{% para grandchild_link en child_link.links %}
<li {% if grandchild_link.active %} class="activo
{% if grandchild_link.child_active %}child-
activo{% endif %}”{% endif %}><a href= “{{ gran
child_link.url }}”>{{ grandchild_link.title }}
</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>

Capítulo 7 | Usar listas de enlaces en tu tema de Shopify 51

Machine Translated by Google

Resumen
Las listas de enlaces son un elemento muy poderoso de la plataforma Shopify. Tener
la capacidad de crear una matriz de elementos de lista que se pueden cambiar en el
administrador le brinda mucha flexibilidad. Hemos visto a los desarrolladores de temas
usarlos mucho más allá de las estructuras de menú. Saber cómo crear una navegación
anidada que luego se puede diseñar con CSS es una gran herramienta para tener a
su disposición.

Capítulo 7 | Usar listas de enlaces en tu tema de Shopify 52

Machine Translated by Google

CAPÍTULO 8

Usar fragmentos
en tu Shopify
Temática

Si ha trabajado con lenguajes del lado del servidor, ya estará familiarizado

con el concepto de parciales o inclusiones. En Shopify, las inclusiones/
parciales se conocen como fragmentos.

Capítulo 8 | Usar fragmentos en tu tema de Shopify 53

Machine Translated by Google

Para ayudarlo a comprender cómo Shopify los usa, aquí hay una breve descripción:

• Los fragmentos son archivos que contienen fragmentos de código reutilizable.

• Residen en la carpeta de fragmentos.

• Tienen la extensión .liquid.

• Se utilizan con mayor frecuencia para el código que aparece en más de

una página, pero no en todo el tema.

• Se incluyen en una plantilla usando el procesamiento de etiquetas

de Liquid. Por ejemplo: {% render 'snippet name' %} .

• No necesita agregar la extensión .liquid cuando

haciendo referencia al nombre del fragmento.

• Los ejemplos de fragmentos incluyen enlaces sociales y

bloques de paginación.

Uso avanzado de fragmentos

Los fragmentos son extremadamente útiles y le permiten mantener el código repetido
en un solo archivo. Sobre todo, esto tiene la ventaja de permitirnos actualizar todas
las instancias de ese código desde un archivo.

Usamos mucho fragmentos cuando diseñamos temas. El principal beneficio que

encontramos es que nos permiten concentrarnos en fragmentos discretos de código, en
lugar de tratar con archivos largos. Dado que no hay desventajas en el rendimiento,
encontramos que es solo una buena forma de trabajar.

Por supuesto, todos tienen un estilo de flujo de trabajo diferente. Pero más allá de
los beneficios estéticos y organizativos de los fragmentos, existen otras razones
por las que podría considerar usarlos.

Capítulo 8 | Usar fragmentos en tu tema de Shopify 54

Machine Translated by Google

Carga condicional de fragmentos

Un ejemplo de un uso alternativo de un fragmento es la carga condicional.
Por ejemplo, supongamos que queremos mostrar una caja de oferta especial para un

conjunto de productos en particular, cada uno de los cuales tiene una taza de café en el asa
del producto.

Cada objeto dentro de Shopify tiene un identificador único. En otras

plataformas, como WordPress, esto se conoce como slug. Un identificador

es una representación segura de URL de un objeto. Cada producto tiene un identificador

que se crea automáticamente en función del título del producto, pero tiene la posibilidad de

manipular el identificador en el administrador para que sea lo que desee.

me gusta.

Dada su naturaleza única, los identificadores son fáciles de usar en las plantillas

de Shopify para comparar. Mediante el uso de una declaración simple de Liquid if,
podemos verificar el identificador de productos actual y tomar una decisión sobre si incluir

o no el fragmento.

Aquí hay un ejemplo para explicar el concepto que se colocaría en product.liquid:

{% si product.handle contiene "taza de café" %} {% render "oferta especial"

%}
{% terminara si %}

Como puede ver, esta declaración if verifica el identificador de productos vistos

actualmente. Si el valor devuelto contiene taza de café , la plantilla incluirá el fragmento

de

oferta especial . Si el valor devuelto

no coincide, la plantilla simplemente seguirá renderizándose.

Este es un ejemplo muy simple de carga condicional, pero muestra cómo

podemos usar el poder de Liquid para generar diferentes marcas según el producto. Al

usar este método simple, puede crear temas extremadamente flexibles.

Capítulo 8 | Usar fragmentos en tu tema de Shopify 55

Machine Translated by Google

Convenciones de nombres
Como se mencionó anteriormente, la carpeta de fragmentos actúa como un gran
depósito para todos los archivos de fragmentos de su tema. Como resultado, tendemos a
prefijar nuestros archivos con su función para que trabajar con ellos sea más limpio y fácil.

Por ejemplo:

• producto-edición-limitada-taza-de-café.líquido

• producto-escaparate.líquido

• colecciones-tazas-de-café.líquido

Notará que estos están muy en línea con las convenciones de nomenclatura de
plantillas, lo que hace que sea mucho más fácil integrarlos en su flujo de trabajo.

Alcance variable
Cuando un fragmento se procesa en un archivo de plantilla, el código que
contiene no tiene acceso automáticamente a las variables asignadas mediante
etiquetas de variable dentro de la plantilla principal del fragmento. Del mismo modo,
el código fuera del fragmento no puede acceder a las variables asignadas dentro del
fragmento.

Sin embargo, ¿qué sucede si deseamos utilizar un fragmento y hacer referencia

a una variable que es una variable de plantilla? Para lograr esto, simplemente
usamos la etiqueta de Liquid {% asignar %} y listamos las variables como
parámetros en la etiqueta de representación.

Aquí hay un ejemplo:

{% asignar mi_variable = 'manzanas' %} {% render
'nombre', mi_variable: mi_variable, mi_otra_
variable: 'naranjas' %}

El fragmento ahora tendrá acceso tanto a la variable manzanas como a la

variable naranjas. También podríamos hacer una colección Liquid

Capítulo 8 | Usar fragmentos en tu tema de Shopify 56

Machine Translated by Google

disponible en el siguiente formato: {% asignar all_products =

colecciones.all.products %} {% render 'snippet' %}

usando con
Para completar nuestra mirada a los fragmentos, dediquemos un tiempo a ver un
ejemplo que usa el parámetro de etiqueta de procesamiento con . Este enfoque
realmente muestra el poder de los fragmentos y nos permite crear código reutilizable
que se puede usar en una variedad de contextos.

Para establecer la escena, digamos que tenemos un fragmento que nos permite
generar una colección de productos en una plantilla. Aquí hay un ejemplo muy
básico que podríamos guardar como collection-product-list.liquid :

<ul>
{% para producto en colecciones.todos.productos %}
<li><a href=“{{ producto.url }}”>{{ producto.título }}</a>
{% endfor %}
</ul>

Dado que la variable de colecciones es global, funcionará según lo previsto en

cualquier plantilla. Este fragmento simplemente genera una lista desordenada de
enlaces a cada producto en la tienda.

Capítulo 8 | Usar fragmentos en tu tema de Shopify 57

Machine Translated by Google

¿Y si quisiéramos hacer posible trabajar con cualquier colección de

productos individuales? Para lograr esto, necesitamos refactorizar el
fragmento para:

<ul>
{% para el producto en la colección-lista-de-productos %}
<li><a href=“{{ producto.url }}”>{{ producto.título }}</a>
{% endfor %}
</ul>

Notará que en lugar de recorrer cada elemento de la colección

collections.all.products.liquid, tenemos una variable de marcador de
posición que tiene el mismo nombre que nuestro fragmento, menos la
extensión .liquid.

Echemos un vistazo a cómo hacemos uso de este fragmento más genérico:

{% asignar c = colecciones.todos.productos %} {% renderizar
'lista-de-productos-de-colección' con c %}

En primer lugar, estamos asignando la colección.todos.los.productos a

una variable de Liquid. En este caso, se llama c pero puede nombrarse
como mejor le parezca.

A continuación, pasamos a la etiqueta de representación y hacemos

referencia al fragmento sin la extensión .liquid, siguiéndolo con c .
El parámetro with asigna un valor a una variable dentro de un fragmento que
comparte el mismo nombre que el fragmento. Si bien esto puede parecer
confuso al principio, eche un vistazo rápido al ejemplo anterior que tiene la
siguiente línea:
{% para el producto en la colección-lista-de-productos %}

Efectivamente, lo que sucede es que se hace referencia a la variable c dentro

del fragmento mediante collection-product-list . Como tal, nuestro fragmento

Capítulo 8 | Usar fragmentos en tu tema de Shopify 58

Machine Translated by Google

ahora funcionará con cualquier colección de productos que pasemos usando el

con parámetro

Extendiendo nuestro fragmento genérico

También es posible pasar más de una variable a nuestro fragmento.
Un buen ejemplo de esto es la cantidad de productos a mostrar. Podemos lograr
esto en nuestro fragmento usando una cláusula de límite en el
en bucle.

Aquí está el fragmento refactorizado:

<ul>
{% para el producto en el límite de la lista de productos de la
colección : limit_count %}
<li><a href=“{{ producto.url }}”>{{ producto.título }}</a> {% endfor %}

</ul>

Y así es como pasaríamos un valor para que nuestra cláusula de límite

haga referencia:

{% asignar c = colecciones.todos.productos %} {% renderizar 'lista-

de-productos-de-colección' con c, limit_
recuento: 2 %}

Cuando se procesa el fragmento, saldrá después del segundo ciclo. Esto hace que
nuestro fragmento sea aún más genérico y nos permitirá usarlo en una variedad de
situaciones.

Tenga en cuenta que omitir esta variable significará que todos los elementos de la
colección Liquid se iteran. Además, si limit_count es mayor que el número de elementos
de la lista, saldrá del bucle for después del elemento final de la lista.

Capítulo 8 | Usar fragmentos en tu tema de Shopify 59

Machine Translated by Google

Puede pasar más variables separándolas con comas después del

parámetro with. Por ejemplo:
{% render 'colección-producto-lista' con c, limit_
recuento: 2, texto_título: 'Todos los productos' %}

Puede generar el texto_título dentro del fragmento de código

de la siguiente manera: {{ texto_título }}

Comience a usar fragmentos hoy

Si bien los fragmentos pueden parecer al principio solo otra herramienta
simple en su arsenal, es posible convertirlos en una parte muy
poderosa de su tema que le permite crear marcas repetitivas para usar en
una variedad de contextos.

Capítulo 8 | Usar fragmentos en tu tema de Shopify 60

Machine Translated by Google

CAPÍTULO 9

Uso de
secciones y bloques en
Tema Shopify
Las secciones son elementos modulares y personalizables de una página, que pueden

tener funciones específicas. Las secciones son similares a los fragmentos, ya que son

parciales, pero permiten opciones de personalización en el Editor de la tienda en línea.

Aquí hay una descripción general de algunas de sus características:

• Las secciones pueden incluirse estáticamente en las plantillas de un tema o agregarse

dinámicamente a la página de inicio del tema desde el Editor de la tienda en línea.

• Las secciones se incluyen en los archivos de plantilla utilizando el

{% section 'section_name' %} Etiqueta líquida, o agregada automáticamente a las

páginas de inicio cuando hay ajustes preestablecidos en el archivo de sección.

• Las secciones admiten tres etiquetas de Liquid, que no se pueden usar fuera de los

archivos de sección: {% schema %} , {% javascript %} y {% stylesheet %} .

• Si bien hay etiquetas de Liquid para agregar secciones específicas

CSS, de forma predeterminada, una sección extraerá su estilo de la hoja de estilo

principal, como theme.scss.liquid .

• Las secciones pueden incluir tipos de entrada básicos y especializados.

Capítulo 9 | Usar secciones y bloques en tu tema de Shopify 61

Machine Translated by Google

Crear una sección estática en tu tema de Shopify

Cuando crea una nueva sección desde el editor de archivos de temas, se crea

automáticamente un andamio con etiquetas de esquema, CSS y JavaScript. Dentro de las

etiquetas de esquema agregaríamos JSON, que definiría cómo el Editor de Temas “lee”

nuestro contenido. Las etiquetas CSS y JavaScript se pueden usar para agregar estilo o

funciones específicas a esta sección, pero de forma predeterminada, la sección extraerá sus

estilos de la hoja de estilo principal del tema.

Así es como se vería un andamio de sección:

{% esquema %}
{
“nombre”: “Nombre de la sección”,
"ajustes": []
}

{% termina el esquema %}
{% hoja de estilo %}
{% hoja de estilo final %}
{% javascript %}
{% endjavascript %}

Para agregar contenido a una sección, querrá agregar etiquetas HTML y Liquid en la parte

superior del archivo. Las secciones usan la sintaxis Liquid

{{ section.settings.name }} para identificarse como campos o contenido personalizado.

Las etiquetas líquidas se pueden definir dentro del esquema,

por lo que se puede personalizar la sección en el Editor de la Tienda Online. Tú

puede ver los diferentes valores de entrada que se pueden agregar a la configuración

del esquema en nuestra documentación.

Una sección de ejemplo que podríamos crear es un cuadro de texto personalizado,

con un encabezado personalizable y un cuadro de texto enriquecido. Puede ver que las

etiquetas de Liquid en el HTML se corresponden con los ID dentro de la configuración del

sección del esquema:

Capítulo 9 | Usar secciones y bloques en tu tema de Shopify 62

Machine Translated by Google

<div id = "sección de texto">

< clase div=“texto simple”>
<h1> {{ sección.configuración.cuadro de texto }} </h1>
<h3> {{ sección.configuración.texto }} </h3>
</div>
</div>

{% esquema %}
{
“nombre”: “Cuadro de texto”,
"ajustes": [
{
“id”: “cuadro de texto”,
"teclee el texto",
“etiqueta”: “Título”,
“predeterminado”: “Título”
},

{
“id”: “texto”,
“tipo”: “texto enriquecido”,
“label”: “Agregar texto personalizado debajo”,
“predeterminado”: “<p>Agrega tu texto aquí</p>”
}
]
}
{% termina el esquema %}
{% hoja de estilo %}
{% hoja de estilo final %}
{% javascript %}
{% endjavascript %}

En el ejemplo anterior, hemos creado un cuadro de texto sin formato y un cuadro

de texto enriquecido, pero puede agregar una amplia gama de tipos de salida según
sus requisitos. Otros tipos de entrada válidos incluyen image_picker ,
radio , URL del vídeo , y fuente

Dentro de las etiquetas de esquema, id se refiere a la etiqueta de Liquid

que se está definiendo, el tipo asigna el tipo de salida que estamos creando,
la etiqueta define un nombre para esta salida y el valor predeterminado es
asignando un marcador de posición.

Para agregar esta sección a una plantilla específica (p. ej., producto.líquido o
página.líquido), agregaríamos {% sección 'nombre_de_

Capítulo 9 | Usar secciones y bloques en tu tema de Shopify 63

Machine Translated by Google

section' %} al archivo de plantilla Liquid requerido. Esto funciona de manera similar a cómo incluiría un

fragmento en una plantilla de página, pero la sintaxis es ligeramente diferente.

Crear una sección dinámica en su

tema de Shopify
A diferencia de las secciones estáticas, las secciones dinámicas se pueden mover a diferentes posiciones

en la página de inicio. Esta funcionalidad de arrastrar y soltar significa que cuando crea secciones dinámicas

personalizadas, hay disponible una amplia gama de opciones para personalizar las páginas de inicio.

Para hacer una sección dinámica, necesitamos agregar ajustes preestablecidos dentro de la

etiquetas de esquema del archivo de sección. Los ajustes preestablecidos definirán cómo aparece la

sección en el Editor de temas, y los ajustes preestablecidos deben tener un nombre y una categoría.

Una vez que se agregan estos ajustes preestablecidos, las secciones estarán automáticamente

disponibles para agregarse a la página de índice. Los ajustes preestablecidos no se incluyen en el archivo

base cuando agrega una nueva sección, pero agregarlos manualmente es sencillo.

Por ejemplo, los ajustes preestablecidos para una sección de botón de llamada a la acción podrían verse como

este:

"Preajustes": [
{
“nombre”: “Llamada a la acción”,
“categoría”: “botón CTA”
}
]

Una vez que estos ajustes preestablecidos se agregan al final del archivo de esquema, el tema lo

reconocerá automáticamente como una sección dinámica, que

Capítulo 9 | Usar secciones y bloques en tu tema de Shopify 64

Machine Translated by Google

se puede agregar a la página de índice. Esto quiere decir que cuando accedamos al Editor de la Tienda

Online y añadamos una sección a la página de inicio, aparecerá una opción de “Call to Action”. Esta

sección ahora se puede mover por la página en diferentes posiciones.

Agregar bloques a las secciones

Los bloques son contenedores de configuraciones y contenido que se pueden agregar, eliminar y

reordenar dentro de una sección. que hace los bloques

diferente de las secciones es que los elementos se pueden mover

dentro de una sección. Se puede agregar una gama de diferentes tipos de bloques a las secciones, y las

posiciones de estos bloques se pueden cambiar, todo desde el Editor de temas. Un bloque puede ser una

imagen, un video, un texto personalizado o cualquiera de las opciones de tipo de configuración de entrada

que se muestran a continuación:

Valor Solicitud

texto Campos de texto de una sola línea

área de texto Áreas de texto de varias líneas

selector de imagen Cargas de imágenes

radio Botones de radio

Seleccione Desplegables de selección

caja Casillas de verificación

distancia Deslizadores de rango

Capítulo 9 | Usar secciones y bloques en tu tema de Shopify sesenta y cinco

Machine Translated by Google

Cuando estamos creando bloques, envolvemos nuestros objetos de bloque en

el bucle lógico líquido {% for block in section.blocks %} para que el bloque se
represente en el Editor de la tienda en línea. La estructura para este
se vería como:

{% for block in section.blocks %} <!-- contenido

del bloque de salida -->
{% que antes %}

Usamos etiquetas de Liquid para indicar un objeto de bloque, y los

atributos de este bloque se definen en la matriz de esquema de cada archivo
de sección. La sintaxis de un objeto de bloque sería {{ block.settings.id }}, donde
id sería el atributo al que se hace referencia mediante JSON en la matriz de
esquema. Por ejemplo, un bloque para agregar una imagen podría ser
{{ block.settings.image }} .

Dentro de la matriz, a un bloque se le debe asignar un nombre y un tipo.

El tipo de un bloque puede ser cualquier valor establecido por el desarrollador del tema.

Un bloque tiene configuraciones en el mismo formato que settings_schema.json,

, por ejemplo:

{% esquema %}
{
“bloques”: [
{
“tipo”: “cita”,
“nombre”: “Cita”,
"ajustes": [
{
“id”: “contenido”,
"teclee el texto",
"etiqueta": "Cita"
}
]
}
]
}
{% termina el esquema %}

Capítulo 9 | Usar secciones y bloques en tu tema de Shopify 66

Machine Translated by Google

Dentro de la configuración del esquema principal, podemos asignar el número máximo

de bloques en la sección. Hemos establecido esto en tres, pero puede ser cualquier

número. Según el tipo de salida, es posible que desee limitar o "limitar" la cantidad posible

de bloques de manera diferente, para que una página no se abarrote.

Debajo de esto, debido a que es una sección dinámica, tenemos ajustes

preestablecidos, que permitirán que esta sección se agregue a la página de índice.

Podemos definir cuántos bloques aparecen por defecto, añadiendo bloques dentro de los

presets. Esto significa que aparecerán dos botones de llamada a la acción y, dado que
configuramos el máximo en tres, se puede agregar un bloque adicional.

Uso de etiquetas de flujo de control "caso/cuándo"

con bloques

Al hacer uso de las etiquetas de flujo de control case/when, podemos configurar

diferentes opciones para incluir tipos de salida. Por ejemplo, si quisiéramos que una sección

tuviera opciones de bloqueo para texto personalizado o un formulario de suscripción al boletín

informativo, el código para estas opciones de bloqueo podría verse así:

{% para bloque en sección.bloques %}

{% bloque de casos . tipo %}

{% cuando 'texto' %}
<div class=“grid__item {{ column_width }}”>
<h3 clase=“h4”>{{ bloque.configuración.título }}</h3>
<div class=“rte”>{{ bloque.configuración.texto enriquecido }} </div>
</div>

{% cuando 'boletín' %}
<div class=“grid__item {{ column_width }}”> <h3
class=“h4”>{{ 'layout.footer.newsletter_title'
| t }}</h3>
<p>{{ 'layout.footer.newsletter_caption' | } } </p>
{% render 'formulario-boletín' %}
</div>

{% endcase %}
{% endfor %}

Capítulo 9 | Usar secciones y bloques en tu tema de Shopify 67

Machine Translated by Google

Con un gran poder viene una gran responsabilidad

Ahora que has visto lo fácil que es añadir secciones a tus temas, puedes añadir
un sinfín de opciones a las tiendas de tus clientes.

Sin embargo, vale la pena tener en cuenta los posibles riesgos de repetir
bloques, especialmente para elementos como imágenes y videos. Repetirlos
en exceso podría resultar en tiempos de carga de página lentos y una mala
experiencia de usuario para los clientes, lo que podría tener un efecto negativo
en las conversiones.

Pero si implementa los bloques con cuidado y tiene en cuenta su contexto,

puede crear una fórmula ganadora para su cliente.

Capítulo 9 | Usar secciones y bloques en tu tema de Shopify 68

Machine Translated by Google

CAPÍTULO 10

Cómo usar
all_products en un
Tema Shopify

Este capítulo explorará una forma de acceder a la información del producto

sin tener que recorrer una colección o estar en una página de detalles del producto.

Capítulo 10 | Cómo usar 'all_products' en un tema de Shopify 69

Machine Translated by Google

Podemos lograr esto usando all_products . He aquí un ejemplo rápido:

{{ todos_productos[“taza de café”].título }}

Echemos un vistazo a lo que está sucediendo. La sintaxis es bastante simple:

all_products toma un identificador de producto citado como su argumento.

Asas de líquido
Si no estás familiarizado con los identificadores, el Centro de ayuda de Shopify ofrece
una excelente explicación:

Los identificadores se utilizan para acceder a los atributos de los objetos de Liquid. De forma

predeterminada, un identificador es el título del objeto en minúsculas con los espacios y

caracteres especiales reemplazados por guiones (-). La mayoría de los objetos en Shopify

(productos, colecciones, blogs, artículos, menús) tienen identificadores.

En el ejemplo anterior, tenemos un identificador de taza de café, que

representa el producto disponible en yourstore.com/products/
café . Lo seguimos por .title . Cuando se renderice, esto generará el título del
producto con el asa de la taza de café.

Usando all_products podemos acceder a cualquier propiedad del producto:

• todos_productos[“taza de café”].disponibles todos_

productos[“taza de café”].colecciones

• todos_productos[“taza de café”].comparar_a_precio_
máximo

• todos_productos[“taza de café”].comparar_a_precio_
min

• todos_productos[“taza de café”].comparar_a_precio_
varía

• todos_productos[“taza de café”].contenido

Capítulo 10 | Cómo usar 'all_products' en un tema de Shopify 70

Machine Translated by Google

• todos_productos[“taza de café”].descripción todos_

productos[“taza de café”].featured_image

• todos_productos[“taza de café”].primeros_disponibles_
variante

• all_products[“taza de café”].asa

• all_products[“taza de café”].id all_

productos[“taza de café”].imágenes

• all_products[“taza de café”].image

• todos_productos[“taza de café”].opciones todos_

productos[“taza de café”].precio

• todos_productos[“taza de café”].precio_máximo todos_

productos[“taza de café”].price_min

• todos_productos[“taza de café”].precio_varía

• all_products[“taza de café”].selected_variant

• todos_productos[“taza de café”].seleccionado_o_primero_
variante_disponible

• all_products[“taza de café”].etiquetas all_

productos[“taza de café”].template_suffix

• all_products[“taza de café”].title all_

productos[“taza de café”].tipo

• all_products[“taza de café”].url all_

productos[“taza de café”].variantes

• todos_productos[“taza de café”].proveedor

Capítulo 10 | Cómo usar 'all_products' en un tema de Shopify 71

Machine Translated by Google

Tenga en cuenta que algunos de los valores devueltos serán una colección de
Liquid y, debido a esto, será necesario "reciclarlos". Usemos la colección de
imágenes como ejemplo:
{% para imagen en todos_productos[“taza de café”].images %} <img
src=”{{ image.src | img_url: 'grande' }}” > {% endfor %}

Este ejemplo generaría todas las imágenes asociadas con el producto de

la taza de café.

Más de un mango
Puede ir un paso más allá y crear una matriz Liquid simple de
identificadores que puede usar para generar productos específicos.
Aquí hay un ejemplo:

{% asignar favoritos = “manipulación-de-café-hecha-a-mano|

taza-de-cafe-comestible” | división: “|” %}
<último>
{% para producto en favoritos %}
<li>{{ todos_productos[producto].título }}</li>
{% endfor %}
</ul>

Usando la etiqueta de asignación de Liquid, creamos una nueva variable llamada

favoritos, que son identificadores de productos separados por un | personaje. el
| se usa como un delimitador para dividir la cadena en una matriz que podemos
recorrer usando for .

Ahora tenemos acceso a ambos productos a la vez y podemos generar

cualquier propiedad asociada con él; en el ejemplo anterior, simplemente
mostramos el título.

Capítulo 10 | Cómo usar 'all_products' en un tema de Shopify 72

Machine Translated by Google

Cuándo usar all_products

all_products es una excelente opción cuando necesita extraer un par de
productos en una plantilla en particular. Por supuesto, si está produciendo
muchos productos, una colección sigue siendo la mejor manera de avanzar, ya
que no tendrá que conocer manualmente todos los identificadores de productos diferentes.
Sin embargo, all_products es una excelente opción cuando necesita generar
un solo producto o una pequeña cantidad de productos que no cambiarán con
frecuencia.

Capítulo 10 | Cómo usar 'all_products' en un tema de Shopify 73

Machine Translated by Google

CAPÍTULO 11

Manipular imágenes
con img_url
Filtrar

En este capítulo, veremos cómo usar el filtro img_url y examinaremos los

parámetros agregados recientemente que te permiten manipular imágenes
dentro de Shopify de maneras nuevas y emocionantes.

Capítulo 11 | Manipular imágenes con el filtro `img_url` 74

Machine Translated by Google

Comencemos mirando la función del filtro img_url. En su forma básica, devolverá la

URL de una imagen. Para hacer esto, debe pasar un parámetro de tamaño obligatorio.
También es un filtro bastante versátil, ya que se puede usar con los siguientes objetos,
que tienen imágenes asociadas:

• producto

• variante

• Elemento en linea

• recopilación

• artículo

• imagen

En este capítulo, nos centraremos en el uso del objeto producto.

Aquí hay un ejemplo:

{{ producto.imagen_presentada | img_url: '100x100' }}

En el ejemplo anterior, el filtro img_url tiene un parámetro de

100x100 . Este valor corresponde a un tamaño particular de imagen que
fue creado automáticamente por Shopify, después de que se cargó a través del
administrador de Shopify.

En este caso, la imagen no tendrá más de 100x100 píxeles.

Si subes una imagen cuadrada, se redimensionará perfectamente. Sin embargo, si
tu imagen original es más larga de un lado que del otro, Shopify cambiará el tamaño en
consecuencia para que el lado más largo tenga 100 píxeles.
En otras palabras, todos los cambios de tamaño son proporcionales a menos que

recortes la imagen.

Capítulo 11 | Manipular imágenes con el filtro `img_url` 75

Machine Translated by Google

Aquí está la lista de tamaños con sus nombres de imagen correspondientes:

1024 x 1024 (ancho y alto) 1024x1024

Solo ancho 100x

Solo altura x100

Imagen más grande / original Maestro

También puede encadenar el filtro img_url con el filtro img_tag para generar el
elemento <img> completo:
{{ producto.imagen_presentada | img_url: '100x100' |
img_etiqueta }}

Hasta ahora, hemos visto la función básica del filtro img_url.

No había mucho más que pudiera hacer con img_url hasta que se agregó un
nuevo conjunto de parámetros, lo que hizo posible cambiar el tamaño y recortar
imágenes desde sus archivos de plantilla.

Parámetros adicionales
Antes de continuar, vale la pena señalar que las siguientes técnicas se pueden
usar con una variedad de filtros además de img_url . Ellos son:

• url_img_producto

• colección_img_url

• artículo_img_url

Usaremos img_url en todos los siguientes ejemplos, pero queremos resaltar

que las técnicas también funcionan con los otros tres filtros.

1. Tamaño

Comencemos por ver cómo podemos cambiar el tamaño de una imagen. Para hacer
esto, reemplazamos el "nombre" de la imagen con un tamaño específico en píxeles.

Capítulo 11 | Manipular imágenes con el filtro `img_url` 76

Machine Translated by Google

Aquí hay un ejemplo:

{{ producto.imagen_presentada | img_url: '450x450' }}

Ver imagen generada

Los "nombres" mencionados anteriormente, por supuesto, funcionarán como

siempre lo han hecho. Sin embargo, el uso de la sintaxis anterior pone el control de
las dimensiones de la imagen en sus manos. En este ejemplo, hemos especificado
tanto el ancho como el alto (en ese orden).

También puede especificar solo un ancho o solo una altura.

Solo ancho:
{{ product.featured_image | img_url: '450x' }}

Ver imagen generada

Solo altura:
{{ producto.imagen_presentada | img_url: 'x450' }}

Ver imagen generada

Cuando solo se especifica un valor único, Shopify calculará la otra dimensión en

función del tamaño de la imagen original, manteniendo intacta la relación de aspecto
de la imagen original.

Volviendo a nuestro ejemplo original, podría pensar que daría como resultado
una versión de 450x450 de su imagen.
Esto, sin embargo, no es siempre el caso.

Esta solicitud daría como resultado un cuadrado perfecto solo si se cumplen

las dos condiciones siguientes:

1. La imagen original tenía 450 px o más en ambos ejes.

2. Ambos lados tienen la misma longitud.

Capítulo 11 | Manipular imágenes con el filtro `img_url` 77

Machine Translated by Google

Si ambas condiciones son verdaderas, se renderizará una imagen cuadrada

de 450x450. De lo contrario, Shopify cambiará su tamaño usando la misma lógica
que si hubieras especificado solo la altura o el ancho. El lado más largo gana en esta
situación y se escala en consecuencia.

2. Recortar

Afortunadamente, crear cuadrados perfectos no requerirá que cargues

imágenes cuadradas. Todo lo que requiere es la adición de otro nuevo
parámetro llamado crop . Especifique un parámetro de recorte para asegurarse de
que las dimensiones de la imagen resultante coincidan con las dimensiones solicitadas.
Si la imagen completa no se ajusta a las dimensiones solicitadas, el parámetro de
recorte especifica qué parte de la imagen mostrar.

Las opciones válidas incluyen:

• cima

• centro

• abajo

• izquierda

• derecho

Aquí hay un ejemplo que se basa en el que discutimos anteriormente:

{{ producto.imagen_presentada | img_url: '450x450',
cultivo: 'centro' }}

Ver imagen generada

3. Escala

Además de las dimensiones, también podemos solicitar una determinada densidad de

píxeles mediante el parámetro de escala.

Las dos opciones válidas son:

Capítulo 11 | Manipular imágenes con el filtro `img_url` 78

Machine Translated by Google

•2

•3

Simplemente puede agregar esto como otro argumento al filtro img_url de la

siguiente manera:

{ producto.imagen_presentada | img_url: '450x450', recortar:

'centro', escala: 2 }}

Ver imagen generada

Esto daría como resultado una imagen redimensionada de 900x900 píxeles.

Nuevamente, esto solo se ampliará si la imagen original es lo suficientemente grande.
Si este no es el caso, se devolverá la imagen más cercana en tamaño.

4. Formato

Hay un parámetro final que puede agregar, que es el formato.

Las opciones válidas para esto son:

• jpg

• pjpg

Aquí hay un ejemplo de formato de incorporación:

{{ producto.imagen_presentada | img_url: '450x450',
recorte: 'centro', escala: 2, formato: 'pjpg' }}

Ver imagen generada

Esto daría como resultado que la imagen se renderice como un JPG progresivo: se
cargan como una imagen de tamaño completo con una calidad que aumenta
gradualmente, en lugar de una carga de arriba a abajo. Es una gran opción para
tener dependiendo de sus necesidades.

Shopify puede hacer las siguientes conversiones de formato por ti:

• PNG a JPG

Capítulo 11 | Manipular imágenes con el filtro `img_url` 79

Machine Translated by Google

• PNG a PJPG

• JPG a PJPG

No es práctico convertir un formato de imagen con pérdida como JPG a uno sin
pérdida como PNG, por lo que esas conversiones no son posibles.

almacenamiento en caché

Finalmente, vale la pena señalar que una vez que se haya creado la imagen
solicitada, se almacenará en caché y estará disponible en Shopify CDN (red de
entrega de contenido). En consecuencia, no hay necesidad de preocuparse por la
creación de la imagen cada vez que se procesa la plantilla.

Conclusión
Gracias a estos nuevos parámetros, ahora es posible implementar técnicas de
imagen receptiva en sus plantillas. Ya sea que desee comenzar a usar los atributos
srcset y tamaños, o el elemento <imagen>, puede comenzar a ofrecer la imagen más
adecuada para el tamaño de pantalla, la resolución y el ancho de banda.

Capítulo 11 | Manipular imágenes con el filtro `img_url` 80

Machine Translated by Google

CAPÍTULO 12

Formas de
personalizar el elemento

Ahora vamos a echar un vistazo al humilde elemento HTML img .

Al crear un tema de Shopify, puede agregar cualquier cantidad de

imágenes, en cualquier formato y en cualquier tamaño a la carpeta de
activos dentro de su directorio de temas. Por lo general, estas imágenes se
utilizan para fondos, sprites y elementos de marca.

Capítulo 12 | Formas de personalizar el elemento 'img' 81

Machine Translated by Google

Hacer referencia a estas imágenes en un tema es muy sencillo.

Supongamos que tenemos un logo.png en nuestra carpeta de activos. Podemos
generar esta imagen en cualquier plantilla usando la siguiente sintaxis de Liquid:
{{ 'logotipo.png' | activo_url | img_tag: 'Logotipo' }}

Este enfoque utiliza dos filtros Liquid para crear un elemento HTML <img>
completamente formado. El primero, asset_url , antepone la ruta completa
a la carpeta de activos para el tema de la tienda actual, mientras que el segundo,
completo conusa esta URL
el atributo alt.ySicrea un elemento
se omite, HTML
el atributo alt <img>
estará img_tag ,
en blanco.

Aquí está el resultado final:

<img src=”//cdn.shopify.com/s/files/1/0222/9076/t/10/
activos/logotipo.png?796” alt=”Logotipo”>

Notarás que el atributo src hace referencia a Shopify CDN.

Cada imagen que agregue, independientemente de su tipo, se enviará a Shopify
CDN. Nunca tendrá que preocuparse por la ubicación de sus imágenes, ya que
el filtro asset_url lo resolverá cuando se represente la página.

Agregar clases al elemento img

En el ejemplo anterior, agregamos el atributo alt. También es posible
agregar un parámetro adicional que le permita agregar clases al elemento
<img>. Aquí está nuestro ejemplo refactorizado:
{{ 'logotipo.png' | activo_url | img_tag: 'Logotipo', 'cssclass1
cssclass2' }}

Esto daría como resultado la siguiente salida:

<img src=”//cdn.shopify.com/s/files/1/0222/9076/t/10/
activos/logotipo.png?796” alt=”Logotipo” class=”cssclass1
clasecss2”>

Capítulo 12 | Formas de personalizar el elemento 'img' 82

Machine Translated by Google

Mas control
Por supuesto, habrá ocasiones en las que necesite un poco más de control sobre el

marcado. Simplemente omitiendo el filtro img_tag, podemos construir nuestro marcado

como deseemos.

Aquí hay un enfoque que le permitiría agregar sus propios atributos, como una
identificación:

<img src=”{{ 'logotipo.png' | asset_url }}” alt=”Logotipo” class=”cssclass1 cssclass2”

id=”logotipo”>

Esperamos que estos ejemplos le hayan resultado útiles en la creación

de su propio tema.

Capítulo 12 | Formas de personalizar el elemento 'img' 83

Machine Translated by Google

CAPÍTULO 13

Creando útil
Ganchos CSS
en líquido

Muchos de nosotros usamos la clase <body> para CSS, así como enlaces de
JavaScript y, al igual que en WordPress, es bastante fácil agregar varias clases
útiles a nuestro elemento <body> en Shopify.

Aquí hay algunas ideas que puede encontrar útiles para colocar en su
archivo de diseño principal (o alternativo).

Capítulo 13 | Creación de Hooks CSS útiles en Liquid 84

Machine Translated by Google

Agregue el nombre de la plantilla representada

actualmente a la clase de cuerpo

<clase de cuerpo=”{{ plantilla | manejar }}”>

En este ejemplo, estamos usando el objeto de plantilla para devolver el

nombre de la plantilla utilizada actualmente. Esto puede ser realmente útil
cuando necesita apuntar a una plantilla alternativa específica, por ejemplo.
Algunos ejemplos de esto son:
<clase de cuerpo=”índice”>
<clase corporal=”producto”>
<body class=”colección”>

Agregue el identificador del producto representado

actualmente a la clase de cuerpo

Sobre la base de esto, es posible que deseemos agregar el identificador del producto actual

a nuestra clase de cuerpo. Para mantener las cosas limpias y ordenadas, podemos usar

una declaración if para agregar condicionalmente el identificador del producto solo cuando

estamos viendo un producto:

<body class=”{{ template }}{% if template == “producto” %}

{{ product.handle }}{% endif %}”>

Observe cómo incluimos el espacio antes de la etiqueta de salida

{{ product.handle }}. Esto es para asegurar que las clases estén separadas por
espacios y representadas individualmente.

Si está utilizando plantillas de productos alternativos, es posible que desee

utilizar el operador contiene en su lugar:
<body class=”{{ plantilla }}{% si la plantilla contiene
“producto” %}{{ producto.manejador }}{% endif %}”>

Capítulo 13 | Creación de Hooks CSS útiles en Liquid 85

Machine Translated by Google

Agregue el título de la página actual a la clase de cuerpo

Algunos temas también agregan el título de la página actual al elemento del cuerpo
en forma de id. Sobre la base de lo anterior, nuestro código ahora se vería de la
siguiente manera:

<identificación del cuerpo=”{{ título_página | handleize }}” class={{ plantilla }}{%

if plantilla == “producto” %} {{ producto.
manejar }}{% endif %}”>

Tenga en cuenta que en este ejemplo estamos usando el controlador de filtro

Liquid para garantizar que la identificación o la clase que agregamos sea segura

para URL y, por lo tanto, fácil de consultar en nuestros archivos CSS y JS. Por
ejemplo, convertirá un título de página de "Blue Jeans" en "blue-jeans".

Agregue el nombre de la colección que se ve

actualmente a la clase de cuerpo
En buena medida, incluso podríamos agregar un cheque para las colecciones:
<identificación del cuerpo=”{{ título_página | handleize }}” class={{ plantilla }}{%
if plantilla == “producto” %} {{ producto.
handle }}{% endif %}{% if plantilla == “colección” %} {{ colección.handle }}{% endif %}”>

Es bastante fácil ajustar esta lógica para sus propios fines.

Una vez más, es posible que desee utilizar el operador contiene si está
utilizando plantillas alternativas.

Resumen
Esperamos que haya visto cuán flexible es Liquid en los ejemplos anteriores.
Poder agregar una variedad de clases al elemento <body> nos brinda ganchos útiles
que podemos usar en CSS y JavaScript.

Capítulo 13 | Creación de Hooks CSS útiles en Liquid 86

Machine Translated by Google

CAPÍTULO 14

Usando el caso de
Liquid/cuando
Etiquetas de control

Estamos seguros de que muchos de ustedes están más que familiarizados con las etiquetas de control de Liquid

como si y más , pero ¿estás familiarizado con el caso/cuándo ?

Así es como lo describe el Centro de ayuda de Shopify :

caso/cuando crea para ejecutar

la declaración
aa switch especial
bloque de código cuando aa
la variable tiene valor específico. caso
inicializa la instrucción switch, y cuando declaraciones definen la

varias condiciones

Capítulo 14 | Uso de las etiquetas de control "caso/cuándo" de Liquid 87

Machine Translated by Google

Aquí hay un ejemplo:

{% asignar identificador = 'pastel' %} {% identificador de caso

%} {% cuando 'pastel' %}
Esto es un pastel
{% when 'cookie' %}
Esta es una cookie
{% else %}
Esto no es un pastel ni una galleta {%
endcase %}

En este caso, la salida se determinará cuando la variable llamada handle sea

igual a “cake” o sea igual a “cookie”. Si ninguna de las condiciones se evalúa
como verdadera, generará el texto después
, de la última
cláusula else.

Si omite la cláusula else y la variable handle nunca se evalúa

a la verdad , no se emitirá ninguna salida. Esto se debe a que la

cláusula else actúa como alternativa en el ejemplo anterior.

ejemplo del mundo real

Tan bueno como es nuestro ejemplo, es posible que se pregunte cuándo podría
usar esto en el desarrollo de su propio tema.

Un ejemplo que hemos visto en el pasado está relacionado con los banners en
un tema. A pesar de nuestro amor por las plantillas alternativas, hay ocasiones en
las que crear una variedad de plantillas simplemente para mostrar diferentes
pancartas promocionales llevaría mucho tiempo. No solo tendría que crear las
plantillas, sino que también tendría que asignarlas a cada producto por turno. Un
enfoque más práctico es dejar que Shopify haga el trabajo pesado por ti.

Digamos que queríamos mostrar diferentes banners promocionales en

productos particulares. Una forma en que podríamos hacer esto es usar el producto

Capítulo 14 | Uso de las etiquetas de control "caso/cuándo" de Liquid 88

Machine Translated by Google

manijas y estuche/cuando. Este ejemplo de código funcionará en

una plantilla product.liquid.

{% asignar identificador = producto . identificador

%} {% identificador de caso %} {% cuando 'taza de
café' %} {% renderizar 'taza de café promocional' %}

{% when 'taza-platillo' %} {%
render 'promo-taza-platillo' %}
{% else %}
{% render 'promo-default' %} {% endcase
%}

Comenzamos creando una variable llamada handle y le asignamos el valor

actual de product.handle. A continuación instanciamos nuestra cláusula case,
seguida de una serie de sentencias when.

En nuestro ejemplo, si el identificador de nuestro producto es igual a coffee-

cup , el fragmento titulado promo-coffee-cup se representará y Shopify se
dirigirá directamente a endcase y continuará.

Alternativamente, si el identificador del producto es igual a cup-saucer,

se representará el fragmento titulado promo-cup-saucer. Si el identificador del
producto no es una taza de café ni un platillo, entonces se activa la cláusula
else y se
representará el fragmento titulado promo-default.

Hemos logrado mucho con poco. Estamos emitiendo diferentes

fragmentos de forma condicional según el producto que se esté
visualizando y emitiendo un banner promocional predeterminado si no
se cumple ninguna de las condiciones. También hemos logrado esto sin tener
que crear plantillas alternativas. Para ampliar el ejemplo, simplemente puede
agregar más identificadores de productos específicos cuando sea necesario.
Sin embargo, es posible que necesite un enfoque alternativo si desea incluir
decenas de banners diferentes.

Capítulo 14 | Uso de las etiquetas de control "caso/cuándo" de Liquid 89

Machine Translated by Google

El Shopify
Programa de socios
Construyendo un negocio rentable con Shopify

En Shopify, no solo brindamos un producto que a los comerciantes les encanta, sino que

también ofrecemos una asociación sobre la cual puede desarrollar su negocio.

Shopify es una plataforma de comercio que permite a los empresarios diseñar, configurar y administrar

su tienda a través de múltiples canales, incluso a través de un

sitio web de comercio electrónico, redes sociales, tiendas minoristas físicas,

y más. Shopify actualmente impulsa a más de 1 millón de empresas en 175 países y cuenta con

la confianza de marcas como Unilever, Kylie Cosmetics, Allbirds, MVMT y muchas más.

Con miles de integraciones disponibles en la tienda de aplicaciones de Shopify, tu cliente puede

acceder a la funcionalidad única que necesita para configurarse.

Y con un back office para todos sus canales de venta, gestionando sus
el negocio es más fácil que nunca.

Además de apoyar a los comerciantes, también entendemos los

desafíos únicos que conlleva administrar su propio negocio de diseño
y desarrollo web. Como autónomo, consultor o agencia que trabaja con
clientes comerciales, puedes unirte al Programa de socios de Shopify.

Esta vasta red colaborativa de diseñadores, desarrolladores, especialistas en marketing

y consultores internacionales utiliza Shopify como el comercio

herramienta elegida por sus clientes.
Machine Translated by Google

Convertirse en Shopify Partner es gratis y le da acceso a:

• Tiendas de desarrollo para probar la plataforma y construir su

sitio del cliente

• Oportunidades de reparto de ingresos

• Entornos de vista previa para desarrolladores

• Soporte prioritario para socios

• Recursos educativos

• Y más

Juntas, estas oportunidades han permitido que miles de Shopify Partners

aprendan unos de otros y construyan negocios exitosos y rentables.

Esperamos que se una a nosotros.

Conviértase en un socio de Shopify