[GO RIDE engineer explains! ] How to make SHOPIFY self -made sections using LIQUID

The SHOPIFY section is a Liquid file that adds or extends functions to the theme.

For example, you can add images, add texts, embed YouTube, and add any sections.

By default, most themes have sections that allow you to display images, text, product blocks, etc.

To confirm the section you already have, go to the SHOPIFY administrator's online strick and click "Customize" on the theme.

From there, click "Add Section" to display a list of available sections.

Depending on the theme, I matched what I want to displayYou may not be able to find a section.

In that case, you can create a section yourself.

By creating an original section, you can create various sections. First, let's create a simple section that displays images along with the title.

And this time, I will set up an option to make the image circular.

First, return to the online store, click the three points next to "Customize" and select "Edit Code".

Next, scroll to the left section folder and click "Add a new section". You can give your favorite name to the file, but this time the file name is image-test.lique.

with this,{%schema %} tag,{% stylesheet %} tag,{% javascript %} A file with a tag should be created.

These tags have different purposes.

• {%schema %} Tags define the setting of the section and the customized field
• {% stylesheet %} Set CSS styling for tags
• {% javascript %} Set JavaScript for tags

 <div class="image-test">
{{ section.settings.text }}
<img src="{{ section.settings.image_box | img_url: 'master' }}" width="380px" height="380px">


{% schema %}
{
 "Name": "Image test",
 "Settings": [
  {
    "Type": "Text",
    "ID": "text",
    "Label": "Text",
    "Default": "Text"
  },
  {
   "Type": "Image_picker",
   "ID": "Image",
   "Label": "Select an image"
  }
 ],

"Presets": [
  {
   "Name": "Image test",
   "Category": "Image"
  }
 ]
}
{% endschema %}

{% stylesheet %}
  .Image-test {
    Max-Width: 600px;
    Margin-Left: Auto;
    Margin-Right: Auto;
  }`
{% endstylesheet %}

{% javascript %}
{% endjavascript %}