Often I find myself creating or repeating the same snippets of code over and over again, these days I look at ways to keep things simple and modular so that I can quickly grab and reuse in any project.

This "default section and Block" snippet is the base for most of the items I create.

I found that not all sections for sites will want the same padding for Desktop as they do for Mobile, so rather than "hard code" that into styles where it would require CSS knowledge at the minimum I though to give the option for Mobile and Desktop right out the gate!

This little snippet works well with the dawn theme up to version 14 so far, I thought I would just share what I think is a little "time saver".




	{% comment %}
		Default settings for a section with blocks
	{% endcomment %}
	{% comment %}
		Styles to be applied from section and block settings - this can also be done via passing the --var into a style sheet. I do the essential parts here due to page loading and content shift avoidance.
	{% endcomment %}



{%- style -%}
	.section-{{ section.id }}-padding {
	padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
	padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
	}
	
	{% if section.settings.full-width == false %}
		.section-{{ section.id }}-padding {
		max-width: 1320px;
		margin: 0 auto;
		}
	{% endif %}
	
	@media screen and ( max-width: 750px ) {
	.section-{{ section.id }}-padding {
	padding-top: {{ section.settings.padding_top_mobile | times: 0.75 | round: 0 }}px;
	padding-bottom: {{ section.settings.padding_bottom_mobile | times: 0.75 | round: 0 }}px;
	}
	}
{%- endstyle -%}



	{% comment %}
		This will be the link to your style sheet for the section and block - I choose to name the top level class the same as the file name so that you can find the file quickly from the front end of the site.
	{% endcomment %}
	
	{% comment %}
		{{ 'jsm-default.css' | asset_url | stylesheet_tag }}
	{% endcomment %}
	
	{% comment %}
		The content for your section and block :)
	{% endcomment %}



 {% comment %}
	The content for your section and block :)

{{ "the content" | escape }}


{% endcomment %}



	{% comment %}
			Your script or script calls after the content has been loaded
		
	{% endcomment %}



{% schema %}
{
  "name": "jsm-defaults",
  "class": "jsm-default",
  "tag": "section",
  "settings": [
    {
      "type": "header",
      "content": "Desktop Settings"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 0
    },
    {
      "type": "header",
      "content": "Mobile Settings"
    },
    {
      "type": "range",
      "id": "padding_top_mobile",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_bottom_mobile",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 0
    },
    {
      "type": "header",
      "content": "General Settings"
    },
    {
      "type": "checkbox",
      "id": "full-width",
      "default": false,
      "label": "Full Width"
    }
  ],
  "blocks": [
  ],
  "presets": [
    {
      "name": "JSM Defaults"
    }
  ]
}
{% endschema %}

Get updates for this feed

Shopify

Handy to Have Default Section and Block