Liquid Flashcards
(118 cards)
What is a handle?
A handle is a URL-friendly identifier automatically generated from an object’s title. It’s lowercase, spaces become hyphens, and special characters are removed.
```html
<a>{{ product.title }}</a>
~~~
What is the {% assign %} tag?
Assigns a value to a new or existing variable. Commonly used to store strings, numbers, or arrays for later use.
```liquid
{% assign greeting = “Hello” %}
<p>{{ greeting }} world!</p>
~~~
What is the {% capture %} tag?
Captures everything between the tag into a variable, including multi-line text or HTML.
```liquid
{% capture my_content %}
<h2>Welcome!</h2>
<p>Thanks for visiting.</p>
{% endcapture %}
{{ my_content }}
~~~
What do {% if %} and {% unless %} tags do?
Conditional tags that execute code only if (or unless) a condition is true. Often combined with elsif and else.
```liquid
{% if product.available %}
<p>This product is in stock!</p>
{% else %}
<p>Out of stock</p>
{% endif %}
~~~
What are operators in Liquid?
Used inside conditionals to compare values, check equality/inequality, or see if a string/array contains a value.
```liquid
{% if customer.tags contains “VIP” %}
<p>Welcome, VIP customer!</p>
{% endif %}
~~~
What does the {% for %} tag do?
Iterates over an array or collection. The forloop object provides details like forloop.index and forloop.first.
```liquid
{% for product in collection.products %}
<p>{{ forloop.index }}. {{ product.title }}</p>
{% endfor %}
~~~
What do {% break %} and {% continue %} tags do?
break stops the current loop immediately, while continue skips the rest of the current iteration and moves to the next.
```liquid
{% for i in (1..5) %}
{% if i == 3 %}
{% continue %}
{% endif %}
{{ i }}
{% endfor %}
~~~
What does {% increment %} do?
Auto-creates and updates a counter variable. increment adds 1 each time it’s called; decrement subtracts 1.
```liquid
{% increment counter %} <!-- First call sets counter=1 -->
{% increment counter %} <!-- Next call sets counter=2 -->
~~~
What is whitespace control in Liquid?
Adding a hyphen in the tag syntax ({{- }}, {%- %}) removes surrounding whitespace/newlines, helping keep HTML clean.
```liquid
{% for product in collection.products -%}
{{- product.title -}}
{%- endfor %}
~~~
What is the shop object?
A global object with store details, such as shop.name, shop.domain, shop.currency, and more.
```html
<p>Store: {{ shop.name }}</p>
<p>Domain: {{ shop.domain }}</p>
~~~
What does the product object represent?
Represents a product in Shopify. Has attributes like title, price, variants, images, etc.
```html
<h1>{{ product.title }}</h1>
<p>Price: {{ product.price | money }}</p>
~~~
What is a collection in Liquid?
A grouping of products. Provides collection.title, collection.description, collection.products, etc.
```html
<h2>{{ collection.title }}</h2>
<p>{{ collection.description }}</p>
~~~
What does the cart object represent?
A global object that represents the customer’s cart, with cart.items, cart.total_price, cart.item_count, etc.
```html
<p>Items in cart: {{ cart.item_count }}</p>
<p>Total: {{ cart.total_price | money }}</p>
~~~
What is a line item?
Each unique product variant in the cart is a line item. Contains title, quantity, line_item.product, etc.
```liquid
{% for item in cart.items %}
<p>{{ item.title }} x {{ item.quantity }}</p>
{% endfor %}
~~~
What does all_products do?
Lets you access any product by its handle: all_products[‘handle’]. Useful for referencing products not in the current context.
```liquid
{% assign my_product = all_products[‘red-shirt’] %}
<p>{{ my_product.title }}</p>
~~~
What is the page object?
Represents a standalone page (from Online Store > Pages). Offers fields like page.title and page.content.
```html
<h1>{{ page.title }}</h1>
<div>{{ page.content }}</div>
~~~
What does the blog object contain?
A blog object containing multiple articles. Attributes include blog.title, blog.articles, etc.
```html
<h2>{{ blog.title }}</h2>
{% for article in blog.articles %}
<p>{{ article.title }}</p>
{% endfor %}
~~~
What is an article in Liquid?
A single blog article, with properties like title, content, author, and more.
```html
<h3>{{ article.title }}</h3>
<div>{{ article.content }}</div>
<p>Author: {{ article.author }}</p>
~~~
What does the customer object represent?
The logged-in customer object, if any. Contains customer.first_name, customer.orders, customer.email, etc.
```liquid
{% if customer %}
<p>Hello, {{ customer.first_name }}!</p>
{% endif %}
~~~
What is a section in Liquid?
Represents a theme section, including section.settings and section.blocks. Used in .liquid section files.
```liquid
{% for block in section.blocks %}
<div>{{ block.settings.heading }}</div>
{% endfor %}
~~~
What is a block in Liquid?
Each block inside a section. Has an ID, a type, and its own settings.
```html
<div>
{{ block.settings.content }}
</div>
~~~
What does the image object represent?
Represents an image, typically accessed via product.images or article.image. Provides src, alt, width, height.
```html
<img></img>
~~~
What is the media object?
An abstract object for product.media entries (images, videos, 3D models). Often includes a preview_image.
```liquid
{% for media_item in product.media %}
{% if media_item.media_type == ‘image’ %}
<img></img>
{% endif %}
{% endfor %}
~~~
What does the focal_point do?
Determines the important x/y region of an image so it stays visible when cropped.
```html
<p>Focal point: X={{ focal_point.x }}, Y={{ focal_point.y }}</p>
~~~
{{ product.metafields.custom_fields.size_chart }}
```Rendering template: {{ template }}
```Yes, it’s included.
{% endif %} ```Page {{ current_page }} of {{ paginate.pages }}
```{{ powered_by_link }}
```Checkout ID: {{ checkout.id }}
```Found {{ search.results_count }} results for "{{ search.terms }}"
{% endif %} ```Subscription options available!
{% endif %} ```Script ID: {{ script.id }}
```Tracking: {{ fulfillment.tracking_number }}
{% endfor %} ```Current locale: {{ localization.language.iso_code }}
```{{ greeting }} world!
Welcome!
Thanks for visiting.
{% endcapture %} {{ my_content }}This product is in stock!
{% else %}Out of stock
{% endif %}Welcome, VIP customer!
{% endif %}{{ forloop.index }}. {{ product.title }}
{% endfor %}Store: {{ shop.name }}
Domain: {{ shop.domain }}
{{ product.title }}
Price: {{ product.price | money }}
{{ collection.title }}
{{ collection.description }}
Items in cart: {{ cart.item_count }}
Total: {{ cart.total_price | money }}
{{ item.title }} x {{ item.quantity }}
{% endfor %}{{ my_product.title }}
{{ page.title }}
{{ blog.title }}
{% for article in blog.articles %}{{ article.title }}
{% endfor %}{{ article.title }}
Author: {{ article.author }}
Hello, {{ customer.first_name }}!
{% endif %}Focal point: X={{ focal_point.x }}, Y={{ focal_point.y }}
{{ product.metafields.custom_fields.size_chart }}
Rendering template: {{ template }}
Yes, it’s included.
{% endif %}Page {{ current_page }} of {{ paginate.pages }}
{{ powered_by_link }}
Checkout ID: {{ checkout.id }}
Found {{ search.results_count }} results for "{{ search.terms }}"
{% endif %}Subscription options available!
{% endif %}Script ID: {{ script.id }}
Tracking: {{ fulfillment.tracking_number }}
{% endfor %}Current locale: {{ localization.language.iso_code }}
