- 1 Shopify's global objects provide essential access to store data, including customer information, product details, and cart contents, enabling dynamic and personalized storefronts.
- 2 Developers can utilize global objects for various use cases, such as displaying product information, managing customer accounts, and customizing navigation links.
- 3 To optimize performance, combine global objects thoughtfully, minimize excessive loops, and leverage Shopify's documentation for effective theme development.
Shopify’s Liquid templating language is a cornerstone of theme development, enabling developers to create dynamic and customizable e-commerce storefronts. Among its many features, global objects stand out as essential tools for accessing and manipulating store data. In this blog, we’ll explore Shopify global objects in liquids, covering their use cases, properties, and practical applications.
What Are Shopify Global Objects?
Liquid uses global objects, which are predefined variables that give access to key information about a Shopify store. These objects demonstrate data structures like products, collections, customers, details in the cart, and more. They are automatically available in all Liquid files, thus being critical for building data-driven dynamic themes.
Key Categories of Global Objects
1. Store Information
These objects contain details related to the store itself, such as its name, URL, and localizing settings.
shop: Refers to the store and carries metadata such as the shop name, domain, and currency.
Example Usage:
1 2 | <p>Welcome to {{ shop.name }}!</p> <p>Your currency is set to {{ shop.currency }}</p> |
settings: Retrieves theme settings that can be set in the Shopify admin located under OnlineStore > Customize Theme.
Example Usage:
1 | <p>Support Email: {{ settings.contact_email }}</p> |
2. Customer and User Data
These objects refers to logged-in customers and their accounts.
customer: Stores information regarding the currently logged in customer, including name, email, and orders
Example Usage:
1 2 3 4 5 | {% if customer %} <p>Welcome back, {{ customer.first_name }}!</p> {% else %} <p>Please log in to view your account details.</p> {% endif %} |
customer.orders: Retrieves a history of customer orders; however, this can only be accessed with templates such as the customer accounts.
3. Product and Collection Data
These objects allow for and facilitate the rendering and manipulation of dynamic product and collection data.
product: Refers to one product, usually in the product template, which contains information such as its title, price, variants, and metafields.
Example Usage:
1 2 | <h1>{{ product.title }}</h1> <p>Price: {{ product.price | money }}</p> |
collection: A collection of items, usually in the collection template
Example Usage:
1 2 3 4 5 6 | <h1>{{ collection.title }}</h1> <ul> {% for product in collection.products %} <li>{{ product.title }} - {{ product.price | money }}</li> {% endfor %} </ul> |
4. Shopping Cart and Checkout Data
These objects assist a developer in managing the cart as well as checkout flow of a customer.
cart: It holds the details of items inside the customer’s cart, including total price and individual line items.
Example Usage:
1 2 3 4 5 | <h2>Your Cart</h2> {% for item in cart.items %} <p>{{ item.product.title }} - Quantity: {{ item.quantity }}</p> {% endfor %} <p>Total: {{ cart.total_price | money }}</p> |
checkout: checkout template is used to access order summary details while using a checkout object.
5. Blog and Article Data
These objects are helpful in handling content within the blogging feature of Shopify.
blog: Any blog within the Shopify Store.
Example Usage:
1 | <h1>{{ blog.title }}</h1> |
article: Represents any single blog post.
Example Usage:
1 2 | <h2>{{ article.title }}</h2> <p>{{ article.content }}</p> |
6. URL and Routing Objects
These objects help manage URLs and route navigation.
- request: It contains information about the current URL, query parameters, and HTTP method.
- routes: The object is used to generate links for pages and resources in your store.
Example Usage:
1 2 | <a href="{{ routes.cart_url }}">Go to Cart</a> <a href="{{ routes.account_login_url }}">Log In</a> |
Advanced Use Cases
1. Using Metafields with Global Objects
Metafields extend the functionality of global objects by adding custom fields to products, collections, and other resources.
Example Usage:
1 2 | <p>Material: {{ product.metafields.custom.material }}</p> <p>Care Instructions: {{ product.metafields.custom.care_instructions }}</p> |
2. Personalizing Storefronts with customer and cart
You can create personalized shopping experiences by combining global objects like customer and cart.
For example:
1 2 3 | {% if customer %} <p>Hi {{ customer.first_name }}, you have {{ cart.item_count }} items in your cart.</p> {% endif %} |
3. Custom Sorting and Filtering
Apply Liquid loops and filters to implement more advanced sorting and filtering functionality. For instance, sort the products by price:
1 2 3 4 | {% assign sorted_products = collection.products | sort: 'price' %} {% for product in sorted_products %} <p>{{ product.title }} - {{ product.price | money }}</p> {% endfor %} |
Tips for Working with Global Objects
- Use the Shopify Documentation: Shopify’s documentation provides comprehensive details about each global object.
- Combine Objects: Many powerful use cases come from combining global objects like cart and product.
- Test in the Theme Editor: Use Shopify’s preview mode to test your code in real-time.
- Minimize Loops: Excessive looping can slow down your theme, so use filters and pagination where possible.
Common Pitfalls
- Accessing Unavailable Data: Some objects (e.g., cart) may not be available to all templates. Check for their availability.
- Overloading Liquid with Logic: Liquid was created for templating, not complex logic. Outsource heavy calculations to JavaScript if it is necessary.
- Misusing Filters: Filters can do a lot of good, but very easily introduce bugs if not done right. For instance, chaining too many filters might generate unexpected results.
Conclusion
Shopify global objects are very flexible and very important for dynamic, engaging storefronts. You’ll often be showing product information or personalizing customer experiences by customizing navigation, using a set of object for your theme development.
Mastering and understanding the subtleties of global objects will unlock the full potential of Liquid. Deliver exceptional e-commerce experiences for all of your Shopify clients.
To learn more about Shopify and its capabilities, check out shopify’s official website.
For additional insightful articles and information, please reach out to us.
