Can you explain the Liquid objects used in Shopify themes?

/in /by

In Shopify themes, Liquid is the templating language used to create dynamic content on the store’s pages. It allows you to render content dynamically, loop through data, display variables, and implement logic based on the store’s settings or user interactions. Liquid objects are the most common way to access and display data in Shopify themes. Here’s a breakdown of the main types of Liquid objects you’ll encounter in Shopify themes:

1. Global Objects

These are objects that provide general information about the store, page, and session. They are globally accessible in any template or section.

  • shop: Contains information about the store itself, such as its name, domain, currency, and more.

    • Example: {{ shop.name }}

  • cart: Provides access to the current shopping cart’s details.

    • Example: {{ cart.item_count }} items in your cart

  • customer: Contains information about the logged-in customer, such as their name, email, and addresses.

    • Example: {{ customer.first_name }}

  • current_page: The current page being viewed.

    • Example: {{ current_page }}

  • content_for_header: Includes all dynamic content for the header (scripts, meta tags, etc.).

    • Example: {{ content_for_header }}

  • checkout: Available on checkout-related templates and gives access to checkout-specific data.

    • Example: {{ checkout.total_price }}

2. Collection Objects

These objects represent Shopify collections (groups of products).

  • collection: Represents the current collection being viewed.

    • Example: {{ collection.title }}

  • collections: A global object that holds all collections of the store.

    • Example: {{ collections.all.products | size }} products in total

3. Product Objects

These objects deal with products in the store.

  • product: Represents a single product.

    • Example: {{ product.title }}

  • products: A global object containing all products in the store (useful for searching or listing products).

    • Example: {{ products.size }}

4. Page Objects

Pages are static content like “About Us” or “Contact Us.”

  • page: Represents a single page.

    • Example: {{ page.title }}

  • pages: Contains all pages in the store.

    • Example: {{ pages.contact_us.body }}

5. Blog and Article Objects

Shopify allows you to add a blog to your store.

  • blog: Represents a blog on the site.

    • Example: {{ blog.title }}

  • article: Represents a single article from a blog.

    • Example: {{ article.title }}

6. Order Objects

Order objects are used when displaying order confirmation or account history pages.

  • order: Represents a customer’s order.

    • Example: {{ order.total_price }}

  • orders: A list of orders made by the current customer.

    • Example: {{ orders.size }}

7. Image and Media Objects

These objects are used to work with images and media files in Shopify.

  • image: Represents an image in Shopify. You can access its various properties like URL, dimensions, and alt text.

    • Example: {{ image.src }}

  • media: Represents any media, including images and videos.

    • Example: {{ media.preview_image | img_url: 'large' }}

8. Storefront and User Session Objects

These objects are used to capture session data or other temporary info.

  • locale: The current locale or language of the store.

    • Example: {{ locale }}

  • country: The current country of the store.

    • Example: {{ country.name }}

9. Custom Objects

Shopify allows you to define custom objects in themes for flexibility. For example, you might define custom data through Metafields or custom sections in a theme.

  • Metafields: Used to store custom data for products, customers, or orders.

    • Example: {{ product.metafields.custom_field }}

10. Special Objects for Themes

  • theme: Contains information about the current theme.

    • Example: {{ theme.name }}

  • settings: Contains the settings and configurations defined in the theme editor.

    • Example: {{ settings.logo | img_url: 'medium' }}

Example Usage in a Theme Template

If you’re customizing a Shopify theme and want to display product information in a loop, you might use Liquid objects like this:

liquid
{% for product in collections.frontpage.products %}
<div class="product">
<h2>{{ product.title }}</h2>
<p>{{ product.description }}</p>
<img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
<span>{{ product.price | money }}</span>
</div>
{% endfor %}

In this example:

  • collections.frontpage.products accesses the products in the “frontpage” collection.

  • {{ product.title }} outputs the product title.

  • {{ product.price | money }} formats the product price using the store’s currency.

Conclusion

Liquid objects in Shopify themes provide the necessary tools to display and manipulate store data, create dynamic content, and customize the storefront. They’re essential for building a fully functional and personalized e-commerce experience.