Skip to content

Instantly share code, notes, and snippets.

@zackeryfretty
Last active November 21, 2025 21:01
Show Gist options
  • Select an option

  • Save zackeryfretty/7df28c0205ccd025b6c05a76271eae3a to your computer and use it in GitHub Desktop.

Select an option

Save zackeryfretty/7df28c0205ccd025b6c05a76271eae3a to your computer and use it in GitHub Desktop.
{% comment %}
------------------------------------------------------------
VARS
------------------------------------------------------------
{% endcomment %}
{% assign section_class = 'zf-custom-section' %}
{% assign this_section = 'zf-section-' | append: section.id %}
{% comment %}
------------------------------------------------------------
GENERAL STYLES
------------------------------------------------------------
{% endcomment %}
{%- style -%}
#{{ this_section }} {
/* Basic Styles */
background-color: {{ section.settings.background_color }};
color: {{ section.settings.body_color }};
text-align: {{ section.settings.text_alignment }};
@media (max-width: 768px) {
& {
text-align: {{ section.settings.text_alignment_mobile }};
}
}
& h1, & h2, & h3, & h4, & h5, & h6 {
color: {{ section.settings.heading_color }};
}
& img {
display: block;
height: auto;
width: 100%;
}
/* Basic Positioning */
.{{ section_class }}__wrapper {
margin-left: auto;
margin-right: auto;
margin-top: {{ section.settings.margin_top | append: 'px' }};
margin-bottom: {{ section.settings.margin_bottom | append: 'px' }};
@media (max-width: 768px) {
& {
margin-top: {{ section.settings.margin_top_mobile | append: 'px' }};
margin-bottom: {{ section.settings.margin_bottom_mobile | append: 'px' }};
}
}
padding-left: 15px;
padding-right: 15px;
max-width: 100%;
width: {{ section.settings.section_width | append: '%' }};
@media (max-width: 768px) {
& {
width: {{ section.settings.section_width_mobile | append: '%' }};
}
}
}
/* Custom Styles */
}
{%- endstyle -%}
{% comment %}
------------------------------------------------------------
CONTENT
------------------------------------------------------------
{% endcomment %}
<div
id="{{ this_section }}"
class="{{ section_class }} {{ section_class }}-{{ section.id }}"
data-section-id="{{ section.id }}"
>
<div class="{{ section_class }}__wrapper">
{% if section.blocks.size > 0 %}
<div class="{{ section_class }}__blocks-wrapper">
{% for block in section.blocks %}
{% assign this_block = section_class | append: '__block-' | append: block.id %}
<div
class="
{{ section_class }}__block
{{ section_class }}__block-{{ block.type }}
{{ this_block }}
{{ section_class }}__block-{{ block.type }}-{{ forloop.index }}
"
{{ block.shopify_attributes }}
>
{% case block.type %}
{% comment %}
------------------------------------------------------------
HEADING BLOCK
------------------------------------------------------------
{% endcomment %}
{% when 'text' %}
{% if block.settings.block_heading != blank %}
{%- style -%}
.{{ this_block }} {
& h1, & h2, & h3, & h4, & h5, & h6 {
font-size: {{ block.settings.block_heading_size | append: 'px' }};
margin-top: {{ block.settings.block_heading_margin_top | append: 'px' }};
margin-bottom: {{ block.settings.block_heading_margin_bottom | append: 'px' }};
line-height: {{ block.settings.block_heading_line_height }};
@media (max-width: 768px) {
& {
font-size: {{ block.settings.block_heading_size_mobile | append: 'px' }};
margin-top: {{ block.settings.block_heading_margin_top_mobile | append: 'px' }};
margin-bottom: {{ block.settings.block_heading_margin_bottom_mobile | append: 'px' }};
line-height: {{ block.settings.block_heading_line_height_mobile }};
}
}
}
}
{%- endstyle -%}
{{ block.settings.block_heading_tag | append: '>' | prepend: '<' }}
{{- block.settings.block_heading | escape -}}
{{ block.settings.block_heading_tag | append: '>' | prepend: '</' }}
{% endif %}
{% comment %}
------------------------------------------------------------
RICH TEXT BLOCK
------------------------------------------------------------
{% endcomment %}
{% when 'richtext' %}
{% if block.settings.block_richtext != blank %}
{%- style -%}
.{{ this_block }} {
font-size: {{ block.settings.block_richtext_size | append: 'px' }};
line-height: {{ block.settings.block_richtext_line_height }};
margin-top: {{ block.settings.block_richtext_margin_top | append: 'px' }};
margin-bottom: {{ block.settings.block_richtext_margin_bottom | append: 'px' }};
@media (max-width: 768px) {
& {
font-size: {{ block.settings.block_richtext_size_mobile | append: 'px' }};
line-height: {{ block.settings.block_richtext_line_height_mobile }};
margin-top: {{ block.settings.block_richtext_margin_top_mobile | append: 'px' }};
margin-bottom: {{ block.settings.block_richtext_margin_bottom_mobile | append: 'px' }};
}
}
}
{%- endstyle -%}
{{- block.settings.block_richtext -}}
{% endif %}
{% comment %}
------------------------------------------------------------
IMAGE BLOCK
------------------------------------------------------------
{% endcomment %}
{% when 'custom_image' %}
{% if block.settings.block_image != blank %}
{% assign image = block.settings.block_image %}
{% assign link_url = block.settings.block_image_link_url %}
{% assign alt_text = block.settings.block_image_alt_text | default: image.alt %}
{%- style -%}
.{{ this_block }} {
max-width: {{ block.settings.block_image_width | append: '%' }};
{% case block.settings.block_image_alignment %}
{% when 'center' %}
margin-left: auto;
margin-right: auto;
{% when 'right' %}
margin-left: auto;
margin-right: 0;
{% comment %} 'left' does not need margin rules. {% endcomment %}
{% endcase %}
}
{%- endstyle -%}
{% if link_url != blank %}
<a
href="{{ link_url }}"
{% if block.settings.block_image_open_new_window %}
target="_blank" rel="noopener noreferrer"
{% endif %}
>
{% endif %}
{{ image | image_url: width: 1500 | image_tag: loading: 'lazy', alt: alt_text }}
{% if link_url != blank %}
</a>
{% endif %}
{% endif %}
{% comment %}
------------------------------------------------------------
BUTTON BLOCK
------------------------------------------------------------
{% endcomment %}
{% when 'button' %}
{% if block.settings.block_button_label != blank %}
{%- style -%}
.{{ this_block }} {
& a.button {
border-style: solid;
border-width: {{ block.settings.block_button_border_width | append: 'px' }};
border-radius: {{ block.settings.block_button_border_radius | append: 'px' }};
border-color: {{ block.settings.block_button_border_color }};
background-color: {{ block.settings.block_button_background_color }};
color: {{ block.settings.block_button_text_color }};
padding-top: {{ block.settings.block_button_tb_padding | append: 'px' }};
padding-bottom: {{ block.settings.block_button_tb_padding | append: 'px' }};
padding-left: {{ block.settings.block_button_lr_padding | append: 'px' }};
padding-right: {{ block.settings.block_button_lr_padding | append: 'px' }};
font-size: {{ block.settings.block_button_font_size | append: 'px' }};
@media (max-width: 768px) {
& {
border-width: {{ block.settings.block_button_border_width_mobile | append: 'px' }};
border-radius: {{ block.settings.block_button_border_radius_mobile | append: 'px' }};
padding-top: {{ block.settings.block_button_tb_padding_mobile | append: 'px' }};
padding-bottom: {{ block.settings.block_button_tb_padding_mobile | append: 'px' }};
padding-left: {{ block.settings.block_button_lr_padding_mobile | append: 'px' }};
padding-right: {{ block.settings.block_button_lr_padding_mobile | append: 'px' }};
font-size: {{ block.settings.block_button_font_size_mobile | append: 'px' }};
}
}
}
& a.button:hover {
border-color: {{ block.settings.block_button_border_hover_color }};
background-color: {{ block.settings.block_button_background_hover_color }};
color: {{ block.settings.block_button_text_hover_color }};
}
}
{%- endstyle -%}
{% endif %}
{% if block.settings.block_button_open_new_window != false %}
{% assign new_window_attrs = 'target="_blank" rel="noopener noreferrer"' %}
{% else %}
{% assign new_window_attrs = '' %}
{% endif %}
<a
href="{{ block.settings.block_button_link }}"
class="button"
role="button"
{{ new_window_attrs }}
>
{{- block.settings.block_button_label | escape -}}
</a>
{% comment %}
------------------------------------------------------------
LIQUID BLOCK
------------------------------------------------------------
{% endcomment %}
{% when 'custom_liquid' %}
{% if block.settings.block_custom_liquid != blank %}
{{ block.settings.block_custom_liquid }}
{% endif %}
{% endcase %}
</div>
<!-- END {{ this_block }} -->
{% endfor %}
</div>
<!-- END {{ section_class }}__blocks-wrapper -->
{% endif %}
</div>
<!-- END {{ section_class }}__wrapper -->
</div>
<!-- END zf-section-{{ section.id }} -->
{% comment %}
------------------------------------------------------------
SCRIPTS
------------------------------------------------------------
{% endcomment %}
<script type="module">
function initCustomSection(container) {
if (!container) return;
}
// Run the script on initial page load
document.addEventListener('DOMContentLoaded', function () {
const sectionContainer = document.querySelector('[data-section-id="{{ section.id }}"]');
initCustomSection(sectionContainer);
});
// Re-run the script when the section is loaded or re-rendered in the Theme Editor
document.addEventListener('shopify:section:load', function (event) {
if (event.detail.sectionId === '{{ section.id }}') {
initCustomSection(event.target);
}
});
</script>
{% comment %}
------------------------------------------------------------
SCHEMA
------------------------------------------------------------
{% endcomment %}
{% schema %}
{
"name": "ZF: Multi-Tool", // Must Be Renamed
"tag": "section",
"class": "zf-multi-tool-section", // Must Be Renamed
"settings": [
{
"type": "header",
"content": "Color Scheme"
},
{
"type": "color",
"id": "background_color",
"label": "Background",
"default": "#ffffff"
},
{
"type": "color",
"id": "heading_color",
"label": "Headings",
"default": "#000000"
},
{
"type": "color",
"id": "body_color",
"label": "Body",
"default": "#000000"
},
{
"type": "header",
"content": "Desktop: Layout & Spacing"
},
{
"type": "range",
"id": "margin_top",
"min": 0,
"max": 250,
"step": 5,
"unit": "px",
"label": "Margin Top",
"default": 30
},
{
"type": "range",
"id": "margin_bottom",
"min": 0,
"max": 250,
"step": 5,
"unit": "px",
"label": "Margin Bottom",
"default": 30
},
{
"type": "select",
"id": "text_alignment",
"label": "t:sections.typography.text_align",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "range",
"id": "section_width",
"min": 10,
"max": 100,
"step": 1,
"unit": "%",
"label": "Width",
"default": 100
},
{
"type": "header",
"content": "Mobile: Layout & Spacing"
},
{
"type": "range",
"id": "margin_top_mobile",
"min": 0,
"max": 250,
"step": 5,
"unit": "px",
"label": "Margin Top",
"default": 30
},
{
"type": "range",
"id": "margin_bottom_mobile",
"min": 0,
"max": 250,
"step": 5,
"unit": "px",
"label": "Margin Bottom",
"default": 30
},
{
"type": "select",
"id": "text_alignment_mobile",
"label": "t:sections.typography.text_align",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "range",
"id": "section_width_mobile",
"min": 10,
"max": 100,
"step": 1,
"unit": "%",
"label": "Width",
"default": 100
}
],
"blocks": [
{
"name": "Heading",
"type": "text",
"settings": [
{
"type": "text",
"id": "block_heading",
"label": "Heading",
"default": "Hello World"
},
{
"type": "select",
"id": "block_heading_tag",
"label": "Tag",
"default": "h1",
"options": [
{
"value": "h1",
"label": "H1"
},
{
"value": "h2",
"label": "H2"
},
{
"value": "h3",
"label": "H3"
},
{
"value": "h4",
"label": "H4"
},
{
"value": "h5",
"label": "H5"
},
{
"value": "h6",
"label": "H6"
}
]
},
{
"type": "header",
"content": "Desktop: Layout & Spacing"
},
{
"type": "range",
"id": "block_heading_size",
"min": 1,
"max": 101,
"step": 1,
"unit": "px",
"label": "Size",
"default": 25
},
{
"type": "range",
"id": "block_heading_line_height",
"min": 1,
"max": 3,
"step": 0.1,
"unit": "-",
"label": "Line Height",
"default": 1.2
},
{
"type": "range",
"id": "block_heading_margin_top",
"min": 0,
"max": 250,
"step": 5,
"unit": "px",
"label": "Margin Top",
"default": 0
},
{
"type": "range",
"id": "block_heading_margin_bottom",
"min": 0,
"max": 250,
"step": 5,
"unit": "px",
"label": "Margin Bottom",
"default": 25
},
{
"type": "header",
"content": "Mobile: Layout & Spacing"
},
{
"type": "range",
"id": "block_heading_size_mobile",
"min": 1,
"max": 101,
"step": 1,
"unit": "px",
"label": "Size",
"default": 20
},
{
"type": "range",
"id": "block_heading_line_height_mobile",
"min": 1,
"max": 3,
"step": 0.1,
"unit": "-",
"label": "Line Height",
"default": 1.2
},
{
"type": "range",
"id": "block_heading_margin_top_mobile",
"min": 0,
"max": 250,
"step": 5,
"unit": "px",
"label": "Margin Top",
"default": 0
},
{
"type": "range",
"id": "block_heading_margin_bottom_mobile",
"min": 0,
"max": 250,
"step": 5,
"unit": "px",
"label": "Margin Bottom",
"default": 15
}
]
},
{
"name": "Paragraph",
"type": "richtext",
"settings": [
{
"type": "richtext",
"id": "block_richtext",
"label": "Content",
"default": "<p>Aliquip, sunt culpa sit nisi pariatur dolor exercitation.</p>"
},
{
"type": "header",
"content": "Desktop: Layout & Spacing"
},
{
"type": "range",
"id": "block_richtext_size",
"min": 1,
"max": 101,
"step": 1,
"unit": "px",
"label": "Size",
"default": 15
},
{
"type": "range",
"id": "block_richtext_line_height",
"min": 1,
"max": 3,
"step": 0.1,
"unit": "-",
"label": "Line Height",
"default": 1.2
},
{
"type": "range",
"id": "block_richtext_margin_top",
"min": 0,
"max": 250,
"step": 5,
"unit": "px",
"label": "Margin Top",
"default": 0
},
{
"type": "range",
"id": "block_richtext_margin_bottom",
"min": 0,
"max": 250,
"step": 5,
"unit": "px",
"label": "Margin Bottom",
"default": 0
},
{
"type": "header",
"content": "Mobile: Layout & Spacing"
},
{
"type": "range",
"id": "block_richtext_size_mobile",
"min": 1,
"max": 101,
"step": 1,
"unit": "px",
"label": "Size",
"default": 13
},
{
"type": "range",
"id": "block_richtext_line_height_mobile",
"min": 1,
"max": 3,
"step": 0.1,
"unit": "-",
"label": "Line Height",
"default": 1.2
},
{
"type": "range",
"id": "block_richtext_margin_top_mobile",
"min": 0,
"max": 250,
"step": 5,
"unit": "px",
"label": "Margin Top",
"default": 0
},
{
"type": "range",
"id": "block_richtext_margin_bottom_mobile",
"min": 0,
"max": 250,
"step": 5,
"unit": "px",
"label": "Margin Bottom",
"default": 0
}
]
},
{
"type": "custom_image",
"name": "Image",
"settings": [
{
"type": "header",
"content": "Image Settings"
},
{
"type": "image_picker",
"id": "block_image",
"label": "Image"
},
{
"type": "select",
"id": "block_image_alignment",
"label": "Alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "range",
"id": "block_image_width",
"min": 5,
"max": 100,
"step": 1,
"unit": "%",
"label": "Width",
"default": 100
},
{
"type": "text",
"id": "block_image_alt_text",
"label": "Alt Text"
},
{
"type": "url",
"id": "block_image_link_url",
"label": "URL"
},
{
"type": "checkbox",
"id": "block_image_open_new_window",
"label": "Open In New Window",
"default": false
}
]
},
{
"type": "button",
"name": "Button",
"settings": [
{
"type": "header",
"content": "Content"
},
{
"type": "text",
"id": "block_button_label",
"label": "Label",
"default": "Shop Now"
},
{
"type": "url",
"id": "block_button_link",
"label": "Link"
},
{
"type": "checkbox",
"id": "block_button_open_new_window",
"label": "Open In New Window",
"default": false
},
{
"type": "header",
"content": "Desktop: Dimensions & Shape"
},
{
"type": "range",
"id": "block_button_border_radius",
"min": 0,
"max": 60,
"step": 2,
"unit": "px",
"label": "Border Radius",
"default": 4
},
{
"type": "range",
"id": "block_button_border_width",
"min": 0,
"max": 15,
"step": 1,
"unit": "px",
"label": "Border Width",
"default": 2
},
{
"type": "range",
"id": "block_button_lr_padding",
"min": 0,
"max": 60,
"step": 1,
"unit": "px",
"label": "Left / Right Padding",
"default": 15
},
{
"type": "range",
"id": "block_button_tb_padding",
"min": 0,
"max": 60,
"step": 1,
"unit": "px",
"label": "Top / Bottom Padding",
"default": 5
},
{
"type": "range",
"id": "block_button_font_size",
"min": 1,
"max": 101,
"step": 1,
"unit": "px",
"label": "Font Size",
"default": 15
},
{
"type": "header",
"content": "Mobile: Dimensions & Shape"
},
{
"type": "range",
"id": "block_button_border_radius_mobile",
"min": 0,
"max": 60,
"step": 2,
"unit": "px",
"label": "Border Radius",
"default": 4
},
{
"type": "range",
"id": "block_button_border_width_mobile",
"min": 0,
"max": 15,
"step": 1,
"unit": "px",
"label": "Border Width",
"default": 2
},
{
"type": "range",
"id": "block_button_lr_padding_mobile",
"min": 0,
"max": 60,
"step": 1,
"unit": "px",
"label": "Left / Right Padding",
"default": 15
},
{
"type": "range",
"id": "block_button_tb_padding_mobile",
"min": 0,
"max": 60,
"step": 1,
"unit": "px",
"label": "Top / Bottom Padding",
"default": 5
},
{
"type": "range",
"id": "block_button_font_size_mobile",
"min": 1,
"max": 101,
"step": 1,
"unit": "px",
"label": "Fone Size",
"default": 15
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "block_button_background_color",
"label": "Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "block_button_background_hover_color",
"label": "Background Hover Color",
"default": "#333333"
},
{
"type": "color",
"id": "block_button_text_color",
"label": "Text Color",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "block_button_text_hover_color",
"label": "Text Hover Color",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "block_button_border_color",
"label": "Border Color",
"default": "#000000"
},
{
"type": "color",
"id": "block_button_border_hover_color",
"label": "Border Hover Color",
"default": "#333333"
}
]
},
{
"type": "custom_liquid",
"name": "Liquid Block",
"settings": [
{
"type": "liquid",
"id": "block_custom_liquid",
"label": "Custom Liquid"
}
]
}
],
"presets": [
{
"name": "ZF: Multi-Tool", // Must Be Renamed
"category": "ZF Sections"
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment