Shopify Theme Customization with Liquid

Ivan Djordjevic

• Publisher: Packt Publishing
• Year: 2021
• ISBN:
  9781801815116
• Edition: 1
• Topic: Computer Science
• Subtopic: Content Management Systems
• Index: Computer Science

Discover how to customize Shopify themes for your eCommerce websites with powerful tools and Liquid templatesKey Features• Get to grips with the Liquid core to build a solid foundation for working on any Shopify theme• Use JSON to create Shopify's famous modular sections with powerful and complex functionalities• Utilize the Shopify Ajax API to implement advanced functionality and make your eCommerce stores more dynamicBook DescriptionShopify is one of the fastest-growing eCommerce platforms, which means developers familiar with the Liquid concept are needed now more than ever. This book will help you to build a solid foundation by enabling you to develop your skills from the ground up by gaining essential theoretical knowledge of Liquid and putting that knowledge to use through hands-on projects.Shopify Theme Customization with Liquid begins by helping you get to grips with basic Shopify information, its interface and theme structure, setting up your Partner account, and creating a child theme, which is essential when preparing for any future work on Shopify. You'll then explore Liquid core features that will provide you with a basic understanding of the Liquid programming logic needed to develop any feature. As you advance to the latest and advanced features, you'll learn about JSON settings, allowing you to create any type of static or dynamic section - a must-have for becoming a competent Shopify developer. Finally, the book takes you through the Shopify Ajax API to gain the necessary skills needed to create a variety of dynamic features and content.By the end of this Shopify book, you'll be able to take on challenging projects to showcase your theme customization expertise to your future employer.What you will learn• Discover how to use logic and data comparison operators for various types of data within Liquid• Use Liquid core features such as objects, tags, and filters• Find out how to customize themes using JSON settings• Use metafield objects to generate unique content on any page• Understand how to output the local or external media content• Use Shopify's famous drag-and-drop feature to rearrange sections on a storefront• Take Shopify's dynamic functionality to a whole new level using REST API endpointsWho this book is forThis 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 designing professional e-commerce websites will 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 and the core of the Liquid and REST APIs, all the way through to the latest Liquid features that may be new to even proficient developers.

Section 1: Shopify Explained

In this section, we'll go through some theoretical knowledge around Shopify, theme structure, creating a development store, and working on a theme. After familiarizing ourselves with Shopify, we will start learning about Liquid, how its syntax works, and how we can use logical and comparison operators to manipulate the various data types that we have at our disposal.

This section comprises the following chapters:

• Chapter 1, Getting Started with Shopify
• Chapter 2, The Basic Flow of Liquid

Chapter 1: Getting Started with Shopify

From the very dawn of the internet, people saw the convenience of having information available at their fingertips. Ever since, people have been working hard on creating various internet applications and comprehensive services that will make our lives easier, and with these came e-commerce stores. Consequently, Shopify was born.

The first chapter sets a solid foundation for understanding what Shopify is and how it all works which, as practice shows, we often skip. The approach of cutting the theory and jumping straight into the syntax might sound tempting. However, even the tiniest ripples can cause considerable problems in the long run. While we will not go much into how Toby Lutke created Shopify, in this chapter, we are going to cover the following main topics:

• What is Shopify?
• How to start?
• Navigating the admin panel
• Managing a theme
• Understanding theme structure

By the end of this chapter, we will not only have learned what Shopify is, but we will also learn how to create an account under the Shopify Partners Program, create a development store to practice on, learn to navigate Shopify admin, and create a child theme and understand its structure. With this knowledge, we will have a solid foundation of how all these essentials will allow us to embark further on our learning journey to customize a theme on Shopify.

Technical requirements

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

What is Shopify?

Whether a developer or through general use of the internet, chances are that the name Shopify has come up at least once, but what is Shopify? Shopify is a multinational e-commerce company based in Ottawa, Canada, that offers various comprehensive services to its clients. This subscription-based service provides everything from buying the domain to building and managing a future dream store with ease.

Over the years of its existence, Shopify has proven that it is not just another store builder or a tool to sell products. Instead, it has established itself as an e-commerce powerhouse that allows anyone to build the store and create a unique experience for their shoppers. Being a template-based store builder, Shopify offers various free or paid themes to enable store customization, enabling you to use the intuitive and straightforward theme editor without any development knowledge. However, if the end goal is to create an utterly unique store with various customization options at our fingertips, then we will require a developer with Liquid knowledge to customize the theme and create additional options inside the code editor.

How to start?

The first step toward learning and working on Shopify requires us to learn about the Shopify Partners Program. The Partners Program is a platform created by Shopify that assembles people from all over the world and offers them the ability to build new e-commerce stores for store owners, design themes, develop apps, and refer new clients to Shopify. One of the most enticing extensions of the platform is that it will allow us to create a development store to practice our Liquid knowledge.

Before creating our Development store and familiarizing ourselves with Shopify, we will first need to create an account within the Shopify Partners Program. Creating the account is a relatively straightforward process, which we can start on the following page: https://www.shopify.com/partners:

1. We can begin the process by clicking on the Join now button in the top-right corner of the header or by clicking on the Log in button to access an existing account. After filling in the basic information on the create account page and the subsequent Account Information page, we will get our first view of the Partners dashboard:
   
   Figure 1.1 – Example of a Shopify partner dashboard
2. After creating an account, the next step will be to create our Development store. We can do this by visiting the Store link in the upper-left sidebar and pressing the Add store button, which will prompt a store registration form that we will need to fill in:

Figure 1.2 – Example of creating the Development store

Most of the options require no simplification as they are self-explanatory, but we will need to analyze the most important one, Store type, which consists of two options:

• Development store
• Managed store

For our learning purposes, we will be using Development store. However, we will also provide a short explanation of what the Managed store option means and when we can use it.

The Managed store option will enable us to request collaborator access to an existing store. Selecting this option will prompt another section named Permission, where we will need to choose the type of access that we are requesting. Generally, we can choose to request access to all areas of the client store. However, to perform theme customization on a client store, we will need access to the Themes option under Online store.

Once we have selected the permission level that we require to perform the work and have entered the URL of the store that we are requesting access for, all that is left is to send the request by pressing the Save button. The store owner will receive a notification of the store access request and then choose to grant or deny access.

The Development store options will allow us to create an entirely new store where we can practice our Liquid skills, test out new features before they are rolled out to the Shopify live storefront, or...