Chapter 4: Diving into Liquid Core with Objects

In the previous three chapters, we have been referencing objects. However, in this chapter, we will learn about objects, their attributes, and some of the best ways to use them. By learning about objects, we will finalize some projects that we have started and work on new projects to develop our knowledge further.

We will cover the following topics in this chapter:

• Working with global objects
• Improving the workflow with metafields
• Content and special objects

Upon completing this chapter, we will understand what content objects are, why they are mandatory, and how to use them, which is the first step in creating future templates. We will have also learned more about the global objects that we have been referencing up until now.

However, due to the significant number of global objects and attributes they offer us, we will not cover all of them. Instead, we will only explain some of the essential global objects...

Technical requirements

While we will explain each topic and have it presented with the accompanying graphics, we will need an internet connection to follow the steps outlined in this chapter, considering that Shopify is a hosted service.

The code for this chapter is available on GitHub at https://github.com/PacktPublishing/Shopify-Theme-Customization-with-Liquid/tree/main/Chapter04.

The Code in Action video for the chapter can be found here: https://bit.ly/3u7hqyB

Working with global objects

We referenced objects and their attributes in the previous chapter. But what exactly are objects?

These objects, or so-called liquid variables, are elements that allow us to read the content defined in our backend and dynamically output it to help us create better programming logic. We can output the data by combining the objects and attributes encapsulated by double curly braces. An example of the global object that we were using in the previous chapter would be {{ collection.title }}, where the collection keyword would be our object and title would be the attribute.

We can reference these global objects inside any file by directly visiting the page whose content we are looking to recover and calling the object, or manually invoking the object for the specific page using its handle and combining it with the variable tags. Let's see this in action.

As you may recall from the previous chapter, while we were working on the project on our indoor...

Improving the workflow with metafields

Metafields are global objects that allow us to store additional data inside our admin and output it to the storefront. As such, they are both powerful and necessary tools for creating complex designs with unique content.

Metafields consist of three mandatory elements:

• The namespace, which we can use to group different metafields, so long as they share the same namespace.
• The key attribute, which allows us to access a specific metafield.
• A value where we can store an integer, string, or json_string data type.

We can also use a description field for the short description of a metafield, which is optional compared to the previous three.

Metafields, while powerful tools, had quite a disadvantage as they were only available through third-party apps. However, since the Shopify Unite 2021 event, the metafields functionality has become available natively inside the Shopify dashboard, and not only that, but it has received...

Content and special objects

Previously, we learned how to use global objects to output the data from our admin on our templates and section files. Now, it is time to learn how to use content objects to output the content of template and sections files, as well as any other assets that are necessary for the Shopify store to operate. We can divide the content objects into three separate groups: content_for_header, content_for_index, and content_for_layout.

All three types of content objects have descriptive names that tell us what they do. However, to ensure that we fully understand their importance, we will provide a small explanation for each.

The content_for_header object

content_for_header is a mandatory object located inside the theme.liquid layout file – more specifically, inside the HTML <head> tag:

{{ content_for_header }}

The whole purpose of this object is to load all the scripts that Shopify requires into the document's header dynamically....

Summary

In this chapter, we learned about different types of objects while considering various projects. Within our first project, Custom collection, we learned how to access single-valued attributes within the product object by creating a custom collection feature with a fully functional product form. The second project, Custom navigation, taught us how to access and handle objects whose attributes return an array. Working through the Product Customization project, we understood how to capture multiple data types, chain them with the selected variant, and output the same data on both the cart and checkout pages.

Besides working on different projects, we also had the pleasure of learning how to install new apps from the store and how to use a third-party app to create additional input fields within our admin, which gave us access to metafields objects.

Finally, we learned about the different types of content and special objects, why some are mandatory, where we can find them...

Questions

1. What are we missing in the following block of code to make form functional?

   {% form "product", product %}
     <input type="hidden" value="{{    product.first_available_variant.id }}" />
       <input type="submit" value="Add to Cart"/>
   {% endform %}

2. How can we get access to the product object through a link defined in the admin navigation?
3. What are the two approaches to accessing single and multiple metafield objects?
4. What adjustment do we need to make to the input element if we were looking to capture the line_item value and hide it on the checkout page?

   <input type="text" name="properties[Your Name]" placeholder="Your Name"/>

Practice makes perfect

In the previous chapter, we worked together through various projects and implementations. However, we can only gain a proper understanding by working on the projects ourselves and forcing ourselves to make that next step. So far, we haven't completed any personal projects as we were still learning the basics. However, with objects behind us, we are now set to start creating our own solutions.

The few mini-projects we will cover here will help us solidify some of our already attained knowledge from the previous chapters. It will also push our limits by forcing us to think outside of the box and find solutions for the problems that we haven't faced so far.

Each project will contain detailed information about what we need to do to help us achieve the results.

We recommend working on each project independently from the previous chapters since this will ensure that we have truly understood what we have learned so far.

No single project has either...