Shopify Theme Customization with Liquid E-Book

Ivan Djordjevic

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 376

Veröffentlichungsjahr: 2021

Beschreibung

Shopify 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.

Leseprobe

Shopify Theme Customization with Liquid

Design state-of-the-art, dynamic Shopify eCommerce websites using Liquid's powerful features

Ivan Djordjevic

BIRMINGHAM—MUMBAI

Shopify Theme Customization with Liquid

Copyright © 2021 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Aaron Lazar

Publishing Product Manager: Shweta Bairoliya

Senior Editor: Ruvika Rao

Content Development Editor: Rosal Colaco

Technical Editor: Karan Solanki

Copy Editor: Safis Editing

Project Coordinator: Deeksha Thakkar

Proofreader: Safis Editing

Indexer: Pratik Shirodkar

Production Designer: Ponraj Dhandapani

First published: September 2021

Production reference: 1220921

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80181-396-9

www.packt.com

To my mother, Sladjana Djordjevic, and the memory of my father, Jugoslav Djordjevic. Thank you for guiding me and helping me become the person I am today.

– Ivan Djordjevic

Contributors

About the author

Ivan Djordjevic comes from the small town of Prokuplje, Serbia. As a self-taught developer, he spent the first few years of his career working on different projects, but only when he came into contact with Shopify and learned about Liquid did he find himself. In 2016, Ivan joined Shopify Experts under HeyCarson, where he moved to the lead developer position after a few months. Since joining the Shopify family, Ivan found his passion in sharing his knowledge with other developers and guiding them on their way to becoming Shopify experts.

I want to thank all the people who have supported me through the years, especially Milos Ristic, Aleksandra Cugalj, and Nikola Skobo. You have been an inspiration and I am proud to call you my friends!

About the reviewers

Nikola Škobo is a developer and manager based in the beautiful city of Belgrade, Serbia. He has over 10 years of experience in development, and since 2016, he's been working exclusively on the Shopify platform as a product member of Carson. Starting as a front-end developer, he climbed his way up through various senior-level roles until becoming the head of operations. With this, he helped Carson to grow from a small-task service to a premium-level service, helping thousands of merchants in the process.

Nikunj Suthar is the founder and CEO of Sibyll Software Private Limited and also a CTO at Webinopoly Inc. Before becoming a company founder in July 2016, Nikunj was employed as a project manager in an IT company and was responsible for all of the company's operations, including end-to-end management of project's meetings, daily activities, and service and support in all markets and countries.

Prior to founding Sibyll Software, Nikunj was also the CEO and was responsible for managing all of the projects. Nikunj earned a diploma from the Institution of Electronics and Telecommunication Engineers (IETE). Nikunj is also passionate about writing poetry in Hindi and Urdu. He is a well-rounded individual who lives with passion, dedication, and grace.

Table of Contents

Preface

Section 1: Shopify Explained

Chapter 1: Getting Started with Shopify

Technical requirements

What is Shopify?

How to start?

Navigating the admin panel

Core aspects

Sales channel

Settings

Managing a theme

Understanding theme structure

Header

Sidebar

Summary

Questions

Further reading

Chapter 2: The Basic Flow of Liquid

Technical requirements

What is Liquid?

Understanding Liquid and its delimiters

Learning the comparison operators

Working with logic operators

Understand the types of data

Strings

Number

Boolean

Nil

Array

EmptyDrop

Controlling whitespace

Summary

Quiz

Section 2: Exploring Liquid Core

Chapter 3: Diving into Liquid Core with Tags

Technical requirements

Getting things ready

Creating the product page

Creating the collection page

Updating the navigation menu

Controlling the flow of Liquid

The if/else/elsif tags

The and/or tags

The case/when tags

The unless tag

Variable tags

The assign tag

The capture tag

The increment tag

The decrement tag

Iterations tags

The for/else tags

jump statements

The for parameters

The cycle tag

Theme tags

The layout tag

The liquid and echo tags

The form tag

The paginate tag

The render tag

The raw tag

The comment tag

Deprecated tags

Summary

Questions

Chapter 4: Diving into Liquid Core with Objects

Technical requirements

Working with global objects

Custom collection

Custom navigation

Product customization

Improving the workflow with metafields

Setting up a metafields app

Rendering the metafields value

Content and special objects

The content_for_header object

The content_for_index object

The content_for_layout object

Summary

Questions

Practice makes perfect

Project 1

Project 2

Chapter 5: Diving into Liquid Core with Filters

Technical requirements

Working with HTML and URL filters

Building a product gallery

Enhancing the product media gallery

Building product accordions

The split filter

The index filter

Math and money filters

Product discount price

Exploring the additional filters

The default filter

The t (translation) filter

The JSON filter

Summary

Questions

Practice makes perfect

Project 3

Section 3: Behind the Scenes

Chapter 6: Configuring the Theme Settings

Technical requirements

Exploring JSON settings

Learning about the input setting attributes

Basic input types

Specialized input settings

Organizing the theme editor

The header type

The paragraph type

Glancing at the deprecated settings

The font input

The snippet input

Summary

Questions

Chapter 7: Working with Static and Dynamic Sections

Technical requirements

Static versus dynamic sections

Working with the section schema

The name attribute

The class attribute

The settings attribute

The presets attribute

Building with blocks

The max_blocks attribute

Enhancing pages with JSON templates

Building a JSON template structure

Upgrading a JSON template with metafields

Exploring section-specific tags

The stylesheet tag

The style tag

The javascript tag

Summary

Questions

Practice makes perfect

Project 4

Chapter 8: Exploring the Shopify Ajax API

Technical requirements

Introduction to the Shopify Ajax API

Updating the cart session with a POST request

The /cart/add.js endpoint

The /cart/update.js endpoint

The /cart/change.js endpoint

The /cart/clear.js endpoint

Retrieving data with a GET request

The /cart.js endpoint

The /products/{product-handle}.js endpoint

The /recommendations/products.json endpoint

The /search/suggest.json endpoint

Summary

Further reading

Assessments

Appendix

Other Books You May Enjoy

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 [email protected] 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 [email protected] 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.

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 ShopifyChapter 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 panelManaging a themeUnderstanding 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:

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

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 storeManaged 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 create a new store that we can later transfer to our client.

Important note:

While creating the Development store is completely free of charge, in transferring the store to the client, the theme will automatically lose development status. The person to whom we have transferred the ownership will need to select a recurring plan for which the developer who initially created the theme will receive a recurring commission for as long as they are paying for their subscription plan.

Let's create our development store by selecting Development store as the store type and filling in the store information.

Tip:

The developer preview is a new feature that Shopify has rolled out recently and will allow us to preview the innovations they are rolling out before they hit the live storefront. However, we will abstain from using this option.

Once you have filled in the login information, store address, and have selected the purpose of the store, press the Save button to create your store.

Success! Our store is ready to go, and with it, we are ready to proceed to familiarizing ourselves with the Shopify admin panel.

Navigating the admin panel

With the creation of a new development store, we will get the first glimpse of our store home page. The home page consists of the middle screen, which will contain some general advice for store owners to start their business, daily tasks, recent activity, and, on the left side of the screen, we will see the sidebar, which will be our primary focus.

Figure 1.3 – Example Shopify admin home page

While we will not go into much detail straight away, it is imperative to have a basic understanding of each area of the store that we will be referencing later through different chapters of the book. We will split the sidebar into three sections for ease of reference, and we can list them as follows:

Core aspectsSales channelSettings

Core aspects

The first section, Core aspects, contains the store-related options that the store owner generally uses, and this includes the following information:

The Orders section contains all the information regarding the orders that the store owner has received. It is here that the store owner can preview each order individually and decide whether they would like to proceed with it. The owner may also manually create orders using the draft method and preview the abandoned checkout.The Products section consists of four separate areas that allow us to create and manage products, handle incoming inventory for the existing products, create and manage collections or product categories if you prefer, and create gift cards.The Customers section, as the name suggests, allows us to create and manage our customer database. This section, along with the previous Products section, will be of particular interest to us. We will return to them later with a detailed explanation of some of their functionalities that will be of interest to us.The following section, named Analytics, will primarily be used by the store owner. It offers a great deal of information regarding the store's performance, such as a detailed report on sales, along with a live view of the customers visiting the store and their behavior.The Marketing section, as its name suggests, allows us to view the store market strategy overview. We can create and manage campaigns via emails or other social networks and create automation to increase the store retention rate.We can use the Discount section to create a discount coupon code that we can share with our customers to manually enter the checkout to receive a discount on their complete order or a specific product. Additionally, we can make an automatic discount that will automatically trigger once we fulfill the requirements set by the store owner.The last section, named Apps, grants us a quick preview of all the apps installed on our store where we can manage or remove the apps if we choose to.

Important note:

Due to the Shopify platform's limitations, it is impossible to combine the discounts. If we have qualified for the automatic discount of 10%, we will not be able to enter the manual discount coupon code for free shipping that we have previously received from the store owner.

Tip:

While it is possible, you should never install an app on your own when working under a collaborator account on the managed type of store. Suppose you require a particular app to perform a task entrusted to you. In that case, you should reach out to the store owner, explain the need for it, and ask them to install it for you before proceeding, as they will need to grant specific permissions and share the store data with the app that should be reviewed and accepted by the store owner.

Sales channel

The second section of our sidebar, Sales channel, represents the various platforms we can use to sell our store products. By default, the only visible channel is Online store, which will be our primary objective; however, we can easily add more by clicking on the plus button next to the sales channel.

The Online store channel is the heart of the store as it provides us with the ability to output a visible storefront for our customers, and we can break it down into six individual sections:

The Themes section allows us to manage our store look by customizing our store theme to our unique brand. The first thing that we can sometimes see once we open the Themes section is the note from Shopify that our online store is password-protected, meaning that the store is not yet visible to our customers. While password protection is in place, every visitor who tries to view our store will only see a notification that the store is password-protected and is currently inaccessible.

Important note:

We can easily disable password protection by clicking the See store password button on the password protection note in the Themes section or by visiting the Preferences section in the Online Store section. However, considering that we have selected the development option as our store, disabling password protection is unavailable. We can only remove password protection after transferring the store to our client or purchasing a subscription plan of our own.

After the password protection note, the next area that we can see under our Themes section is named Current theme. This section shows us the name and a small preview of the current theme, followed by the Online store speed section, which provides us with our store's speed report. The Online store speed section is currently disabled for password-protected stores.

Following the previous section, near the bottom of the screen, we can find the last section named Theme library. We can easily explore free and paid themes within this area by selecting their respective links or uploading our custom-made theme by choosing the Upload theme button.

The Blog posts section allows us to manage and create blog posts that we would like to show on our store and categorize them under different blogs.The Pages section allows us to create multiple pages that our customers will be visiting frequently, such as the About us or Contact us pages, or the pages supporting our products by offering in-depth information. For more information on managing pages, refer to https://help.shopify.com/en/manual/online-store/pages.Inside the Navigation section, we can find the necessary tools that will allow us to create navigation with up to two-level nested menus that our customers can use to navigate our online store. For information on creating the navigation menu and managing the link list, refer to https://help.shopify.com/en/manual/online-store/menus-and-links.The Domains section shows us our current primary domain, which uses the format my-store-name.myshopify.com. Additionally, we can purchase a custom domain by using the Buy new domain button, or if we have obtained a domain through a third party, we can then set that as our primary domain. For more information on domains, refer to https://help.shopify.com/en/manual/online-store/domains.The last and final section under our Online store channel is named Preferences. As most of the options under this section are self-explanatory, we will not be going into too many details to keep the book to the point. However, if you would like to read more about each of them, you can visit their respective pages, which we will list, to get additional information. The Preferences section allows us to regulate some important settings that will help the store owners with their future store, and we can list them in the following way:Title and meta description: For detailed information on the title and meta description, refer to https://help.shopify.com/en/manual/online-store/setting-up/preferences#edit-the-title-and-meta-description.Social sharing image: For detailed information on social sharing images, refer to https://help.shopify.com/manual/using-themes/change-the-layout/theme-settings/showing-social-media-thumbnail-images.Google Analytics: For detailed information on Google Analytics, refer to https://help.shopify.com/manual/reports-and-analytics/google-analytics.Facebook Pixel: For detailed information on Facebook Pixel, refer to https://help.shopify.com/manual/promoting-marketing/facebook-pixel.Customer privacy: For detailed information on customer privacy, refer to https://help.shopify.com/en/manual/your-account/privacy/cookies.Password protection: For detailed information on password protection, refer to https://help.shopify.com/manual/using-themes/password-page.Spam protection: For detailed information on spam protection and usage of Google reCaptcha, refer to https://help.shopify.com/en/manual/online-store/setting-up/preferences#protect-your-store-with-google-recaptcha.

Settings

The third and final section of our sidebar, named Settings, contains many options to help store owners set up and run their store. Due to the significant number of sections and subsequent options inside Settings, we will not be covering all of them, but we will mention some of the options that will be of interest to us in some of the following chapters of the book.

Managing a theme

We have already mentioned this topic under the Themes section, but what is a theme? The theme is a master template file that controls your store layout, which allows us to change the storefront layout by editing the code or editing the theme editor settings through this template.

By default, a debut theme is automatically added as a starting theme when creating a new store. However, for our learning purposes, we will try and install a theme of our own:

The first thing that we need to do is to position ourselves in the Themes section inside the Online store sales channel. Once inside, scroll down until you reach the area named Theme Library and search for and click on the button called Explore free themes:

Figure 1.4 – Exploring the free Shopify theme

By pressing the Explore free themes button, we will see a popup containing the eight free Shopify themes to add to our store and the Debut theme, which we already have installed and is marked with the label Current:

Figure 1.5 – Selecting the free Shopify theme named Minimal

While we can choose any of these themes, let's select the second column theme inside the third row called Minimal by clicking on it.

As with most themes, the Minimal theme contains multiple styles, such as Modern, Vintage, and Fashion. While all of these are great choices, we will select the Modern option for our learning purposes. Once you have chosen the Modern option, click on the Add to theme library button to finalize the process and add the newly selected theme to our store's theme library:

Figure 1.6 – Selecting the style for the selected theme and adding it to the theme library

Depending on your internet connection, it might take a few seconds while Shopify loads in your new theme, after which you will receive a notification that the Minimal theme was successfully added to your store. Even though we have added a new theme to our store, the Debut theme is still our live theme, whereas if we look under the theme library, we will see our newly added Minimal theme. To change that, we will need to set our new theme as the current theme.

We can publish a new theme live by scrolling down to the theme we are looking to publish live. In our case, that theme is Minimal. Click on the Actions button and then click on the Publish button, after which a popup will appear asking for confirmation to publish the Minimal theme live. Press the Publish button for the second time to confirm our choice, which will automatically publish and set the Minimal theme as our store's current theme:

Figure 1.7 – Publishing a new Shopify theme live

Now that we have installed the new theme, it is time to preview how our new theme looks in our store. We can do this by clicking on the Actions button:

Figure 1.8 – Previewing the theme storefront

However, this time, the Actions button we should click on will be on our current theme, not our theme library, and then select the Preview button, which will open our store preview in a new tab.

As we can see from the preview page that has opened for us, the storefront does not look appealing, as it lacks content. We can only see some default sections with placeholder images.

Before we make any changes to our storefront, we should first create a duplicate theme to test our changes without the fear of it crashing our live storefront and causing us harm. However, before we start the duplication process, let's return the Debut theme as our current theme by publishing it live again. We like the Debut theme more in any case, plus it will help us practice what we just learned.

Tip:

Creating a new duplicate theme should be our number one thought before making any major modifications to our theme. Having multiple theme duplicates will help us pinpoint any potential issue caused by an app or a simple oversight that will break our live storefront, which will inevitably happen at some point.

After setting the Debut theme as our current store theme, click the Actions button on our current live theme and then click on the Duplicate button to start the theme duplication process:

Figure 1.9 – Starting the theme duplication process

Considering that this is a newly installed theme without any content, the duplication process should not take too much time. After the process is complete, you will notice that we added a new theme to our Theme library, named Copy of Debut.

Important note:

Creating a duplicate theme each time you decide to make a significant modification is encouraged. However, we should keep in mind that Shopify only allows up to 20 duplicate themes per store. After we reach that limit, we will receive a notification that we have reached a limit of 20 duplicate themes per store. This limitation will also prevent us from creating a new theme duplicate, and if we want to make another one, we will need to delete some of the older theme duplicates that we no longer use.

By default, Shopify will automatically take the name of the theme we are duplicating and add the words Copy of in front of it. In view of the fact that having multiple similarly named themes can quickly get out of hand, we should immediately rename our new theme to avoid potential future confusion.Click on the Actions button on our newly created Copy of Debut theme, and select the Rename option:

Figure 1.10 – Example of renaming the theme and its confirmation

This action will automatically prompt you with a popup where you can enter a new name. Shopify provides us with up to 50 characters to name our new theme, which gives us plenty of space to select a proper name. You should include supplementary information such as the date and what customization it contains. In our case, we will name the theme Debut - Learning Shopify - 19 Apr '21, and after, we will click on the Rename button to confirm our choice.

Now that we have learned how to create and rename a duplicate theme, it is time to dive into our newly created theme and learn more about how it works.

Understanding theme structure

To start familiarizing ourselves with the theme structure, we will first need to open the code editor. We can open the code editor by clicking on the Actions button on the Debut - Learning Shopify - 19 Apr '21 theme and then clicking on the Edit Code button, where we will have the first view of our code editor.

We can divide the code editor into the following two sections:

HeaderSidebar

Header

We can find the Header section at the top of the page, and it contains the name of the theme with the arrow button to exit the editor on the left side and three buttons on its right side, named as follows:

PreviewCustomize themeExpert theme help

Preview

The first button on our list, the Preview button, will allow us to quickly preview the duplicate theme that we are working on and any changes that we have made. While the current preview of our theme contains only placeholder content, it does contain one element that will be of great use to us, the preview bar:

Figure 1.11 – Example of the preview screen and preview bar

We can find the preview bar at the bottom part of our preview screen, and it contains the name of the theme that we are previewing on the left side, and on the right side, it includes three buttons:

The close preview button will automatically close our duplicate theme preview and redirect us to our live theme's home page.Clicking the Share preview button will trigger a popup that we can share with anyone to provide them with a glimpse of the changes we make on our same theme. While anyone who possesses this link will be able to view all aspects of your new theme, they will be unable to complete any purchases or reach the checkout page. In addition, the autogenerated preview link will only last for 14 days, meaning that after 14 days, you will need to generate a new preview link by repeating the preview steps and share it again with whomever you choose to.The last button in our preview bar is called Hide bar, and, as its name suggests, it allows us to hide the preview bar so that we can preview our changes without any visual obstacles. Note that the preview bar will automatically show itself when refreshing the page.

Customize theme

Under our editor's Header area, the next item is the Customize theme button, which will open another different kind of editor, a theme editor. Inside this editor, we can update some of the theme settings, such as typography, colors, and media links, and even manage the storefront sections.

Expert theme help

Finally, the Expert theme help button is something that the store owners will be using to post a job request using the Shopify Partners Program, whereby, at the end of this book, you will be in waiting as a Shopify expert.

Sidebar

The second section inside the code editor, Sidebar, lists all the files and directories we will be referencing; however, at the moment, we are unable to see all the directories. We can resolve this by clicking on the Layout and Templates directories to collapse them:

Figure 1.12 – Collapsing the directories inside the code editor

After collapsing the two directories, we will notice that the two arrows inside the directory icon are now gone and that we can now see the additional four directories that our theme contains. The Shopify theme contains the following directories:

LayoutTemplatesSectionsSnippetsAssetsConfigLocales

Layout

The Layout directory is the main directory of our theme as it contains the essential files that our store requires to work. This directory usually contains up to four files, which we can call theme layout templates, described as follows.

gift_card.liquid

gift_card.liquid is a template file containing the code that renders the gift card page and is later sent to our clients via email notifications when they purchase a gift card.

password.liquid

The password.liquid file template renders the online store password page that any of our customers will see if they visit our store while the store is in development mode. We mentioned what password protection is and how to disable it back in the Navigating the admin panel section when discussing Sales channel and its Online store area.

To better understand the password protection page, let's try and preview it to see how it works. You can preview your store password page by combining the URL of your store, https://my-store-name.myshopify.com, and adding the word /password at the end.

Figure 1.13 – Example of a Shopify password protection page

As we can see, password protection contains only the most basic information. However, it is successfully doing the work that we designed it for by preventing people from viewing our password, still in the Development store.

In the top-right corner of our password protection page, we will notice a button, ENTER USING PASSWORD, that will launch a popup where we can log in to our store using our store owner credentials and then click on the Log in here link, which will redirect us to our admin panel:

Figure 1.14 – Password page login form

However, what if we wanted to preview our theme storefront by entering the password? The password that this form is requesting is the same password that we have set to enable our password protection page. In our case, it was automatically generated by the system when we selected the development option as our store type.

To ascertain our password protection page's password, we need to return to our admin panel by typing https://my-store-name.myshopify.com/admin in the URL of our new browser tab. Once inside, in the left sidebar, under Sales Channel, expand the Online store field by clicking on it and then click on the Preferences option. Under the area named Password protection, you will find the password needed for our password page form to gain access to our storefront:

Figure 1.15 – Password protection page settings

Suppose we were to return