Preface

Nowadays, we usually learn new material using the various information found on forums and blogs, and we rely on the information we come across. Depending on the time spent on those articles, you will often skip some fundamental concepts, leaving even experienced programmers surprised when we discover some new and easier way to do something. This book covers the basic knowledge of Liquid and some advanced concepts that will set you on a proper path toward adding Liquid to your portfolio.

Liquid is an open source project created by Shopify co-founder and CEO Tobias Lütke. As a template language, Liquid variables connect the Shopify store's data to the static HTML content in our theme, allowing us to turn a static template into a fully dynamic and powerful e-commerce store, producing impressive results. Since 2006, Liquid has been growing and evolving. Today, many different web applications rely on Liquid, Shopify being one of those, which shows that the need for Liquid is ever-growing.

We can divide the book into three major sections. In the first section, we will get familiar with some basic information about Shopify, understand the Shopify interface and its theme structure, and start familiarizing ourselves with Liquid. Even though these topics might not sound that important, they will allow us to understand Shopify and Liquid at the foundational level. By understanding these basics, we will learn how to face problems in these areas, which are inevitable and frequent.

The second section of the book we will dedicate entirely to Liquid's core features, without which we will not be able to create many wonderfully complex components. While we will not go over every object, tag, and filter that exists, we learn about the essence of Liquid core and draw attention to some commonly used development techniques.

The third and final section of the book will take us behind the scenes, where we will learn how to use JSON to create easily configurable options that are the soul of a Shopify e-commerce store. Finally, we will learn how to use the Shopify Ajax API combined with the Liquid features covered previously to create powerful features and make our code more dynamic.

Who this book is for

This book is for beginners and experienced CMS developers who want to learn about working with Shopify themes and customizing those themes using Liquid. Web developers working on designing professional e-commerce websites would also find this book useful. Besides familiarity with standard web technologies (HTML, CSS, and JavaScript), this book requires no prior knowledge of Shopify or Liquid. The book covers everything from Shopify fundamentals, the core of Liquid, and the REST API, all the way to the latest Liquid features that may be new even to proficient developers.

What this book covers

"Share Your Thoughts" on page xvi, Getting Started with Shopify, creates a solid foundation for understanding what Shopify is, how it all works, and other essential knowledge that, as practice shows, is often skipped. The approach of cutting the theoretical and jumping straight into the syntax might sound tempting, but as we all know, even the tiniest ripples can cause considerable problems in the future. While we will not go much into how Toby Lütke created Shopify, we will cover some essential topics, including creating a private development store, creating a child theme, explaining theme structure, and other essential topics that we need to know.

Chapter 2, The Basic Flow of Liquid, helps us learn what Liquid is and how to write it by explaining the Liquid syntax. We will also go over logical and comparison operators, what types of data we can use within Liquid, what handles are, and other essentials. By learning how to use logical operators and manipulate handle attributes, we will also learn how to combine them to create various dynamic features.

Chapter 3, Diving into Liquid Core with Tags, covers programming logic, or in short, tags. There are many types of tags, such as control flow tags, which allow us to output a block of Liquid code based on various conditionals through iteration tags that will repeatedly run a block of code. Additionally, we will learn about the different types of variable tags we can use to store data, as well as theme tags that will allow us to render theme-specific tags.

Chapter 4, Diving into Liquid Core with Objects, helps us understand what content objects are, why they are mandatory, and how to use them, which is the first step in creating future templates. After that, we will move to global objects, the knowledge of which will open a new door for us and output our dynamic content on any page. Lastly, we will learn what metafield objects are and utilize them to output unique content on any page.

Chapter 5, Diving into Liquid Core with Filters, is a crucial topic of Liquid core, which will allow us to create or manipulate different types of data, which is a compelling feature. With Liquid filters, we will gain a more profound knowledge of how Liquid works and how easily we can output dynamic data such as the image HTML tag, calculating the product discount, and handling font variants.

Chapter 6, Configuring the Theme Settings, helps us learn about JSON settings and why these files are so important to us. Later, we will move to a more direct approach to the topic by learning what types of settings we can use inside our JSON files and the difference between the basic and specialized input settings.

Chapter 7, Working with Static and Dynamic Sections, will help us understand what sections are and how to use them to create easily configurable content through the Shopify theme editor. We will learn how to create static and dynamic sections and their counterpart blocks, which play a considerable role in theme development. Lastly, we will learn more about the newly introduced JSON-type templates and how we can combine them with metafields to create genuinely unique and easily configurable content on any page.

Chapter 8, Exploring the Shopify Ajax API, takes us through the Shopify Ajax API and explains its requirements, limitations, and possible use cases. Additionally, we will learn how to make different types of requests to the Shopify API. We will learn how to retrieve product information, add any number of products to the cart session, and read the cart's current content. Lastly, we will learn how to make a request through the Shopify API and retrieve the necessary information to create the product recommendation and predictive search feature.

Appendix, Frequently Asked Questions, contains additional guidelines, advice, and answers to the questions common for developers who are just getting started on entering the world of Shopify and Liquid.

Assessments, contains the answers to the questions from all the chapters.

To get the most out of this book

Shopify is a hosted service, and it does not require any particular setup or software/hardware. However, to get the most out of the book, developers should already be familiar with basic HTML markup, CSS, and understand the JavaScript scripting language, which we will need later during this book.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book's GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

While it might be short, I wholeheartedly hope that you will enjoy this little adventure of ours and learn a few things along the way. My intention for the book was to offer a vast array of theoretical knowledge backed by real-life examples and suggestions on how to work with a real-life project, where you can see how it all ties up together.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Shopify-Theme-Customization-with-Liquid. If there's an update to the code, it will be updated in the GitHub repository.

We have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Code in Action

Code in Action Videos for this book can be viewed at https://bit.ly/3nHIQtD

Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781801813969_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "We can easily translate most of the attributes inside the schema tag by including the translation keys as the name attribute value."

A block of code is set as follows:

{% section "related-product-1" %}
{% section "related-product-2" %}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

{% schema %}
{
  "name": "Announcement bar"
}
{% endschema %}

Any command-line input or output is written as follows:

_9VUPq3SxOc
youtube

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "Any section added to the theme via the Add Section button will allow us to include different content for any occurrence, and we can repeat it any number of times."

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [e-mail] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [e-mail] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read Shopify Theme Customization with Liquid, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.