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 %}
<img 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="(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 }}">
<img 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"
sizes="(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
2
Open the Theme code editor
3
Create a new section on your theme
4
Select all, paste the code and Save
5
Open the theme Editor and add the TRZ section
6
Add any number of blocks (layout on step 7)
7
Open the section settings to adjust the layout
8
Set the Grid (click for more)
9
Configure the rest of the settings
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