Liquid Flashcards
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>
~~~
What is a metafield?
A custom data field stored on Shopify resources (product, collection, etc.). Access with resource.metafields.namespace.key.
```html
<p>{{ product.metafields.custom_fields.size_chart }}</p>
~~~
What do settings provide access to?
Provides access to theme settings defined in settings_schema.json. Typically used for brand colors, text, etc.
```html
<style>
body { background-color: {{ settings.background_color }}; }</style>~~~
What is the template object?
Contains info about the current template (e.g. template.name), helpful for conditional logic based on template.
```html
<p>Rendering template: {{ template }}</p>
~~~
What is page_title?
The title of the current page, often used in <title> or meta tags for SEO.</title>
```html
<title>{{ page_title }}</title>
~~~
What are current_tags?
An array of tags currently filtering a collection or blog page.
```liquid
{% for tag in current_tags %}
<span>{{ tag }}</span>
{% endfor %}
~~~
What are money filters?
Format numeric values as currency (e.g., money, money_without_currency).
```liquid
{{ product.price | money }} <!-- e.g. $10.00 -->
~~~
What are array filters?
Manipulate arrays (sort, filter, merge). Examples include map, sort, uniq, concat, where.
```liquid
{% assign titles = collection.products | map: ‘title’ | sort %}
~~~
What are string filters?
Modify strings (uppercase, truncate, replace, etc.). Examples: upcase, downcase, truncate.
```liquid
{{ “hello world” | upcase }} <!-- "HELLO WORLD" -->
~~~
What are color filters?
Adjust or extract color properties (e.g., color_darken, color_lighten). Often used on theme color settings.
```liquid
{{ settings.header_color | color_lighten: 10 }}
~~~
What are localization filters?
Handle multi-language/currency tasks. Includes currency_selector, format_address, t.
```liquid
{{ ‘general.greeting’ | t }}
~~~
What are math filters?
Perform arithmetic on numbers: plus, minus, times, divided_by, round.
```liquid
{{ product.price | times: 2 | money }}
~~~
What are default filters?
Provide fallback values, like default and default_errors.
```liquid
{{ customer.first_name | default: “Guest” }}
~~~
What are HTML filters?
Create HTML tags from strings or URLs. Includes link_to, script_tag, time_tag.
```liquid
{{ “https://example.com” | link_to: “Visit Our Site” }}
~~~
What do metafield_tag and metafield_text do?
Output metafield data as HTML or plain text.
```liquid
{{ product.metafields.custom_fields.info | metafield_text }}
~~~
What is the contains operator?
Checks if a string or array contains a specific substring/item.
```liquid
{% if “hello world” contains “world” %}
<p>Yes, it’s included.</p>
{% endif %}
~~~
What does the form tag do?
Used within {% form %} tags for building forms (contact, account creation, etc.). Contains fields like form.errors, form.email.
```liquid
{% form ‘create_customer’ %}
<input></input>
<input></input>
{% endform %}
~~~
What is a linklist?
A navigation menu from the Shopify admin. Contains an array of link objects.
```liquid
{% for link in linklists.main-menu.links %}
<a>{{ link.title }}</a>
{% endfor %}
~~~
What is a link?
An individual menu item within a linklist, with url, title, object, etc.
```html
<a>{{ link.title }}</a>
~~~
What are routes?
Generates dynamic URLs for key pages (cart, account, search), so they remain valid if Shopify’s URL structure changes.
```html
<a>My Account</a>
~~~
What do customer_login_link and customer_logout_link do?
Filters that generate login/logout URLs for customers.
```liquid
{{ ‘Log In’ | customer_login_link }}
{{ ‘Log Out’ | customer_logout_link }}
~~~
What does current_page represent?
The current page number in a paginated loop. Useful for building pagination UIs.
```html
<p>Page {{ current_page }} of {{ paginate.pages }}</p>
~~~
What is pagination?
Created by {% paginate %}. Splits a collection into multiple pages, providing paginate.parts, paginate.next, etc.
```liquid
{% paginate collection.products by 8 %}
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
{% endpaginate %}
~~~
What is content_for_additional_checkout_buttons?
Outputs offsite payment buttons (like PayPal) if enabled, typically displayed near ‘Checkout.’
```liquid
{{ content_for_additional_checkout_buttons }}
~~~
What does content_for_layout render?
Liquid placeholders that render the main content of the current template or the home page.
```liquid
<!-- In theme.liquid -->
{{ content_for_layout }}
~~~
What does powered_by_link output?
Outputs a localized “Powered by Shopify” link. Often placed in the footer.
```html
<p>{{ powered_by_link }}</p>
~~~
What is the checkout object?
Available on the order status page or checkout.liquid (Shopify Plus). Includes info like checkout.line_items, checkout.total_price.
```html
<p>Checkout ID: {{ checkout.id }}</p>
~~~
What does search provide?
Provide data about search queries, results, and resource types.
```liquid
{% if search.performed %}
<p>Found {{ search.results_count }} results for "{{ search.terms }}"</p>
{% endif %}
~~~
What is metafield_definition?
Used to store and retrieve custom data structures. Access entries via metaobject.system.handle or resource.metafields.
```liquid
{{ metaobject.system.handle }} <!-- e.g. "recipe-apple-pie" -->
~~~
What are selling_plan and selling_plan_group?
Related to subscriptions or recurring purchases. Provide details on recurring pricing or shipping intervals.
```liquid
{% if product.selling_plan_groups.size > 0 %}
<p>Subscription options available!</p>
{% endif %}
~~~
What do robots and rule customize?
For customizing robots.txt directives (SEO/crawler instructions). Rarely changed in standard themes.
```liquid
{% for group in robots.default_groups %}
{% for rule in group.rules %}
{{ rule.directive }}: {{ rule.value }}
{% endfor %}
{% endfor %}
~~~
What is the script object?
Contains info about Shopify Scripts (Shopify Plus feature for advanced cart/checkout logic).
```html
<p>Script ID: {{ script.id }}</p>
~~~
What do fulfillment and shipping_method provide?
Provide shipping and fulfillment data for orders.
```liquid
{% for fulfillment in order.fulfillments %}
<p>Tracking: {{ fulfillment.tracking_number }}</p>
{% endfor %}
~~~
What are video, external_video, and model?
Advanced media types in product.media. Videos or 3D models can be rendered with appropriate tags.
```liquid
{% if media_item.media_type == ‘video’ %}
<video></video>
{% endif %}
~~~
What does localization handle?
Used for multi-language or multi-currency features, letting you display store content in different locales.
```html
<p>Current locale: {{ localization.language.iso_code }}</p>
~~~
What is routes (revisited for advanced usage)?
Useful for generating dynamic URLs to cart, account, search, ensuring future-proof links.
```html
<a>Go to Cart</a>
<a>Search</a>
~~~
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.
If product.title = “Red Shirt”, then product.handle = “red-shirt”
What is the assign tag?
The assign tag creates or updates a variable with a given value.
{% assign greeting = “Hello” %}
<p>{{ greeting }} world!</p>
What is the capture tag?
The capture tag stores everything inside into a variable, including multi-line HTML or text.
{% capture my_content %}
<h2>Welcome!</h2>
<p>Thanks for visiting.</p>
{% endcapture %}
{{ my_content }}
What are if and unless tags?
They’re conditional tags that run code if (or unless) a condition is true. Often paired with elsif or else.
{% if product.available %}
<p>This product is in stock!</p>
{% else %}
<p>Out of stock</p>
{% endif %}
What are operators (==, !=, >, <, >=, <=, and, or, contains)?
These are used inside conditionals to compare values or check if a string/array contains a substring/item.
{% if customer.tags contains “VIP” %}
<p>Welcome, VIP customer!</p>
{% endif %}
What is the for tag (and forloop)?
The for tag iterates over an array or collection. The forloop object provides details like index or whether it’s the first/last item.
{% for product in collection.products %}
<p>{{ forloop.index }}. {{ product.title }}</p>
{% endfor %}
What are break and continue?
Within a for loop, break immediately stops the loop, while continue skips to the next iteration.
{% for i in (1..5) %}
{% if i == 3 %}
{% continue %}
{% endif %}
{{ i }}
{% endfor %}
<!-- Outputs: 1, 2, 4, 5 -->
What are increment and decrement?
They automatically create and update a counter variable. increment adds 1, decrement subtracts 1.
{% increment counter %} <!-- First call sets counter=1 -->
{% increment counter %} <!-- Next call sets counter=2 -->
What is whitespace control?
By adding a hyphen in the tag syntax ({{- }}, {%- %}), Liquid strips surrounding whitespace/newlines, helping keep HTML clean.
{% for product in collection.products -%}
{{- product.title -}}
{%- endfor %}
What is the shop object?
The shop object contains store-wide info, such as shop.name, shop.domain, shop.currency, etc.
<p>Store: {{ shop.name }}</p>
<p>Domain: {{ shop.domain }}</p>
What is the product object?
Represents a single product. Common attributes include title, price, variants, images, and more.
<h1>{{ product.title }}</h1>
<p>Price: {{ product.price | money }}</p>
What is the collection object?
A grouping of products with attributes like collection.title, collection.description, and collection.products.
<h2>{{ collection.title }}</h2>
<p>{{ collection.description }}</p>
What is the cart object?
A global object representing the current shopping cart. Has cart.items, cart.total_price, etc.
<p>Items in cart: {{ cart.item_count }}</p>
<p>Total: {{ cart.total_price | money }}</p>
What is a line_item?
Each distinct product variant in the cart is a line_item. Includes title, quantity, line_item.product, etc.
{% for item in cart.items %}
<p>{{ item.title }} x {{ item.quantity }}</p>
{% endfor %}
What is all_products?
Lets you reference any product by its handle: all_products[‘handle’]. Helpful for cross-selling or static references.
{% assign my_product = all_products[‘red-shirt’] %}
<p>{{ my_product.title }}</p>
What is a page object?
Represents a standalone page (from Online Store > Pages). Has fields like page.title, page.content.
<h1>{{ page.title }}</h1>
<div>{{ page.content }}</div>
What is a blog object?
Represents a blog in Shopify, containing multiple articles. Attributes include blog.title, blog.articles.
<h2>{{ blog.title }}</h2>
{% for article in blog.articles %}
<p>{{ article.title }}</p>
{% endfor %}
What is an article object?
A single blog article with properties like title, content, author, and more.
<h3>{{ article.title }}</h3>
<div>{{ article.content }}</div>
<p>Author: {{ article.author }}</p>
What is the customer object?
Represents a logged-in customer. Provides customer.first_name, customer.email, customer.orders, etc.
{% if customer %}
<p>Hello, {{ customer.first_name }}!</p>
{% endif %}
What is a section object?
Used in .liquid section files, giving access to section.settings, section.blocks, etc.
{% for block in section.blocks %}
<div>{{ block.settings.heading }}</div>
{% endfor %}
What is a block object?
Each block within a section. Has an ID, a type, and settings.
<div>
{{ block.settings.content }}
</div>
What is an image object?
Represents an image, often from product.images or article.image. Provides src, alt, width, and height.
<img></img>
What is a media object?
A generic media entry in product.media. Could be an image, video, or 3D model. Usually includes a preview_image.
{% for media_item in product.media %}
{% if media_item.media_type == ‘image’ %}
<img></img>
{% endif %}
{% endfor %}
What is a focal_point?
The x/y coordinate that remains visible when an image is cropped.
<p>Focal point: X={{ focal_point.x }}, Y={{ focal_point.y }}</p>
What is a metafield?
A custom data field stored on Shopify resources. Accessed via resource.metafields.namespace.key.
<p>{{ product.metafields.custom_fields.size_chart }}</p>
What is settings?
Exposes theme settings from settings_schema.json. Often used for colors, text, or layout options.
<style>
body { background-color: {{ settings.background_color }}; }
</style>What is a template object?
Contains details about the current template, like template.name or template.suffix.
<p>Rendering template: {{ template }}</p>
What is page_title?
The current page’s title, often used in the <title> tag for SEO or browser tabs.</title>
<title>{{ page_title }}</title>
What are current_tags?
An array of tags currently used to filter a collection or blog page.
{% for tag in current_tags %}
<span>{{ tag }}</span>
{% endfor %}
What are money filters?
Format numeric values as currency (e.g., money, money_without_currency).
{{ product.price | money }} <!-- e.g. $10.00 -->
What are array filters?
Filters that manipulate arrays (e.g., map, sort, uniq, concat, where).
{% assign titles = collection.products | map: ‘title’ | sort %}
What are string filters?
Filters that modify strings (uppercase, truncate, replace, etc.). Examples: upcase, downcase, truncate.
{{ “hello world” | upcase }} <!-- "HELLO WORLD" -->
What are color filters?
Used to modify or extract color properties, such as color_darken, color_lighten, etc.
{{ settings.header_color | color_lighten: 10 }}
What are localization filters?
Handle multi-language or multi-currency tasks. Includes currency_selector, format_address, t.
{{ ‘general.greeting’ | t }}
What are math filters?
Perform arithmetic on numbers (e.g. plus, minus, times, divided_by, round).
{{ product.price | times: 2 | money }}
What are default filters?
Provide fallback values, like default or default_errors.
{{ customer.first_name | default: “Guest” }}
What are HTML filters?
Create HTML tags from strings or URLs. Examples: link_to, script_tag, time_tag.
{{ “https://example.com” | link_to: “Visit Our Site” }}
What are metafield_tag and metafield_text?
Filters that output metafield data as HTML or plain text.
{{ product.metafields.custom_fields.info | metafield_text }}
What is the contains operator in filters?
Checks if a string or array contains a specific substring/item. Often used in conditionals.
{% if “hello world” contains “world” %}
<p>Yes, it’s included.</p>
{% endif %}
What is a form object?
Used inside {% form %} tags for building forms (contact, account creation). Has fields like form.errors, form.email.
{% form ‘create_customer’ %}
<input></input>
<input></input>
{% endform %}
What is a linklist?
A Shopify navigation menu. Contains an array of link objects.
{% for link in linklists.main-menu.links %}
<a>{{ link.title }}</a>
{% endfor %}
What is a link object?
An individual menu item within a linklist, with url, title, object, etc.
<a>{{ link.title }}</a>
What is routes?
A set of dynamic URLs (e.g. routes.cart_url) ensuring your theme remains valid if Shopify changes URL structures.
<a>My Account</a>
What are customer_login_link and customer_logout_link?
Filters that generate login/logout URLs for customer accounts.
{{ ‘Log In’ | customer_login_link }}
{{ ‘Log Out’ | customer_logout_link }}
What is current_page?
The current page number in a paginated collection or array.
<p>Page {{ current_page }} of {{ paginate.pages }}</p>
What is pagination?
Created by {% paginate %}, splitting a collection into multiple pages.
{% paginate collection.products by 8 %}
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
{% endpaginate %}
What is content_for_additional_checkout_buttons?
Outputs offsite payment buttons (like PayPal) if available, typically placed near checkout.
{{ content_for_additional_checkout_buttons }}
What are content_for_layout and content_for_index?
Placeholders that dynamically render the main content of a template or the homepage.
<!-- In theme.liquid -->
{{ content_for_layout }}
What is powered_by_link?
Outputs a localized “Powered by Shopify” link, usually placed in a footer.
<p>{{ powered_by_link }}</p>
What is the checkout object?
Available in the order status page or checkout.liquid (Shopify Plus). Provides details like checkout.line_items, checkout.total_price.
<p>Checkout ID: {{ checkout.id }}</p>
What are search and predictive_search?
Objects that provide data about search queries, results, and resource types.
{% if search.performed %}
<p>Found {{ search.results_count }} results for "{{ search.terms }}"</p>
{% endif %}
What are metafield_definition and metaobject?
Used to store and retrieve custom data structures in Shopify. Access entries via metaobject.system.handle or resource.metafields.
{{ metaobject.system.handle }} <!-- e.g. "recipe-apple-pie" -->
What are selling_plan and selling_plan_group?
Related to subscriptions or recurring purchases, detailing recurring pricing or shipping intervals.
{% if product.selling_plan_groups.size > 0 %}
<p>Subscription options available!</p>
{% endif %}
What are robots and rule?
For customizing robots.txt (SEO/crawler instructions). Rarely changed in standard themes.
{% for group in robots.default_groups %}
{% for rule in group.rules %}
{{ rule.directive }}: {{ rule.value }}
{% endfor %}
{% endfor %}
What is a script object?
Contains info about Shopify Scripts (Shopify Plus feature for custom cart/checkout logic).
<p>Script ID: {{ script.id }}</p>
What are fulfillment and shipping_method?
Provide shipping and fulfillment details on orders, such as tracking info or shipping costs.
{% for fulfillment in order.fulfillments %}
<p>Tracking: {{ fulfillment.tracking_number }}</p>
{% endfor %}
What are video, external_video, and model?
Advanced media types in product.media for videos or 3D models.
{% if media_item.media_type == ‘video’ %}
<video></video>
{% endif %}
What is localization/country/shop_locale?
Used for multi-language or multi-currency setups, letting you display content in different locales.
<p>Current locale: {{ localization.language.iso_code }}</p>
What is advanced routes usage?
Using routes for dynamic URLs to cart, search, etc., ensuring future-proof links.
<a>Go to Cart</a>
<a>Search</a>
