Customizable theme section

A Shopify theme section that you can add to your theme, and use on your templates. It is highly customizable and can be a great way to add content without the need for page builder apps or extra code.

Quick start

The Liquid file contents are below, simply create a theme section with it. Read below for Grid guidelines.

<style>
  .trz-section-{{ section.id }} {
    display: grid;
    gap: {{ section.settings.row_gap }}px {{ section.settings.col_gap }}px;
    {% assign grid_lines = section.settings.grid | newline_to_br | strip_newlines | split: '<br />' %}
    {% assign template_rows = "" %}
    grid-template-areas: 
    {% for line in grid_lines %}
      "{{ line }}"
      {% liquid
        assign has_forced_height_block = false
        for block in section.blocks
        if line contains forloop.index and block.settings.force_height > 0
        assign template_rows = template_rows | append: block.settings.force_height | append: "px "
        assign has_forced_height_block = true
        endif
        endfor
        unless has_forced_height_block
        assign template_rows = template_rows | append: "auto "
        endunless
      %}
    {% endfor %}
    ;
    grid-template-rows: {{ template_rows }};
    {% assign paddings = section.settings.padding | split: ' ' %}
    padding: {{ paddings[0] }}px {{ paddings[1] }}px {{ paddings[2] }}px {{ paddings[3] }}px;
    {% assign margins = section.settings.margin | split: ' ' %}
    margin: {{ margins[0] }}px {{ margins[1] }}px {{ margins[2] }}px {{ margins[3] }}px;
    {% if section.settings.max_width > 0 %}
      max-width: {{ section.settings.max_width }}px;
      margin: {{ margins[0] }}px auto {{ margins[2] }}px;
    {% endif %}
    {% if section.settings.text_color != blank and section.settings.text_color.alpha != 0 %}
      color: {{ section.settings.text_color }};
    
    {% endif %}
    {% if section.settings.bg_color != blank %}
      background-color: {{ section.settings.bg_color }};
    {% endif %}
    {% if section.settings.bg_image != nil %}
      background-image: url("{{ section.settings.bg_image.src | image_url: width: 2048 }}");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    {% endif %}
    align-items: {{ section.settings.align_items }};
    justify-content: {{ section.settings.justify_content }};
    {% if section.settings.equal_width == true %}
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: column;
    {% endif %}
  }
  
  .trz-section-{{ section.id }} img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  @media (max-width: {% if section.settings.media_breakpoint != 0 %}{{ section.settings.media_breakpoint }}{% else %}768{% endif %}px) {
    .trz-section-{{ section.id }} {
      grid-template-areas: 
      {% assign grid_lines_mobile = section.settings.grid_mobile | newline_to_br | strip_newlines | split: '<br />' %}
      {% for line in grid_lines_mobile %}
        "{{ line }}"
      {% endfor %}
      ;
      grid-template-rows: unset;
      {% assign paddings_mobile = section.settings.padding_mobile | split: ' ' %}
      padding: {{ paddings_mobile[0] }}px {{ paddings_mobile[1] }}px {{ paddings_mobile[2] }}px {{ paddings_mobile[3] }}px;
      {% assign margins_mobile = section.settings.margin_mobile | split: ' ' %}
      margin: {{ margins_mobile[0] }}px {{ margins_mobile[1] }}px {{ margins_mobile[2] }}px {{ margins_mobile[3] }}px;
      {% if section.settings.bg_image_mobile != nil %}
        background-image: url("{{ section.settings.bg_image_mobile.src | image_url: width: 768 }}");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        {% else %}
        background-image: unset;
      {% endif %}
    }
  } 
  
  
  {% for block in section.blocks %}
    .trz-block-{{ block.id }} {
      grid-area: g{{ forloop.index }};
      {% if section.settings.preview_boxes %}
        background-color: hsl(calc({{ forloop.index }} * 20), 50%, 90%);
      {% endif %}
      display: flex;
      flex-direction: column;
      {% assign paddings = block.settings.padding | split: ' ' %}
      padding: {{ paddings[0] }}px {{ paddings[1] }}px {{ paddings[2] }}px {{ paddings[3] }}px;
      {% assign margins = block.settings.margin | split: ' ' %}
      margin: {{ margins[0] }}px {{ margins[1] }}px {{ margins[2] }}px {{ margins[3] }}px;
      {% if block.settings.text_align != blank %}
        text-align: {{ block.settings.text_align }};
      {% endif %}
      {% if block.settings.text_color != blank and block.settings.text_color.alpha != 0 %}
        color: {{ block.settings.text_color }};
      {% endif %}
      {% if block.settings.bg_color != blank %}
        background-color: {{ block.settings.bg_color }};
      {% endif %}
      {% if block.settings.bg_image != nil %}
        background-image: url("{{ block.settings.bg_image.src | image_url: width: 1024 }}");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
      {% endif %}
      {% if block.settings.border_color != blank %}
        border-color: {{ block.settings.border_color }};
      {% endif %}
      align-items: {{ block.settings.align_items }};
      justify-content: {{ block.settings.justify_content }};
      border-radius: {{ block.settings.border_radius }}px;
      border-style: solid;
      {% assign border_widths = block.settings.border_width | split: ' ' %}
      border-width: {{ border_widths[0] }}px {{ border_widths[1] }}px {{ border_widths[2] }}px {{ border_widths[3] }}px;
      {% if block.settings.font_size > 0 %}
        font-size: {{ block.settings.font_size }}px;
      {% endif %}
      {% if block.settings.line_height > 0 %}
        line-height: {{ block.settings.line_height }}px;
      {% endif %}
      {% if block.settings.hide_desktop %}
        display: none;
      {% endif %}
    }
    
    {% if block.settings.collapsible and block.settings.show_collapse_icon %}
      .trz-block-{{ block.id }} summary {
        position: relative;
      }  
      .trz-block-{{ block.id }} summary:after, .trz-block-{{ block.id }} summary:before {
        content: '';        
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translate(0, -50%) rotate(45deg);
        height: 10px;
        width: 2px;
        background-color: {% if block.settings.color != blank %}{{ block.settings.color }}{% else %}#ccc{% endif %};
      }  
      .trz-block-{{ block.id }} summary:after {
        transform: translate(-6px, -50%) rotate(-45deg);
      }
      .trz-block-{{ block.id }} details[open] summary:after {
        transform: translate(0, -50%) rotate(135deg);
      }
      .trz-block-{{ block.id }} details[open] summary:before {
        transform: translate(-6px, -50%) rotate(225deg);
      }
    {% endif %}
    
    .trz-block-{{ block.id }} > * {% if block.settings.collapsible %}, .trz-block-{{ block.id }} details > *{% endif %} {
      margin: 0;
    }
    
    .trz-block-{{ block.id }} a {
      {% if block.settings.text_color != blank and block.settings.text_color.alpha != 0 %}
        color: {{ block.settings.text_color }};
        {% else %}
        color: inherit;
      {% endif %}
    }
    
    {% if block.settings.element_type != 'text' %}
      .trz-block-{{ block.id }} > * > * {% if block.settings.collapsible %}, .trz-block-{{ block.id }} details > * > *{% endif %} {
        margin: 0;
      }
      
      .trz-block-{{ block.id }} > * {% if block.settings.collapsible %}, .trz-block-{{ block.id }} details > * {% endif %}{
        {% if block.settings.font_size > 0 %}
          font-size: {{ block.settings.font_size }}px;
        {% endif %}
        {% if block.settings.line_height > 0 %}
          line-height: {{ block.settings.line_height }}px;
        {% endif %}
      }
    {% endif %}
    
    {% if block.settings.image != blank %}
    .trz-block-{{ block.id }} img {
        {% if block.settings.fill_container %}
        object-fit: cover;
        height: 100%;
        object-position: center;
        {% endif %}
        {% if block.settings.image_width > 0 %}
        width: {{ block.settings.image_width }}px;
        {% endif %}
      }
    {% endif %}
    
    {% if block.settings.link != blank %}
      .trz-block-{{ block.id }} > a {% if block.settings.collapsible %}, .trz-block-{{ block.id }} details > a{% endif %} {
        color: inherit;
        text-decoration: inherit;
      }
    {% endif %}
    
    {% if block.settings.product != blank %}
      .trz-block-{{ block.id }} a {
      	text-decoration: none;
      }
  
      .trz-block-{{ block.id }} img {
        height: auto;
        object-fit: cover;
        object-position: center;
        {% if block.settings.image_width > 0 %}
        width: {{ block.settings.image_width }}px;
        {% else %}
        width: 100%;
        {% endif %}
      }
      
      {% if block.settings.collapsible %}.trz-block-{{ block.id }} details > div:nth-child(1){% else %}.trz-block-{{ block.id }} > div:nth-child(1){% endif %} {
        {% if block.settings.product_order == 'details_image' %}
          order: 3;
        {% endif %}
        {% if block.settings.hide_image %}
          display: none;
        {% endif %}
      }
      
      {% if block.settings.collapsible %}.trz-block-{{ block.id }} details > div:nth-child(2){% else %}.trz-block-{{ block.id }} > div:nth-child(2){% endif %} {
        {% if block.settings.hide_title %}
          display: none;
        {% endif %}
        {% if block.settings.title_font_size > 0 %}
          font-size: {{ block.settings.title_font_size }}px;
        {% endif %}
        {% if block.settings.title_line_height > 0 %}
          line-height: {{ block.settings.title_line_height }}px;
        {% endif %}
        {% if block.settings.title_color != blank and block.settings.title_color.alpha != 0 %}
          color: {{ block.settings.title_color }};
        {% endif %}
      }
      
      {% if block.settings.collapsible %}.trz-block-{{ block.id }} details > div:nth-child(3){% else %}.trz-block-{{ block.id }} > div:nth-child(3){% endif %} {
        {% if block.settings.hide_price %}
          display: none;
        {% endif %}
        {% if block.settings.price_font_size > 0 %}
          font-size: {{ block.settings.price_font_size }}px;
        {% endif %}
        {% if block.settings.price_line_height > 0 %}
          line-height: {{ block.settings.price_line_height }}px;
        {% endif %}
        {% if block.settings.price_color != blank and block.settings.price_color.alpha != 0 %}
          color: {{ block.settings.price_color }};
        {% endif %}
      }
    {% endif %}
    
    @media (max-width: {% if section.settings.media_breakpoint != 0 %}{{ section.settings.media_breakpoint }}{% else %}768{% endif %}px) {
      .trz-block-{{ block.id }} {
        {% if block.settings.align_items_mobile != '' %}
          align-items: {{ block.settings.align_items_mobile }};
        {% endif %}
        {% if block.settings.justify_content_mobile != '' %}
          justify-content: {{ block.settings.justify_content_mobile }};
        {% endif %}
        {% assign paddings_mobile = block.settings.padding_mobile | split: ' ' %}
        padding: {{ paddings_mobile[0] }}px {{ paddings_mobile[1] }}px {{ paddings_mobile[2] }}px {{ paddings_mobile[3] }}px;
        {% assign margins_mobile = block.settings.margin_mobile | split: ' ' %}
        margin: {{ margins_mobile[0] }}px {{ margins_mobile[1] }}px {{ margins_mobile[2] }}px {{ margins_mobile[3] }}px;
        {% assign border_widths_mobile = block.settings.border_width_mobile | split: ' ' %}
        border-width: {{ border_widths_mobile[0] }}px {{ border_widths_mobile[1] }}px {{ border_widths_mobile[2] }}px {{ border_widths_mobile[3] }}px;
        text-align: {{ block.settings.text_align_mobile }};
        {% if block.settings.mobile_font_size > 0 %}
          font-size: {{ block.settings.mobile_font_size }}px;
        {% endif %}
        display: flex;
        {% if block.settings.hide_mobile %}
          display: none;
        {% endif %}
      }
      
      {% if block.settings.element_type != 'text' %}
        .trz-block-{{ block.id }} > * {% if block.settings.collapsible %}, .trz-block-{{ block.id }} details > * {% endif %}{
          {% if block.settings.mobile_font_size > 0 %}
            font-size: {{ block.settings.mobile_font_size }}px;
          {% endif %}
        }
      {% endif %}
    } 
    
  {% endfor %}
  
</style>

<section class="trz-section-{{ section.id }}{% if section.settings.css_class != blank %} {{ section.settings.css_class }}{% endif %}">
  {% for block in section.blocks %}
    <div class="trz-block-{{ block.id }}">
      
      {% if block.settings.collapsible %}
        <details>
          <summary>{{ block.settings.collapsible_title }}</summary>
        {% endif %}
        
        {% if block.settings.text_content != blank %}
          {% if block.settings.element_type == 'text' %}
            {{ block.settings.text_content }}
            {% else %}
            <{{ block.settings.element_type }}>{{ block.settings.text_content }}</{{ block.settings.element_type }}>
          {% endif %}
        {% endif %}
        
        {% if block.settings.image != blank %}
          {% assign image_width = block.settings.image.width %}
          {% if image_width > 4096 %}
            {% assign image_width = 4096 %}
          {% endif %}
          {% if block.settings.image_width > 0 %}
            {% assign image_width = block.settings.image_width %}
          {% endif %}
          {% assign image_width_1_2 = image_width | divided_by: 2 %}
          {% assign image_width_1_4 = image_width | divided_by: 4 %}
	
          {% if block.settings.image_link %}<a href="{{ block.settings.image_link }}">{% endif %}
          <div><Image width="{{ block.settings.image.width }}" height="{{ block.settings.image.height }}" src="{{ block.settings.image | image_url: width: image_width }}" alt="{{ block.settings.image.alt }}" loading="lazy" 
          srcset="{{ block.settings.image | image_url: width: image_width_1_4 }} {{ image_width_1_4 }}w, 
                  {{ block.settings.image | image_url: width: image_width_1_2 }} {{ image_width_1_2 }}w, 
                  {{ block.settings.image | image_url: width: image_width }} {{ image_width }}w"
          sizes</div>="(max-width: {{ image_width_1_4 }}px) {{ image_width_1_4 }}px,
                 (max-width: {{ image_width_1_2 }}px) {{ image_width_1_2 }}px,
                 {{ image_width }}px" />
          {% if block.settings.image_link %}</a>{% endif %}

        {% endif %}
        
        {% if block.settings.link != blank %}
          {% assign image_width = 1024 %}
          {% if block.settings.image_width > 0 %}
            {% assign image_width = block.settings.image_width %}
          {% endif %}
          {% if block.settings.class != blank %}
            <div>
              <a href="{{ block.settings.link }}" class="{{ block.settings.class }}">{{ block.settings.title }}</a>
            </div>
            {% else %}
            <a href="{{ block.settings.link }}">{{ block.settings.title }}</a>
          {% endif %}
        {% endif %}
        
        {% if block.settings.liquid != blank %}
          {{ block.settings.liquid }}
        {% endif %}
        
        {% if block.settings.product != blank %}
          {%- assign product = block.settings.product -%}
          <div>
            {% if product.featured_image %}
              {% assign image_width = product.featured_image.width %}
              {% if image_width > 4096 %}
              {% assign image_width = 4096 %}
              {% endif %}
              {% if block.settings.image_width > 0 %}
              {% assign image_width = block.settings.image_width %}
              {% endif %}
              {% assign image_width_1_2 = image_width | divided_by: 2 %}
              {% assign image_width_1_4 = image_width | divided_by: 4 %}

              <a href="{{ product.url }}">
                <div><Image width="{{ product.featured_image.width }}" height="{{ product.featured_image.height }}" src="{{ product.featured_image.image | image_url: width: image_width }}" alt="{{ product.featured_image.alt }}" loading="lazy" 
                   srcset="{{ product.featured_image | image_url: width: image_width_1_4 }} {{ image_width_1_4 }}w, 
                           {{ product.featured_image | image_url: width: image_width_1_2 }} {{ image_width_1_2 }}w, 
                           {{ product.featured_image | image_url: width: image_width }} {{ image_width }}w"
                   si</div>zes="(max-width: {{ image_width_1_4 }}px) {{ image_width_1_4 }}px,
                          (max-width: {{ image_width_1_2 }}px) {{ image_width_1_2 }}px,
                          {{ image_width }}px" />
              </a>
            {% endif %}
          </div>
          <div><a href="{{ product.url }}">{{ product.title }}</a></div>
          <div><a href="{{ product.url }}">{{ product.price | money }}</a></div>
        {% endif %}
        
      </div>
      
      {% if block.settings.collapsible %}
      </details>
    {% endif %}
    
  {% endfor %}
</section>

{% schema %}
{
  "name":"TRZ",
  "settings":[
    {
      "type":"header",
      "content":"Grid layout"
    },
    {
      "type":"paragraph",
      "content":"Define the grid. Use 'g' + the number of each block (e.g. 'g1'), space between blocks, and press Enter to start a new row. [See examples.](https://webtrz.com/tools/customizable-section)"
    },
    {
      "id":"grid",
      "type":"textarea",
      "label":"Grid (desktop)",
      "default":"g1 g2"
    },
    {
      "id":"grid_mobile",
      "type":"textarea",
      "label":"Grid (mobile)",
      "default":"g1 g2"
    },
    {
      "id":"row_gap",
      "type":"number",
      "label":"Row gap (px)",
      "default":10
    },
    {
      "id":"col_gap",
      "type":"number",
      "label":"Column gap (px)",
      "default":10
    },
    {
      "id":"equal_width",
      "type":"checkbox",
      "label":"Force equal column width",
      "default":false
    },
    {
      "id":"align_items",
      "type":"select",
      "label":"Align items",
      "default":"normal",
      "options":[
        {
          "value":"normal",
          "label":"Normal"
        },
        {
          "value":"center",
          "label":"Center"
        },
        {
          "value":"start",
          "label":"Start"
        },
        {
          "value":"end",
          "label":"End"
        },
        {
          "value":"stretch",
          "label":"Stretch"
        }
      ]
    },
    {
      "id":"justify_content",
      "type":"select",
      "label":"Justify content",
      "default":"normal",
      "options":[
        {
          "value":"normal",
          "label":"Normal"
        },
        {
          "value":"center",
          "label":"Center"
        },
        {
          "value":"start",
          "label":"Start"
        },
        {
          "value":"end",
          "label":"End"
        },
        {
          "value":"space-between",
          "label":"Space between"
        },
        {
          "value":"space-around",
          "label":"Space around"
        },
        {
          "value":"space-evenly",
          "label":"Space evenly"
        }
      ]
    },
    {
      "id":"css_class",
      "type":"text",
      "label":"Section CSS class",
      "placeholder":"my-custom-section-1"
    },
    {
      "id":"bg_image",
      "type":"image_picker",
      "label":"Background image (desktop)"
    },
    {
      "id":"bg_image_mobile",
      "type":"image_picker",
      "label":"Background image (mobile)"
    },
    {
      "type":"header",
      "content":"Spacing"
    },
    {
      "type":"paragraph",
      "content":"Spacing attributes for the entire section. Defined as the four numbers '[Top] [Right] [Bottom] [Left]'"
    },
    {
      "id":"padding",
      "type":"text",
      "label":"Padding (desktop) (px)",
      "placeholder":"0 0 0 0",
      "default":"0 0 0 0"
    },
    {
      "id":"padding_mobile",
      "type":"text",
      "label":"Padding (mobile) (px)",
      "placeholder":"0 0 0 0",
      "default":"0 0 0 0"
    },
    {
      "id":"margin",
      "type":"text",
      "label":"Margin (desktop) (px)",
      "placeholder":"0 0 0 0",
      "default":"0 0 0 0"
    },
    {
      "id":"margin_mobile",
      "type":"text",
      "label":"Margin (mobile) (px)",
      "placeholder":"0 0 0 0",
      "default":"0 0 0 0"
    },
    {
      "type":"header",
      "content":"Responsive"
    },
    {
      "type":"paragraph",
      "content":"Configure how the section and grid behaves on different screen widths."
    },
    {
      "id":"max_width",
      "type":"number",
      "label":"Max width (px)",
      "info":"Prevent from the section from being full width (inspect how the other sections of the theme behave). Leave empty for full width.",
      "placeholder":"1200",
      "default":1200
    },
    {
      "id":"media_breakpoint",
      "type":"number",
      "label":"Mobile breakpoint (px)",
      "info":"The point in which the mobile grid is used, as the screen width gets smaller (inspect how the other sections of the theme behave)",
      "placeholder":"768",
      "default":768
    },
    {
      "type":"header",
      "content":"Colors"
    },
    {
      "type":"paragraph",
      "content":"Colors can be overriden by individual block colors."
    },
    {
      "id":"preview_boxes",
      "type":"checkbox",
      "label":"Preview boxes",
      "info":"Different color for each block, for preview purposes",
      "default":false
    },
    {
      "id":"text_color",
      "type":"color",
      "label":"Text color",
      "info":"Overall section text color"
    },
    {
      "id":"bg_color",
      "type":"color",
      "label":"Background color",
      "info":"Overall section background color"
    }
  ],
  "blocks":[
    {
      "type":"area_text",
      "name":"Text",
      "settings":[
        {
          "type":"header",
          "content":"Content"
        },
        {
          "id":"text_content",
          "type":"richtext",
          "label":"Text",
          "default":"<p>Content</p>"
        },
        {
          "id":"element_type",
          "type":"select",
          "label":"Html element",
          "options":[
            {
              "label":"Plain text",
              "value":"text"
            },
            {
              "label":"Paragraph (p)",
              "value":"p"
            },
            {
              "label":"Span",
              "value":"span"
            },
            {
              "label":"Heading 1 (H1)",
              "value":"h1"
            },
            {
              "label":"Heading 2 (H2)",
              "value":"h2"
            },
            {
              "label":"Heading 3 (H3)",
              "value":"h3"
            },
            {
              "label":"Heading 4 (H4)",
              "value":"h4"
            },
            {
              "label":"Heading 5 (H5)",
              "value":"h5"
            },
            {
              "label":"Heading 6 (H6)",
              "value":"h6"
            }
          ]
        },
        {
          "id":"bg_image",
          "type":"image_picker",
          "label":"Background image"
        },
        {
          "type":"header",
          "content":"Typography"
        },
        {
          "type":"paragraph",
          "content":"Leave empty for theme default"
        },
        {
          "id":"font_size",
          "type":"number",
          "label":"Font size (desktop) (px)"
        },
        {
          "id":"mobile_font_size",
          "type":"number",
          "label":"Font size (mobile) (px)"
        },
        {
          "id":"line_height",
          "type":"number",
          "label":"Line height (px)"
        },
        {
          "type":"header",
          "content":"Spacing"
        },
        {
          "type":"paragraph",
          "content":"Defined as the four numbers '[Top] [Right] [Bottom] [Left]'"
        },
        {
          "id":"padding",
          "type":"text",
          "label":"Padding (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"20 20 20 20"
        },
        {
          "id":"padding_mobile",
          "type":"text",
          "label":"Padding (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"20 20 20 20"
        },
        {
          "id":"margin",
          "type":"text",
          "label":"Margin (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"margin_mobile",
          "type":"text",
          "label":"Margin (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"force_height",
          "type":"number",
          "label":"Force height (desktop) (px)",
          "info":"Leave empty for no height force"
        },
        {
          "type":"header",
          "content":"Colors"
        },
        {
          "id":"text_color",
          "type":"color",
          "label":"Text color"
        },
        {
          "id":"bg_color",
          "type":"color",
          "label":"Background color"
        },
        {
          "id":"border_color",
          "type":"color",
          "label":"Border color",
          "default":"#000000"
        },
        {
          "type":"header",
          "content":"Alignment"
        },
        {
          "id":"text_align",
          "type":"select",
          "label":"Text align (desktop)",
          "default":"left",
          "options":[
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"left",
              "label":"Left"
            },
            {
              "value":"right",
              "label":"Right"
            }
          ]
        },
        {
          "id":"text_align_mobile",
          "type":"select",
          "label":"Text align (mobile)",
          "default":"left",
          "options":[
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"left",
              "label":"Left"
            },
            {
              "value":"right",
              "label":"Right"
            }
          ]
        },
        {
          "id":"align_items",
          "type":"select",
          "label":"Align items (desktop)",
          "default":"normal",
          "options":[
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"stretch",
              "label":"Stretch"
            }
          ]
        },
        {
          "id":"justify_content",
          "type":"select",
          "label":"Justify content",
          "default":"normal",
          "options":[
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"space-between",
              "label":"Space between"
            },
            {
              "value":"space-around",
              "label":"Space around"
            },
            {
              "value":"space-evenly",
              "label":"Space evenly"
            }
          ]
        },
        {
          "id":"align_items_mobile",
          "type":"select",
          "label":"Align items (mobile)",
          "default":"",
          "options":[
            {
              "value":"",
              "label":""
            },
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"stretch",
              "label":"Stretch"
            }
          ]
        },
        {
          "id":"justify_content_mobile",
          "type":"select",
          "label":"Justify content (mobile)",
          "default":"",
          "options":[
            {
              "value":"",
              "label":""
            },
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"space-between",
              "label":"Space between"
            },
            {
              "value":"space-around",
              "label":"Space around"
            },
            {
              "value":"space-evenly",
              "label":"Space evenly"
            }
          ]
        },
        {
          "type":"header",
          "content":"Borders"
        },
        {
          "id":"border_radius",
          "type":"number",
          "label":"Border radius (px)",
          "placeholder":"0",
          "default":0
        },
        {
          "id":"border_width",
          "type":"text",
          "label":"Border width (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"border_width_mobile",
          "type":"text",
          "label":"Border width (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "type":"header",
          "content":"Collapsible"
        },
        {
          "id":"collapsible",
          "type":"checkbox",
          "label":"Collapse content",
          "default":false
        },
        {
          "id":"collapsible_title",
          "type":"text",
          "label":"Collapsible title"
        },
        {
          "id":"show_collapse_icon",
          "type":"checkbox",
          "label":"Show icon",
          "default":true
        },
        {
          "type":"header",
          "content":"Misc. settings"
        },
        {
          "id":"hide_desktop",
          "type":"checkbox",
          "label":"Hide (desktop)",
          "default":false
        },
        {
          "id":"hide_mobile",
          "type":"checkbox",
          "label":"Hide (mobile)",
          "default":false
        }
      ]
    },
    {
      "type":"area_image",
      "name":"Image",
      "settings":[
        {
          "type":"header",
          "content":"Content"
        },
        {
          "id":"image",
          "type":"image_picker",
          "label":"Image"
        },
        {
          "id":"image_width",
          "type":"number",
          "label":"Image width (px)"
        },
        {
          "id":"fill_container",
          "type":"checkbox",
          "label":"Fill container",
          "default":false
        },
        {
          "id":"image_link",
          "type":"url",
          "label":"Link"
        },
        {
          "type":"header",
          "content":"Spacing"
        },
        {
          "type":"paragraph",
          "content":"Defined as the four numbers '[Top] [Right] [Bottom] [Left]'"
        },
        {
          "id":"padding",
          "type":"text",
          "label":"Padding (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"20 20 20 20"
        },
        {
          "id":"padding_mobile",
          "type":"text",
          "label":"Padding (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"20 20 20 20"
        },
        {
          "id":"margin",
          "type":"text",
          "label":"Margin (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"margin_mobile",
          "type":"text",
          "label":"Margin (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"force_height",
          "type":"number",
          "label":"Force height (desktop) (px)",
          "info":"Leave empty for no height force"
        },
        {
          "type":"header",
          "content":"Colors"
        },
        {
          "id":"bg_color",
          "type":"color",
          "label":"Background color"
        },
        {
          "id":"border_color",
          "type":"color",
          "label":"Border color",
          "default":"#000000"
        },
        {
          "type":"header",
          "content":"Alignment"
        },
        {
          "id":"align_items",
          "type":"select",
          "label":"Align items (desktop)",
          "default":"normal",
          "options":[
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"stretch",
              "label":"Stretch"
            }
          ]
        },
        {
          "id":"justify_content",
          "type":"select",
          "label":"Justify content (desktop)",
          "default":"normal",
          "options":[
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"space-between",
              "label":"Space between"
            },
            {
              "value":"space-around",
              "label":"Space around"
            },
            {
              "value":"space-evenly",
              "label":"Space evenly"
            }
          ]
        },
        {
          "id":"align_items_mobile",
          "type":"select",
          "label":"Align items (mobile)",
          "default":"",
          "options":[
            {
              "value":"",
              "label":""
            },
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"stretch",
              "label":"Stretch"
            }
          ]
        },
        {
          "id":"justify_content_mobile",
          "type":"select",
          "label":"Justify content (mobile)",
          "default":"",
          "options":[
            {
              "value":"",
              "label":""
            },
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"space-between",
              "label":"Space between"
            },
            {
              "value":"space-around",
              "label":"Space around"
            },
            {
              "value":"space-evenly",
              "label":"Space evenly"
            }
          ]
        },
        {
          "type":"header",
          "content":"Borders"
        },
        {
          "id":"border_radius",
          "type":"number",
          "label":"Border radius (px)",
          "placeholder":"0",
          "default":0
        },
        {
          "id":"border_width",
          "type":"text",
          "label":"Border width (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"border_width_mobile",
          "type":"text",
          "label":"Border width (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "type":"header",
          "content":"Collapsible"
        },
        {
          "id":"collapsible",
          "type":"checkbox",
          "label":"Collapse content",
          "default":false
        },
        {
          "id":"collapsible_title",
          "type":"text",
          "label":"Collapsible title"
        },
        {
          "id":"show_collapse_icon",
          "type":"checkbox",
          "label":"Show icon",
          "default":true
        },
        {
          "type":"header",
          "content":"Misc. settings"
        },
        {
          "id":"hide_desktop",
          "type":"checkbox",
          "label":"Hide (desktop)",
          "default":false
        },
        {
          "id":"hide_mobile",
          "type":"checkbox",
          "label":"Hide (mobile)",
          "default":false
        }
      ]
    },
    {
      "type":"area_link",
      "name":"Link",
      "settings":[
        {
          "type":"header",
          "content":"Content"
        },
        {
          "id":"link",
          "type":"url",
          "label":"Link"
        },
        {
          "id":"title",
          "type":"text",
          "label":"Title"
        },
        {
          "id":"class",
          "type":"text",
          "label":"CSS Class",
          "info":"To give the link a button style, inspect the theme for the class button elements are given",
          "placeholder":"button button-primary"
        },
        {
          "id":"bg_image",
          "type":"image_picker",
          "label":"Background image"
        },
        {
          "type":"header",
          "content":"Typography"
        },
        {
          "type":"paragraph",
          "content":"Leave empty for theme default"
        },
        {
          "id":"font_size",
          "type":"number",
          "label":"Font size (desktop) (px)"
        },
        {
          "id":"mobile_font_size",
          "type":"number",
          "label":"Font size (mobile) (px)"
        },
        {
          "id":"line_height",
          "type":"number",
          "label":"Line height (px)"
        },
        {
          "type":"header",
          "content":"Spacing"
        },
        {
          "type":"paragraph",
          "content":"Defined as the four numbers '[Top] [Right] [Bottom] [Left]'"
        },
        {
          "id":"padding",
          "type":"text",
          "label":"Padding (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"20 20 20 20"
        },
        {
          "id":"padding_mobile",
          "type":"text",
          "label":"Padding (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"20 20 20 20"
        },
        {
          "id":"margin",
          "type":"text",
          "label":"Margin (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"margin_mobile",
          "type":"text",
          "label":"Margin (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"force_height",
          "type":"number",
          "label":"Force height (desktop) (px)",
          "info":"Leave empty for no height force"
        },
        {
          "type":"header",
          "content":"Colors"
        },
        {
          "id":"text_color",
          "type":"color",
          "label":"Text color"
        },
        {
          "id":"bg_color",
          "type":"color",
          "label":"Background color"
        },
        {
          "id":"border_color",
          "type":"color",
          "label":"Border color",
          "default":"#000000"
        },
        {
          "type":"header",
          "content":"Alignment"
        },
        {
          "id":"text_align",
          "type":"select",
          "label":"Text align",
          "default":"left",
          "options":[
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"left",
              "label":"Left"
            },
            {
              "value":"right",
              "label":"Right"
            }
          ]
        },
        {
          "id":"text_align_mobile",
          "type":"select",
          "label":"Text align mobile",
          "default":"left",
          "options":[
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"left",
              "label":"Left"
            },
            {
              "value":"right",
              "label":"Right"
            }
          ]
        },
        {
          "id":"align_items",
          "type":"select",
          "label":"Align items (desktop)",
          "default":"normal",
          "options":[
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"stretch",
              "label":"Stretch"
            }
          ]
        },
        {
          "id":"justify_content",
          "type":"select",
          "label":"Justify content (desktop)",
          "default":"normal",
          "options":[
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"space-between",
              "label":"Space between"
            },
            {
              "value":"space-around",
              "label":"Space around"
            },
            {
              "value":"space-evenly",
              "label":"Space evenly"
            }
          ]
        },
        {
          "id":"align_items_mobile",
          "type":"select",
          "label":"Align items (mobile)",
          "default":"",
          "options":[
            {
              "value":"",
              "label":""
            },
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"stretch",
              "label":"Stretch"
            }
          ]
        },
        {
          "id":"justify_content_mobile",
          "type":"select",
          "label":"Justify content (mobile)",
          "default":"",
          "options":[
            {
              "value":"",
              "label":""
            },
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"space-between",
              "label":"Space between"
            },
            {
              "value":"space-around",
              "label":"Space around"
            },
            {
              "value":"space-evenly",
              "label":"Space evenly"
            }
          ]
        },
        {
          "type":"header",
          "content":"Borders"
        },
        {
          "id":"border_radius",
          "type":"number",
          "label":"Border radius (px)",
          "placeholder":"0",
          "default":0
        },
        {
          "id":"border_width",
          "type":"text",
          "label":"Border width (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"border_width_mobile",
          "type":"text",
          "label":"Border width (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "type":"header",
          "content":"Collapsible"
        },
        {
          "id":"collapsible",
          "type":"checkbox",
          "label":"Collapse content",
          "default":false
        },
        {
          "id":"collapsible_title",
          "type":"text",
          "label":"Collapsible title"
        },
        {
          "id":"show_collapse_icon",
          "type":"checkbox",
          "label":"Show icon",
          "default":true
        },
        {
          "type":"header",
          "content":"Misc. settings"
        },
        {
          "id":"hide_desktop",
          "type":"checkbox",
          "label":"Hide (desktop)",
          "default":false
        },
        {
          "id":"hide_mobile",
          "type":"checkbox",
          "label":"Hide (mobile)",
          "default":false
        }
      ]
    },
    {
      "type":"area_product",
      "name":"Product",
      "settings":[
        {
          "type":"header",
          "content":"Content"
        },
        {
          "id":"product",
          "type":"product",
          "label":"Product"
        },
        {
          "id":"product_order",
          "type":"select",
          "label":"Order",
          "default":"image_details",
          "options":[
            {
              "value":"image_details",
              "label":"Image, Details"
            },
            {
              "value":"details_image",
              "label":"Details, Image"
            }
          ]
        },
        {
          "id":"hide_image",
          "type":"checkbox",
          "label":"Hide image",
          "default":false
        },
        {
          "id":"hide_title",
          "type":"checkbox",
          "label":"Hide title",
          "default":false
        },
        {
          "id":"hide_price",
          "type":"checkbox",
          "label":"Hide price",
          "default":false
        },
        {
          "type":"header",
          "content":"Product Image"
        },
        {
          "id":"image_width",
          "type":"number",
          "label":"Image width (px)"
        },
        {
          "type":"header",
          "content":"Product Title"
        },
        {
          "type":"paragraph",
          "content":"Leave empty for theme default"
        },
        {
          "id":"title_font_size",
          "type":"number",
          "label":"Font size (px)"
        },
        {
          "id":"title_line_height",
          "type":"number",
          "label":"Line height (px)"
        },
        {
          "id":"title_color",
          "type":"color",
          "label":"Color"
        },
        {
          "type":"header",
          "content":"Product Price"
        },
        {
          "type":"paragraph",
          "content":"Leave empty for theme default"
        },
        {
          "id":"price_font_size",
          "type":"number",
          "label":"Font size (px)"
        },
        {
          "id":"price_line_height",
          "type":"number",
          "label":"Line height (px)"
        },
        {
          "id":"price_color",
          "type":"color",
          "label":"Color"
        },
        {
          "type":"header",
          "content":"Spacing"
        },
        {
          "type":"paragraph",
          "content":"Defined as the four numbers '[Top] [Right] [Bottom] [Left]'"
        },
        {
          "id":"padding",
          "type":"text",
          "label":"Padding (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"20 20 20 20"
        },
        {
          "id":"padding_mobile",
          "type":"text",
          "label":"Padding (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"20 20 20 20"
        },
        {
          "id":"margin",
          "type":"text",
          "label":"Margin (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"margin_mobile",
          "type":"text",
          "label":"Margin (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"force_height",
          "type":"number",
          "label":"Force height (desktop) (px)",
          "info":"Leave empty for no height force"
        },
        {
          "type":"header",
          "content":"Colors"
        },
        {
          "id":"bg_color",
          "type":"color",
          "label":"Background color"
        },
        {
          "id":"border_color",
          "type":"color",
          "label":"Border color",
          "default":"#000000"
        },
        {
          "type":"header",
          "content":"Alignment"
        },
        {
          "id":"text_align",
          "type":"select",
          "label":"Text align",
          "default":"left",
          "options":[
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"left",
              "label":"Left"
            },
            {
              "value":"right",
              "label":"Right"
            }
          ]
        },
        {
          "id":"text_align_mobile",
          "type":"select",
          "label":"Text align mobile",
          "default":"left",
          "options":[
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"left",
              "label":"Left"
            },
            {
              "value":"right",
              "label":"Right"
            }
          ]
        },
        {
          "id":"align_items",
          "type":"select",
          "label":"Align items (desktop)",
          "default":"normal",
          "options":[
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"stretch",
              "label":"Stretch"
            }
          ]
        },
        {
          "id":"justify_content",
          "type":"select",
          "label":"Justify content (desktop)",
          "default":"normal",
          "options":[
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"space-between",
              "label":"Space between"
            },
            {
              "value":"space-around",
              "label":"Space around"
            },
            {
              "value":"space-evenly",
              "label":"Space evenly"
            }
          ]
        },
        {
          "id":"align_items_mobile",
          "type":"select",
          "label":"Align items (mobile)",
          "default":"",
          "options":[
            {
              "value":"",
              "label":""
            },
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"stretch",
              "label":"Stretch"
            }
          ]
        },
        {
          "id":"justify_content_mobile",
          "type":"select",
          "label":"Justify content (mobile)",
          "default":"",
          "options":[
            {
              "value":"",
              "label":""
            },
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"space-between",
              "label":"Space between"
            },
            {
              "value":"space-around",
              "label":"Space around"
            },
            {
              "value":"space-evenly",
              "label":"Space evenly"
            }
          ]
        },
        {
          "type":"header",
          "content":"Borders"
        },
        {
          "id":"border_radius",
          "type":"number",
          "label":"Border radius (px)",
          "placeholder":"0",
          "default":0
        },
        {
          "id":"border_width",
          "type":"text",
          "label":"Border width (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"border_width_mobile",
          "type":"text",
          "label":"Border width (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "type":"header",
          "content":"Collapsible"
        },
        {
          "id":"collapsible",
          "type":"checkbox",
          "label":"Collapse content",
          "default":false
        },
        {
          "id":"collapsible_title",
          "type":"text",
          "label":"Collapsible title"
        },
        {
          "id":"show_collapse_icon",
          "type":"checkbox",
          "label":"Show icon",
          "default":true
        },
        {
          "type":"header",
          "content":"Misc. settings"
        },
        {
          "id":"hide_desktop",
          "type":"checkbox",
          "label":"Hide (desktop)",
          "default":false
        },
        {
          "id":"hide_mobile",
          "type":"checkbox",
          "label":"Hide (mobile)",
          "default":false
        }
      ]
    },
    {
      "type":"area_liquid",
      "name":"Liquid",
      "settings":[
        {
          "type":"header",
          "content":"Content"
        },
        {
          "id":"liquid",
          "type":"liquid",
          "label":"Liquid"
        },
        {
          "id":"bg_image",
          "type":"image_picker",
          "label":"Background image"
        },
        {
          "type":"header",
          "content":"Spacing"
        },
        {
          "type":"paragraph",
          "content":"Defined as the four numbers '[Top] [Right] [Bottom] [Left]'"
        },
        {
          "id":"padding",
          "type":"text",
          "label":"Padding (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"20 20 20 20"
        },
        {
          "id":"padding_mobile",
          "type":"text",
          "label":"Padding (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"20 20 20 20"
        },
        {
          "id":"margin",
          "type":"text",
          "label":"Margin (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"margin_mobile",
          "type":"text",
          "label":"Margin (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"force_height",
          "type":"number",
          "label":"Force height (desktop) (px)",
          "info":"Leave empty for no height force"
        },
        {
          "type":"header",
          "content":"Colors"
        },
        {
          "id":"text_color",
          "type":"color",
          "label":"Text color"
        },
        {
          "id":"bg_color",
          "type":"color",
          "label":"Background color"
        },
        {
          "id":"border_color",
          "type":"color",
          "label":"Border color",
          "default":"#000000"
        },
        {
          "type":"header",
          "content":"Alignment"
        },
        {
          "id":"text_align",
          "type":"select",
          "label":"Text align (desktop)",
          "default":"left",
          "options":[
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"left",
              "label":"Left"
            },
            {
              "value":"right",
              "label":"Right"
            }
          ]
        },
        {
          "id":"text_align_mobile",
          "type":"select",
          "label":"Text align (mobile)",
          "default":"left",
          "options":[
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"left",
              "label":"Left"
            },
            {
              "value":"right",
              "label":"Right"
            }
          ]
        },
        {
          "id":"align_items",
          "type":"select",
          "label":"Align items (desktop)",
          "default":"normal",
          "options":[
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"stretch",
              "label":"Stretch"
            }
          ]
        },
        {
          "id":"justify_content",
          "type":"select",
          "label":"Justify content (desktop)",
          "default":"normal",
          "options":[
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"space-between",
              "label":"Space between"
            },
            {
              "value":"space-around",
              "label":"Space around"
            },
            {
              "value":"space-evenly",
              "label":"Space evenly"
            }
          ]
        },
        {
          "id":"align_items_mobile",
          "type":"select",
          "label":"Align items (mobile)",
          "default":"",
          "options":[
            {
              "value":"",
              "label":""
            },
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"stretch",
              "label":"Stretch"
            }
          ]
        },
        {
          "id":"justify_content_mobile",
          "type":"select",
          "label":"Justify content (mobile)",
          "default":"",
          "options":[
            {
              "value":"",
              "label":""
            },
            {
              "value":"normal",
              "label":"Normal"
            },
            {
              "value":"center",
              "label":"Center"
            },
            {
              "value":"flex-start",
              "label":"Start"
            },
            {
              "value":"flex-end",
              "label":"End"
            },
            {
              "value":"space-between",
              "label":"Space between"
            },
            {
              "value":"space-around",
              "label":"Space around"
            },
            {
              "value":"space-evenly",
              "label":"Space evenly"
            }
          ]
        },
        {
          "type":"header",
          "content":"Borders"
        },
        {
          "id":"border_radius",
          "type":"number",
          "label":"Border radius (px)",
          "placeholder":"0",
          "default":0
        },
        {
          "id":"border_width",
          "type":"text",
          "label":"Border width (desktop) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "id":"border_width_mobile",
          "type":"text",
          "label":"Border width (mobile) (px)",
          "placeholder":"0 0 0 0",
          "default":"0 0 0 0"
        },
        {
          "type":"header",
          "content":"Collapsible"
        },
        {
          "id":"collapsible",
          "type":"checkbox",
          "label":"Collapse content",
          "default":false
        },
        {
          "id":"collapsible_title",
          "type":"text",
          "label":"Collapsible title"
        },
        {
          "id":"show_collapse_icon",
          "type":"checkbox",
          "label":"Show icon",
          "default":true
        },
        {
          "type":"header",
          "content":"Misc. settings"
        },
        {
          "id":"hide_desktop",
          "type":"checkbox",
          "label":"Hide (desktop)",
          "default":false
        },
        {
          "id":"hide_mobile",
          "type":"checkbox",
          "label":"Hide (mobile)",
          "default":false
        }
      ]
    }
  ],
  "presets":[
    {
      "name":"TRZ",
      "blocks":[
        {
          "type":"area_text"
        },
        {
          "type":"area_text"
        }
      ]
    }
  ]
}
{% endschema %}
                            

Installation guide

1

Copy the code

1

2

Open the Theme code editor

2

3

Create a new section on your theme

3

4

Select all, paste the code and Save

4

5

Open the theme Editor and add the TRZ section

5

6

Add any number of blocks (layout on step 7)

6

7

Open the section settings to adjust the layout

7

8

Set the Grid (click for more)

8

9

Configure the rest of the settings

9

The Grid

The section is highly customizable because it uses the CSS grid to place the blocks.

The grid is defined in the section settings.

It is like a table, with rows, columns and individual cells (areas).

To add a block to the grid, type ā€œgā€ and then its order in the blocks (number). Use spaces between cells, hit Enter for a new row.

Some rules:

  • All blocks must be defined in the grid. If you do not need a block, hide it from its settings.
  • All rows must have the same length, all columns too.
  • If a block spans over multiple cells, it should still form a rectangle (the previous rule applies to it).

Example Grids

g1 
g2
g3 
g4
1
2
3
4
g1 g2 g3 g4
1
2
3
4
g1 g2
g3 g4
1
2
3
4
g1 g2
g1 g3
1
2
3
g1 g2 g3
g4 g4 g4
1
2
3
4
g1 g2 g3
g1 g2 g4
1
2
3
4
g1 g1 g2
g1 g1 g2
1
2
g1 g1 g2 g3
g1 g1 g2 g3
1
2
3