Shopify section overview and how to create a new section

A definite necessity in Shopify development is sections.

For example, if you are able to customize, build, and edit your site by touching all the code every time, you may be fine without it, but if you want to easily edit text and images from the customization screen! This is an essential feature for those who want to use it. (Either way, it's useful and requires some knowledge of Liquid, but everyone should use it!)

In this article, we will provide an overview of these useful Shopify sections and how to add and use new sections.

What is a Shopify section?

First of all, what is a Shopify section? First of all, let me explain what a Shopify section is.

Simply put, they are "parts of your site that can be easily edited through customization in the admin panel.

Let me repeat that.

From the theme customization screen, you can

Files that can be easily customized and edited for images, text, etc., are...

Sections!

In the above example, the sidebar on the left side of the customization screen is used for images, text, number of posts, blogs, etc.

What is useful about sections?

Now that you have an understanding of what a SECTION file looks like, let's take a look at the SECTION file.

But what is so useful about this section? For those of you who wonder, "What's so special about sections?

1. Above all, it is time-saving!
   
   Above all, it is a time saver. For example, when you want to replace an image. Upload the file, get the URL, open the code editor, replace the URL, and reflect it. You can do all of these tasks with just one edit from the customize screen. This is great for developers.
   
   
2. The client can do the work of replacement, etc.
   
   And the biggest advantage is that they can replace the URLs themselves. For the client, this reduces the amount of work required to make replacement requests and shortens the time required. And because they can edit and change freely, they can make changes until they get it as close to their ideal as they want.
   
   
3. A single part can be used on multiple pages
   
   There will be situations where a single part is used on multiple pages, and that can be completed with only one line of code, as described below.

How to create and embed a new section

Let's get started by creating a new section.

The important thing is to put the liquid file for the new section in the "sections" directory.

Creating a new section from the administration page

Admin → Theme List → Edit Code → Create New Section

Creating a new section from the editor

Create a new file in the editor with the extension .liquid and save it in the "sections" directory.

How to embed a section

To embed a section, simply write the following code in the location where you wish to embed it. (In the case of the file name "newsection.liquid")

Embedding is completed with one line.

(Just note that you cannot use sections within sections.)

Use of Liquid code is the only way to take advantage of this.

However, to make use of sections, knowledge of Liquid is required.

If you have touched a programming language before, you may be able to understand relatively easily how to separate the case of display/non-display with if statements and looping with for statements.

Here is a cheat sheet for Liquid provided by Shopify.

https://www.shopify.com/partners/shopify-cheat-sheet

We will also be using something called schema tags, so if you are interested, please come visit the following article.

[Shopify] Explanation of schema tags and how to use them in a simple liquid [beginner's level to get an overview].

Overview of Shopify sections and how to create a new section

This is a brief overview article about SECTION.

My honest impression is that since I have been able to utilize sections, I have more time to spend on other things. I still want to replace the image when communicating with the recipient! I changed the text, but I still want it back! It is frustrating for both parties, isn't it?

And sectioning is really deep, and as I learn more about Liquid, I am amazed at how it can be done! I am continually amazed.

There are many articles in English on the blogs of our overseas partners, but I have the impression that there are still very few articles in Japanese. If you find an interesting article, please share it with us. We will translate it and introduce it on our blog!

Have a great day, everyone!