How to add custom block in theme editor via code?

[Andrei]

I have created a .luiqid file in the snippets section and added my custom code. With that code I should be able to add a custom block but whenever I go to the theme editor, it is not appearing or visible. 

It is bit overwhelming because it works for other ppl

{% comment %}
  Renders a box with a single, hand-picked review.

  Accepts:
    - `url' - URL of the image of the reviewer
    - `name' - Name of the reviewer
    - `review' - The review itself

    Usage:
        {% include 'components/review.html' with url='http://example.com/image.jpg' name='John Doe' review='This is a great product!' %}
{% endcomment %}

<div class="croev-single-review_container"{% if block.settings.border_color != blank %} style="border-color: {{ block.settings.border_color }}"{% endif %}>
    <div class="croev-single-review_image-container">
        <img src="{{ block.settings.image | image_url: width: "60px" }}" alt="{{ block.settings.name }}" class="croev-single-review_image" width="" height="">
    </div>

    <div class="croev-single-review_text-container">
        <div class="croev-single-review_text{% if block.settings.text_color != blank %} custom-color{% endif %}">{{ block.settings.review }}</div>

        <div class="croev-single-review_signature">        
            <div class="croev-single-review_name">
              <div class="croev-stars">
                {% for i in (1..5) %}
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="{{ block.settings.star_color }}" class="size-6">
                    <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
                  </svg>
                {% endfor %}
              </div>
              <p class="croev-single-review_name"{% if block.settings.text_color != blank %} style="color: {{ block.settings.text_color }}"{% endif %}>{{ block.settings.name }}</p>
            </div>

            <div class="croev-single-review_verified">
                {% if block.settings.verified_icon != blank %}
                  <img src="{{ block.settings.verified_icon | image_url: width: "15px" }}" width="15px" height="15px">
                {% else %}
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="{{ block.settings.verified_color }}" class="w-6 h-6">
                    <path{% if block.settings.verified_color != blank %} style="fill: {{ block.settings.verified_color }}"{% endif %} fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
                  </svg> 
                {% endif %}
                                 
                <p class="croev-single-review_verified-text"{% if block.settings.verified_color != blank %} style="color: {{ block.settings.verified_color }}"{% endif %}>VERIFIED</p>
            </div>
        </div>
    </div>
</div>

<style>
.custom-color p{
  color: {{ block.settings.text_color }} !important;
}
  
.croev-single-review_container {
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding: 10px;
  border-radius: 10px;
  gap: 10px;
  margin-top: 20px;
  background-color: #fff;
  border: 1px solid #0A7F90;
  color: #000;
  max-width: 600px;
}

.croev-single-review_image-container img {
  width: 180px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}

.croev-single-review_text p{
    font-style: italic;
    font-size: 14px;
    margin: 0;
    color: #000;
}

.croev-single-review_signature {
    display: flex;
    margin-top: 10px;
    gap: 15px;
}

.croev-single-review_name {
    font-weight: bold;
    font-size: 16px;
    margin: 0;
    color: #000;
    display: flex;
    gap: 5px;
}

.croev-single-review_verified {
    display: flex;
    align-items: center;
    gap: 2.5px;
}

.croev-single-review_verified svg {
    fill: #0A7F90;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.croev-single-review_verified p {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    font-family: "Poppins", sans-serif !important;
    color: #0A7F90;
}

.croev-stars{
    display: flex;
    min-width: 70px;
}

@media only screen and (min-width: 840px) {
  .croev-single-review_image-container img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
  }

  .croev-single-review_text p{
    font-style: italic;
    font-size: 16px;
    margin: 0;
    color: #000;
  }
}
</style>

to ask why that is so? I don't even see the block in the theme editor

[Ugurcan]

snippets are code pieces that you can use in theme sections, which contains theme blocks. So it will not automatically appear unless you include it.

See more here in theme dev docs.

[Cherb20]

Hi Andrei,

To add a custom block in your theme editor I'd recommend reading up on the docs to familiarise yourself with Sections, Blocks and Snippets. Essentially, the "Sections" area in your code editor handles all of your Section files that are in charge of determining how to display certain "Blocks".

From the docs - "Sections are Liquid files that allow you to create reusable modules of content that can be customized by merchants. They can also include blocks which allow merchants to add, remove, and reorder content within a section.

You're trying to create a customisable block, therefore you must define this block within a Section file... In your case, you have only created a Snippet without using it within a Section file and you also haven't defined a Schema within that Section file. 

From the Docs - "Blocks are reusable modules for structuring content within sections. Blocks can represent a variety of content types such as text, images, products, collections and videos. They can be added, removed, and reordered within a section, providing merchants with a high degree of flexibility and customization in the theme editor." 

So, in order to create a custom block you must do a couple of things:

Firstly, you must define your Block within your Section file. You can do this by either referencing you Snippet within the Section file (Recommended) or place it directly inside said Section File. 

Secondly, you must define the "Schema", within that Section file. This can be done by adding a Schema tag to the bottom of the liquid file which defines how you intend your users to interact with your custom block. See docs for more on this Here .

I Hope this helps clear things up. Have a good read of the Architecture Section within the docs Ugurcan linked above and you should be able to get it.

[RenataP]

Hello Cherb,  I came across this post as i am seeking help with a very similar concern and managed to read your fantastic response. It really seems you know your way around a theme's coding editor. I would be grateful if you could point me in the right direction regarding a similar enquiry . My goal is to add a custom section on my product pages with customaziable content. I believe that i already have the accurate code that would make that feasible. (ATTACHED BELOW) . Although i HAVE NO IDEA WHERE exactly in the code editor i must PASTE the piece of code for my custom section to work as intended.               I also DO NOT KNOW whether i should duplicate the original code in order to add custom changes. OR Whether i can directly add them to the original . 

{
"name": "Custom Section",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading Text",
"default": "Why we are better"
},
{
"type": "select",
"id": "heading_font",
"label": "Heading Font",
"options": [
{ "value": "default", "label": "Default" },
{ "value": "custom", "label": "Custom" }
]
},
{
"type": "font_picker",
"id": "custom_heading_font",
"label": "Custom Heading Font",
"default": "Arial"
},
{
"type": "range",
"id": "heading_font_size",
"label": "Heading Font Size",
"default": 24,
"min": 16,
"max": 48,
"unit": "px"
},
{
"type": "range",
"id": "icon_size",
"label": "Icon Size",
"default": 24,
"min": 16,
"max": 48,
"unit": "px"
},
{
"type": "image_picker",
"id": "main_image",
"label": "Main Image"
},
{
"type": "select",
"id": "image_position",
"label": "Image Position",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "right", "label": "Right" },
{ "value": "center", "label": "Center" }
]
},
{
"type": "range",
"id": "image_border_radius",
"label": "Image Border Radius",
"default": 0,
"min": 0,
"max": 50,
"unit": "%"
},
{
"type": "checkbox",
"id": "enable_lazy_load",
"label": "Enable Lazy Load",
"default": true
},
{
"type": "color",
"id": "section_background_color",
"label": "Section Background Color",
"default": "#ffffff"
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "textarea",
"id": "text_content",
"label": "Text Content"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "block_image",
"label": "Block Image"
}
]
},
{
"type": "icon",
"name": "Icon",
"settings": [
{
"type": "image_picker",
"id": "block_icon",
"label": "Block Icon"
},
{
"type": "text",
"id": "icon_text",
"label": "Icon Text"
}
]
}
],
"presets": [
{
"name": "Default",
"category": "Custom Sections"
}
]
}

 Liquid Template: 

{% schema %}
{
"name": "Custom Section",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading Text",
"default": "Why we are better"
},
{
"type": "select",
"id": "heading_font",
"label": "Heading Font",
"options": [
{ "value": "default", "label": "Default" },
{ "value": "custom", "label": "Custom" }
]
},
{
"type": "font_picker",
"id": "custom_heading_font",
"label": "Custom Heading Font",
"default": "Arial"
},
{
"type": "range",
"id": "heading_font_size",
"label": "Heading Font Size",
"default": 24,
"min": 16,
"max": 48,
"unit": "px"
},
{
"type": "range",
"id": "icon_size",
"label": "Icon Size",
"default": 24,
"min": 16,
"max": 48,
"unit": "px"
},
{
"type": "image_picker",
"id": "main_image",
"label": "Main Image"
},
{
"type": "select",
"id": "image_position",
"label": "Image Position",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "right", "label": "Right" },
{ "value": "center", "label": "Center" }
]
},
{
"type": "range",
"id": "image_border_radius",
"label": "Image Border Radius",
"default": 0,
"min": 0,
"max": 50,
"unit": "%"
},
{
"type": "checkbox",
"id": "enable_lazy_load",
"label": "Enable Lazy Load",
"default": true
},
{
"type": "color",
"id": "section_background_color",
"label": "Section Background Color",
"default": "#ffffff"
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "textarea",
"id": "text_content",
"label": "Text Content"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "block_image",
"label": "Block Image"
}
]
},
{
"type": "icon",
"name": "Icon",
"settings": [
{
"type": "image_picker",
"id": "block_icon",
"label": "Block Icon"
},
{
"type": "text",
"id": "icon_text",
"label": "Icon Text"
}
]
}
],
"presets": [
{
"name": "Default",
"category": "Custom Sections"
}
]
}
{% endschema %}

{% style %}
.custom-section {
background-color: {{ section.settings.section_background_color }};
text-align: center;
padding: 20px;
}

.custom-section .heading {
font-size: {{ section.settings.heading_font_size }}px;
{% if section.settings.heading_font == 'custom' %}
font-family: {{ section.settings.custom_heading_font.family }};
{% endif %}
}

.custom-section .icon {
width: {{ section.settings.icon_size }}px;
height: {{ section.settings.icon_size }}px;
}

.custom-section .image {
{% if section.settings.image_position == 'left' %}
float: left;
{% elsif section.settings.image_position == 'right' %}
float: right;
{% else %}
margin: 0 auto;
{% endif %}
border-radius: {{ section.settings.image_border_radius }}%;
{% if section.settings.enable_lazy_load %}
loading: lazy;
{% endif %}
}
{% endstyle %}

<div class="custom-section">
<h2 class="heading">{{ section.settings.heading }}</h2>
<div class="main-image">
<img src="{{ section.settings.main_image | image_url }}" class="image" alt="Main Image">
</div>
{% for block in section.blocks %}
{% case block.type %}
{% when 'text' %}
<div class="text-content">
{{ block.settings.text_content }}
</div>
{% when 'image' %}
<div class="block-image">
<img src="{{ block.settings.block_image | image_url }}" class="image" alt="Block Image">
</div>
{% when 'icon' %}
<div class="block-icon">
<img src="{{ block.settings.block_icon | image_url }}" class="icon" alt="Block Icon">
<p>{{ block.settings.icon_text }}</p>
</div>
{% endcase %}
{% endfor %}
</div>

 I would immensely appreciate any guidance you can provide me in solving this.