Search Results for: theme development

Whether you are new to Shopify, or you are already a Shopify store owner, you’ve probably encounter a code that looks something like this:

{% assign first_model = product.media | where: "media_type", "model" | first %}
{% if first_model %}
{{ 'product-media.js' | asset_url | script_tag }}
{% endif %}Code language: PHP (php)

This is Shopify liquid, a template language created by Shopify that serves as a framework for all Shopify themes. If you’re unfamiliar with Shopify themes, they are the templates that controls the styles and the layout of your online stores. So, if you wish to customize your online store, it’s best to learn liquid programming.

In this article, we’ll take a look at Shopify liquid.

We’ll start by understanding the Shopify liquid programming, and then we’ll learn about its features such as:

• Objects in Liquid
• Tags in Liquid
• Filters in Liquid

So if you’re ready, let’s begin learning Shopify liquid!

Video Tutorial

Do you prefer video tutorials instead of reading? You may watch the video version of this article below:

What is Shopify Liquid?

Shopify liquid is a template language used for creating or modifying Shopify themes. If you’re familiar with Ruby, you probably have heard about this template language because it’s written in Ruby or it’s known to be written in Ruby, but in terms of syntax, it’s very different compared to other programming languages.

In addition, Shopify liquid is very limited. Like there’s a lot that you cannot do with liquid. For example, you cannot retrieve a data from a third party server. Just from Shopify.

What is it used for?

Shopify Liquid is mainly used as the “backend template language” of Shopify themes. Meaning, it is only used to control what is displayed in the Shopify storefront. Don’t get the wrong idea though because Liquid cannot do many things like connect to a third-party server, creating directives, etc.

In web development, there are two contents that you can render: static content and dynamic content.

Static content is a content of a page that stays the same and is usually hard-coded in HTML whereas dynamic content. It’s the content of a page that changes depending on specific parameter.

For example, we have the following product page.

It specifically rendered the product for cats because in the URL, we specified that we want to render this specific product.

The highlighted text above is called a handle. By changing this to a different handle of a product, the product page will render a different product.

In addition to that, Shopify uses its own architecture or template files to display this pages.

For example, the product page is using product.json. It’s a JSON template that uses sections to complete the page, taking a closer look at the section files you will see that there’s a liquid code mixed with HTML, CSS, and JavaScript.

{% comment %}theme-check-disable TemplateLength{% endcomment %}
{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-rte.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}" media="print" onload="this.media='all'">

<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>

{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{%- if first_3d_model -%}
  {{ 'component-product-model.css' | asset_url | stylesheet_tag }}
  <link id="ModelViewerStyle" rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css" media="print" onload="this.media='all'">
  <link id="ModelViewerOverride" rel="stylesheet" href="{{ 'component-model-viewer-ui.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}

<section class="page-width">
...Code language: HTML, XML (xml)

Note that the code above is just an example of what code can a liquid file have.

So to put it simply Shopify Liquid is like the middle man between Shopify stores and the server of Shopify (where all the data about your Shopify store is stored).

When a Shopify store asks for a data through liquid, Shopify liquid will ask the server of Shopify if that data that is being requested is available.

If the server returns 200 OK, then the server will give the requested data back to liquid. Then liquid will hold that data and bring that to the Shopify store’s theme.

If the requested data is not available, then the server of Shopify will just return a 404 error response. Meaning, Shopify liquid won’t have anything to bring.

Shopify Liquid Features

Shopify liquid is categorized by three features: objects, tags, and filter.

Objects

Also known as variables are wrapped in double curly braces {{ }}. And it’s used to output pieces of data from a Shopify store. For example, this is a shop object:

{{ shop }}

Inside of the shop object, there are properties or attributes that you can use by using dot notation ( . ).

Let’s say we use the name attribute. It should be something like this:

{{ shop.name }}

So you’re going to type it like above. The above attribute should render the name of your Shopify store.

There are plenty of attributes that you can use from most of the objects in Shopify. So if you wish to learn more about these objects and attributes, I suggest going to the Shopify developers’s documentation page and get to know these attributes or objects. Now let’s proceed to tags.

Tags

Tags in Shopify liquid are the programming logic that tells templates what to do. This tags are wrapped in curly braces, followed by percentage symbols {% ... %}.

And it’s usually followed by a closing tag or an end tag {% end... %}.

Tags are divided into four categories: control flow, iteration, theme, and variable tags.

Control flow tags are the tags that you can use to create conditions. These control flow tags are the:

• if
• unless
• else/elsif
• case/when

And lastly, the operators and/or.

To create a tag, you need to start it with a tag itself. Say, for example, the, if tag:

{% if condition %}
...

Then you need to close it with a closing tag.

{% if condition %}
...
{% endif %}
Code language: PHP (php)

However, not all tags are required to have a closing tag. A good example of this is else or elsif. These tags can only be used between if and, endif.

For example:

{% if condition %}
...
{% elsif condition %}
...
{% else %}
...
{% endif %}
Code language: PHP (php)

Now, if you want to create multiple conditions for a control flow tag, you can use the operators and, or, or.

For example, we have the following condition:

{% if condition_A and condition_B %}
...

If you’re using and, the two conditions (condition_A and condition_B) must be true in order to execute the block of codes inside of the if.

If you’re using or, either of the two conditions can be true, it will still execute the code inside of the if tag.

{% if condition_A or condition_B %}
...

Now, all of this are part of the fundamentals of programming. And so if you’re a familiar with it, I suggest go and learn that because that’s quite a huge topic for this article.

There are plenty of good resources out there that will teach you everything about programming like the Introduction to Programming and Computer Science by freeCodeCamp.

Next is the iteration tags.

Iteration tags are the tags that you can use to repeat blocks of code. This is where you can use the for tag to loop through an array of values. For example, we have the following for tag:

{% for product in collection %}
{{ product.title }}
{% endfor %}Code language: PHP (php)

In the example above we have a condition that for each product in the collection, we are going to render the name of the product.

So for example, in that collection, we have three products: Product #1, Product #2, and Product #3. The entire code above will basically output three, heading title ones (<h1>) with a text: Product #1, Product #2, and Product #3.

You can also combine for tag with an {% else %} tag. This is very useful too, especially if you want to know whether the {% for %} tag executed the codes inside of it or not.

Next up are the theme tags.

Theme tags are the tags that you can use:

• to generate template specific HTML codes;
• to divide arrays into multiple pages, and;
• to tell Shopify themes to render or use a specific layout or snippets.

So this is where you’ll find the form tag, the section tag, the pagination tag, and the layout tag.

Lastly, is the variable tags, variable tags are the tags that you can use to create liquid variables. If you’re familiar with JavaScript or other programming languages, you can create variables (most of the time) using var keyword or a data type. In Shopify liquid, you can use either the {% assign %} tag or {% capture %} tag to create variables.

So how can you create a variable?

{% assign variable_name = shop.name %}

In the example above, we use the assign tag to create a variable. You can create the assigned tag, followed by the name of the variable. Then followed by an equal sign to create or assign a value. In the example above, we used the name of the Shopify store.

Now, if you use this variable, like how you use an object, this will output the name of the Shopify store.

Now let’s continue to the last feature of Shopify liquid. And that is the filters.

Filters

Filters are kind of hard to explain, but to put it simply, they are methods that modifies the value or the output of an object.

They are placed within an object tag and it’s denoted by a pipe symbol.

Now let’s take a look at this example above. Here we have a product.title object. Now we can use a filter by adding a pipe symbol and then specify what filter that you want to use. Let’s say we use the upcase filter.

{{ product.title | upcase }}

This will then change the output of the object and make the string output all uppercase. That’s basically how filters work. They change or modify the output of an object.

Now, there are plenty of filters that you can use for every situations. There are filters for strings, for numbers, for arrays, for URLs, for colors, et cetera, but they all do the same thing. They modify the value or the outputs of an object.

Closing lines

So that is Shopify Liquid, a template language used for rendering pieces of data from a Shopify store. Now, if you have any question, let me know in the comments below, otherwise, feel free to subscribe to our YouTube channel and like the attached video. We have plenty of good videos in our channel so feel free to check them out! If you have request, let us know!

So you’ve built a new Shopify store or let’s just say you’re using now the new Shopify theme called Dawn. Now you wanna customize it, but the problem is you don’t know how to do it because it’s a new Shopify theme and it’s written differently compared to the previous Shopify theme Debut.

You see, Shopify just recently rolled out the Online Store 2.0 and new Shopify themes must be using JSON templates for Shopify Theme Development instead of the previous liquid templates.

This made it very confusing especially to those merchants who are used to the old template system. But don’t worry, I’m going to walk you through how to customize the Shopify theme Dawn.

So, what are we going to add to Dawn, you ask?

In this article, we will be creating an FAQ page for the Shopify theme called Dawn. If you don’t know, I’ve already created a lesson about the same topic but back then we were using Debut. So I personally feel like this needs to be recreated.

Video Tutorials

If you’re still using Debut, and you’re interested to learn how to create an FAQs page without using any apps, feel free to watch the video tutorial below.

Otherwise, you can watch me do what’s written in this article in the video below.

Getting Started

In order for this to work, we’re gonna need three (3) things. The first is the page that will render the FAQs. The second is the JSON template that we will use on our page and the third is the liquid codes and a stylesheet to render the FAQs.

This may sound too much for you but it’s honestly not that difficult.

If I’m gonna be honest with you, there’s a simpler and shorter way to create an FAQs page for Dawn, and that is by using sections and schema settings. However, I would like to guide you on how to create a JSON template so that you understand how JSON templates work.

Okay, I’m talking too much, let’s start and create the FAQs page.

How To Create FAQs Page for Dawn

We’re going to divide this section into three (3) parts:

1. Creating the JSON template for the FAQs page
2. Creating the page in the admin
3. Creating the accordions

Let’s start by creating the JSON template for the FAQs page.

Create the JSON template

Open your Shopify store admin page. Then, access the Online Store’s theme page, and there open the Code Editor by clicking the actions dropdown menu and there select Edit Code.

Once you have the Code Editor page loaded, the next thing that you’re going to do is to create the JSON template and the template section for the JSON template. Sounds confusing? Let’s do it step by step.

First, open the Templates folder and click the Add a new template file. Then, for the “Create a new template for” select page. Then, for the “Template type“, make sure you’re using JSON. And lastly, name the template file page.faq.

Once the file is created, apply the following code:

{
  "sections": {
    "main": {
      "type": "main-page-faq"
    }
  },
  "order": ["main"]
}
Code language: JSON / JSON with Comments (json)

In the JSON template above, we are referencing a section file called main-page-faq, so of course, we’re going to create that file.

So open the Sections folder and click the Add a new section file and name the file main-page-faq.

Once the file is created, we’re going to apply the same code that we have from the main-page.liquid section file. But, you can just copy the following code below:

<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>

<div class="page-width page-width--narrow">
  <h1 class="main-page-title page-title h0">
    {{ page.title | escape }}
  </h1>
  <div class="rte">
    {{ page.content }}
  </div>
</div>

{% schema %}
{
  "name": "FAQs Page",
  "tag": "section",
  "class": "spaced-section"
}
{% endschema %}

Code language: HTML, XML (xml)

Awesome! Now we have the JSON template and the template section ready. Let’s continue by using them on a new page.

Create a new page called FAQs

Go back to your Shopify admin page and access the Online Store’s “pages” page. Then, create a new page and call it FAQs (or whatever you wish to call it) and make sure that the Theme template it’s using is set to faq.

Nice! Now we have the page to render the accordions. The last thing that we need to do is to write the code for these accordions.

Create the accordions for FAQs

Go back to your main-page-faq section file and update its code to the following:

<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>

<div class="page-width page-width--narrow">
  <h1 class="main-page-title page-title h0">
    {{ page.title | escape }}
  </h1>
  <div class="rte">
    {{ page.content }}
  </div>
  
  <div class="faq-container">
    <div class="tabs">
    	{% for block in section.blocks %}
      		{% assign item = block.settings %}
      		
      		<div class="tab">
      			<input type="checkbox" id="faq_checkbox_{{ forloop.index }}" class="faq-checkbox">
        		<label for="faq_checkbox_{{ forloop.index }}" class="tab-label button button--primary">{{ item.question }}</label>
        		<div class="tab-content">{{ item.answer }}</div>
      		</div>
      	{% endfor %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "FAQ Page",
  "tag": "section",
  "class": "spaced-section",
	"blocks": [
		{
			"name": "FAQ Item",
			"type": "faq",
			"settings": [
				{
					"type": "text",
					"id": "question",
					"label": "Question",
					"default": "Do you have a question?"
				},
				{
					"type": "richtext",
					"id": "answer",
					"label": "Answer",
					"default": "<p>I have an answer</p>"
				}
			]
		}
	]
}
{% endschema %}

Code language: HTML, XML (xml)

The code that we added above should allow you to add blocks to your FAQs page through the customizer page.

Awesome! Now the last thing that we need to do is to use CSS and make the FAQ items an actual accordion. So go back to the code editor and open the Snippets folder, click the Add a new asset. Then, select the Create a blank file and for its name, call it faq-style and make sure the file extension is set to .css.

Once, the file is created, apply the following code:

.faq-checkbox {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.tabs {
  border-radius: 10px;
  overflow: hidden;
}

.tab {
  width: 100%;
  color: white;
  overflow: hidden;
}

.tab-label {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 1em;
  font-weight: bold;
  color: white;
}	

.tab-label:after {
  content: "+";
  width: 1em;
  height: 1em;
  text-align: center;
  transition: all 0.5s;
}

.tab-content {
  max-height: 0;
  padding: 0 1em;
  background-color: white;
  transition: all 0.5s;
  color: black;
}

.tab-content p {
  margin: 0; 
}

.faq-checkbox:checked + .tab-label:after {
  content: "-"; 
}

.faq-checkbox:checked ~ .tab-content {
  max-height: 100vh;
  padding: 1em;
}
Code language: CSS (css)

Make sure to save your file.

Last step is to apply that CSS stylesheet to our section file.

<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'faq-style.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>

<div class="page-width page-width--narrow">
  <h1 class="main-page-title page-title h0">
    {{ page.title | escape }}
  </h1>
  <div class="rte">
    {{ page.content }}
  </div>
  
  <div class="faq-container">
    <div class="tabs">
    	{% for block in section.blocks %}
      		{% assign item = block.settings %}
      		
      		<div class="tab">
      			<input type="checkbox" id="faq_checkbox_{{ forloop.index }}" class="faq-checkbox">
        		<label for="faq_checkbox_{{ forloop.index }}" class="tab-label button button--primary">{{ item.question }}</label>
        		<div class="tab-content">{{ item.answer }}</div>
      		</div>
      	{% endfor %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "FAQ Page",
  "tag": "section",
  "class": "spaced-section",
	"blocks": [
		{
			"name": "FAQ Item",
			"type": "faq",
			"settings": [
				{
					"type": "text",
					"id": "question",
					"label": "Question",
					"default": "Do you have a question?"
				},
				{
					"type": "richtext",
					"id": "answer",
					"label": "Answer",
					"default": "<p>I have an answer</p>"
				}
			]
		}
	]
}
{% endschema %}
Code language: HTML, XML (xml)

Now, if you open your FAQs page, you should have the following:

Conclusion

So there you have it! We have created an FAQs page for the Shopify theme called Dawn without using any Shopify apps. Like I said earlier, there is a faster and more practical way of creating accordions and that is by using sections.

Maybe in the future, I will create a separate lesson discussing this but for now, that’s how you create FAQs or accordions.

If you want to support me or WeeklyHow, feel free to subscribe to our YouTube channel or if you want to learn more about Shopify Theme Development, I have a course for that and there you will learn more about Liquid programming and Templates.

Let’s say you have a Shopify store and you’ve been working on it for years. Then, after some time, you’ve taken a look at your Shopify homepage and you’ve decided to customize your Shopify store for a little bit.

But then, BOOM!

You’ve found out that Shopify just recently changed the look of the customizer page and now, you’re lost. So you started reading about it and then you’ve realized that there are new features that you can do.

But, unfortunately, it looks like you can’t do any of the new features (like the “modularity” of the entire Shopify store, app blocks or app extensions, etc.) and that’s because you’re using an old Shopify theme and you need to upgrade it to a JSON template.

So, how can you upgrade your Shopify theme?

Well, in this article we are going to learn how to migrate a Shopify theme from Liquid to Online Store 2.0 (aka JSON templates).

Video Tutorial

If you prefer watching video tutorials, you can watch the following video version of this article.

Otherwise, you can continue below.

Getting Started

Before we get started, I want to point out that we are going to use Debut as an example in this article. We are also going to ONLY show you how to migrate a single template file from Liquid to JSON template and so if you’re looking for an in-depth tutorial about migrating all of the template files to JSON, I highly recommend taking the Shopify Theme Development course. In that course, I will be covering all of the template files from 404 to Search template file.

Also, before we begin, make sure that you BACKUP your Shopify theme. There are a lot of ways to backup a Shopify theme so make sure you do that before doing any of the steps that I will be mentioning in this article.

Migrating Shopify Themes to JSON Templates

You can migrate a Shopify theme in 5 simple steps:

Looks very simple no? Well, let’s see how to do them.

1. Identify the sections of your Shopify theme templates

Before you can start migrating your template files to a JSON template, you need to make sure that all of the {% section %} tags inside of a template are removed. This is because Shopify doesn’t allow you anymore to use the {% section %} tag inside of a section file and by using a {% section %} tag in a section file, you will receive the following error:

Liquid error (section/section-example.liquid line 58): Cannot render sections inside sections

Once you have found a section tag inside of your section, you have two options:

1. Move the code of that section to the section referencing that section. (Might be confusing)
2. Create a layout that reference that section.

The second option is quite advanced so to make this article shorter and simple, we’ll just do the first option and so that you get what I’m trying to say in that list.

1. Open your theme code editor
2. Locate a template file (They’re usually inside of the /templates directory). Let’s use the article.liquid in this tutorial.
3. Search for {% section %} tags. (If this is your first time opening that template file, you should be able to find a section tag that references the section named “article-template”).
   
   Did you find one? Great. Remove that section tag and open that “article-template” section file.
   Inside of that section file, you should see a part of the article template that renders the blog post.
   
   So what you’re going to do is to move all of that code to the article.liquid. Because the whole point is to remove all of the section tags from your template.
   
   Now, keep in mind that you should move or paste the code of the “article-template” to the line where the {% section %} tag is located. So if the section tag is located in line 17, then you should paste the code of that section in line 17.
4. Do the same steps for the rest of the section tags that you find.

2. Replace the old template with JSON template

Now that we have removed the section tags from our template file, we can finally replace this template file with JSON template. But first, we need to move the code of the article.liquid to a section file and then, we can delete the article.liquid and replace it with article.json.

1. Go to /sections directory or folder and create a new section. Name it whatever you what but make sure you remember this name because we’ll use this name in the article JSON template file.
   In my case, I’ll name it template-article.
2. Inside of the template-article.liquid, I’ll move ALL of the code from the article.liquid template file.
3. Delete the article.liquid.
4. Go to /templates directory or folder and create a new template file and select article and make sure that you select JSON instead of Liquid.
5. Once the article.json is created, replace its code with the following:

{
 "sections": {
   "template": {
     "type": "template-article"
   }
 },
 "order": ["template"]
}Code language: JSON / JSON with Comments (json)

Save the file.

3. Test your Shopify theme.

Once you have created your new template, open it with the customizer and check if you can add sections to your article template. If you can, then that means you have successfully migrated your template file from Liquid to JSON template.

Now the next thing that you’re going to do is to apply the same steps to the rest of the template files.

Conclusion

Migrating your Shopify themes from the old template system to Online Store 2.0 is honestly very easy, but it can be very difficult depending on what Shopify theme you’re about to migrate. So my advice, especially if you’re using a different theme, is to learn your Shopify theme first, back it up, and use it with a development store or a test store. That way, your Shopify store is safe from being broken.

We haven’t covered in this article how to use app blocks in JSON template so we’ll probably just cover them in the next video of our YouTube channel. So, if you’re interested, make sure you subscribe to our YouTube channel so we can notify you when we upload a new lesson.