Add the header section

.stylelintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": ["stylelint-config-standard-scss"]
+  "extends": ["stylelint-config-standard-scss"],
+  "rules": {
+    "selector-class-pattern": "^([a-z][a-z0-9]*)((-|__|--)[a-z0-9]+)*$"
+  }
 }

assets/main.js

@@ -0,0 +1,35 @@
+/**
+ * Main Component
+ *
+ * Handles core functionality for the site:
+ * - Page loaded state management
+ *
+ */
+
+const MainConfig = {
+  selector: {
+    doc: document.documentElement
+  },
+  modifier: {
+    loaded: 'loaded'
+  }
+}
+
+const MainDOM = {
+  setClassLoaded () {
+    requestAnimationFrame(() => {
+      MainConfig.selector.doc.classList.add(MainConfig.modifier.loaded)
+    })
+  }
+}
+
+const initMain = () => {
+  MainDOM.setClassLoaded()
+  return true
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initMain, { once: true })
+} else {
+  initMain()
+}

config/settings_data.json

@@ -1,7 +1,7 @@
 {
   "current": {
     "button_corners": "square",
-    "button_font_size": 18,
+    "button_font_size": 16,
     "button_font_weight": "700",
     "button_size": "md",
     "color_schemes": {
@@ -63,12 +63,68 @@
     "font_weight_h2": "700",
     "font_weight_h3": "700",
     "font_weight_headers": "700",
+    "icon_style": "outline",
     "sections": {
       "header": {
         "type": "header",
-        "blocks": {},
-        "block_order": [],
+        "blocks": {
+          "logo": {
+            "type": "logo",
+            "settings": {
+              "logo_custom_title": "{{ shop.name }}",
+              "logo_image": "",
+              "logo_image_floated": "",
+              "logo_svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" height=\"40\" viewBox=\"0 0 155 40\" width=\"155\"><rect fill=\"#326f30\" height=\"32.3164\" rx=\"3.72881\" width=\"32.3164\" x=\"3.72882\" y=\"3.84181\"/><path d=\"m19.887 26.2147v-15.5368l7.2505 4.1432-7.2505 4.1431m-3.1073 6.9087c-.6422.3728-1.0358.8493-1.0358 1.3775 0 1.1394 1.8644 2.0716 4.1431 2.0716 2.2788 0 4.1432-.9322 4.1432-2.0716 0-.5178-.3936-1.0047-1.0358-1.3775\" stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.07156\"/><path d=\"m44.4315 30v-19.5982h7.8018c3.8606 0 6.2199 2.0107 6.2199 5.2816 0 2.1716-.9651 3.7266-2.815 4.5041 2.0643.6702 3.1099 2.2252 3.1099 4.5041 0 3.3513-2.3324 5.3084-6.3808 5.3084zm7.5069-16.5687h-4.0752v5.3352h4.1556c1.8767 0 2.9223-.9919 2.9223-2.7346 0-1.689-1.0724-2.6006-3.0027-2.6006zm.2949 8.2307h-4.3701v5.3085h4.3701c1.9303 0 3.0027-.9384 3.0027-2.7079 0-1.6622-1.0992-2.6006-3.0027-2.6006zm7.5971 1.6891c0-4.1288 2.9759-6.9707 7.0779-6.9707 4.1019 0 7.0779 2.8419 7.0779 6.9707 0 4.1287-2.976 6.9706-7.0779 6.9706-4.102 0-7.0779-2.8419-7.0779-6.9706zm3.2708 0c0 2.4129 1.555 4.0483 3.8071 4.0483 2.252 0 3.807-1.6354 3.807-4.0483s-1.555-4.0484-3.807-4.0484c-2.2521 0-3.8071 1.6355-3.8071 4.0484zm11.9226-.2681c0-3.8607 2.5202-6.7562 6.3004-6.7562 1.9839 0 3.5389.8311 4.3164 2.2521l.1877-1.8231h3.0295v12.5739c0 4.4237-2.6542 7.1852-6.9438 7.1852-3.807 0-6.4076-2.1717-6.8098-5.7106h3.2709c.2145 1.7159 1.5281 2.7346 3.5389 2.7346 2.2521 0 3.6998-1.4209 3.6998-3.6193v-2.1985c-.8311 1.2333-2.4665 2.0108-4.37 2.0108-3.7535 0-6.22-2.8151-6.22-6.6489zm3.2976-.0805c0 2.2253 1.421 3.8875 3.5658 3.8875 2.2521 0 3.6462-1.5818 3.6462-3.8875 0-2.252-1.3673-3.807-3.6462-3.807-2.1716 0-3.5658 1.6354-3.5658 3.807zm19.0422 7.346c-3.9411 0-6.7026-2.8687-6.7026-6.9706 0-4.1556 2.7079-7.0243 6.5953-7.0243 3.9677 0 6.4877 2.6542 6.4877 6.783v.992l-9.973.0268c.2413 2.3325 1.4746 3.5121 3.6462 3.5121 1.7963 0 2.9758-.697 3.3508-1.9571h3.03c-.563 2.8955-2.976 4.6381-6.4344 4.6381zm-.0804-11.3139c-1.9304 0-3.11 1.0456-3.4318 3.0296h6.6486c0-1.8231-1.2597-3.0296-3.2168-3.0296zm6.6768 17.1049v-2.7346h1.957c1.287 0 2.091-.2949 2.654-1.8499l.376-.992-5.336-13.8072h3.459l3.405 9.6516 3.592-9.6516h3.378l-6.488 16.1933c-.992 2.4666-2.386 3.4853-4.557 3.4853-.912 0-1.716-.1072-2.44-.2949zm17.569-6.1395h-3.03v-19.9468h3.271v8.6329c.858-1.4746 2.627-2.3593 4.638-2.3593 3.78 0 6.086 2.9491 6.086 7.1315 0 4.0752-2.493 6.8902-6.3 6.8902-1.984 0-3.673-.8847-4.451-2.4129zm.268-6.6757c0 2.3861 1.474 4.0215 3.726 4.0215 2.306 0 3.673-1.6622 3.673-4.0215s-1.367-4.0484-3.673-4.0484c-2.252 0-3.726 1.6623-3.726 4.0484zm15.795 6.6757h-3.244v-19.9468h3.244zm8.551.3485c-3.941 0-6.702-2.8687-6.702-6.9706 0-4.1556 2.708-7.0243 6.595-7.0243 3.968 0 6.488 2.6542 6.488 6.783v.992l-9.973.0268c.241 2.3325 1.474 3.5121 3.646 3.5121 1.796 0 2.976-.697 3.351-1.9571h3.03c-.563 2.8955-2.976 4.6381-6.435 4.6381zm-.08-11.3139c-1.93 0-3.11 1.0456-3.432 3.0296h6.649c0-1.8231-1.26-3.0296-3.217-3.0296z\" fill=\"#071904\"/></svg>",
+              "logo_svg_floated": "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" height=\"40\" viewBox=\"0 0 155 40\" width=\"155\"><rect fill=\"#326f30\" height=\"32.3164\" rx=\"3.72881\" width=\"32.3164\" x=\"3.72876\" y=\"3.84181\"/><path d=\"m19.887 26.2147v-15.5368l7.2505 4.1432-7.2505 4.1431m-3.1073 6.9087c-.6422.3728-1.0358.8493-1.0358 1.3775 0 1.1394 1.8644 2.0716 4.1431 2.0716s4.1431-.9322 4.1431-2.0716c0-.5178-.3935-1.0047-1.0357-1.3775\" stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.07156\"/><path d=\"m44.4314 30v-19.5982h7.8017c3.8607 0 6.22 2.0107 6.22 5.2816 0 2.1716-.9652 3.7266-2.8151 4.5041 2.0644.6702 3.11 2.2252 3.11 4.5041 0 3.3513-2.3325 5.3084-6.3808 5.3084zm7.5068-16.5687h-4.0751v5.3352h4.1556c1.8767 0 2.9223-.9919 2.9223-2.7346 0-1.689-1.0724-2.6006-3.0028-2.6006zm.2949 8.2307h-4.37v5.3085h4.37c1.9304 0 3.0028-.9384 3.0028-2.7079 0-1.6622-1.0992-2.6006-3.0028-2.6006zm7.5972 1.6891c0-4.1288 2.9759-6.9707 7.0779-6.9707 4.1019 0 7.0778 2.8419 7.0778 6.9707 0 4.1287-2.9759 6.9706-7.0778 6.9706-4.102 0-7.0779-2.8419-7.0779-6.9706zm3.2708 0c0 2.4129 1.555 4.0483 3.8071 4.0483 2.252 0 3.807-1.6354 3.807-4.0483s-1.555-4.0484-3.807-4.0484c-2.2521 0-3.8071 1.6355-3.8071 4.0484zm11.9226-.2681c0-3.8607 2.5201-6.7562 6.3004-6.7562 1.9839 0 3.5389.8311 4.3164 2.2521l.1877-1.8231h3.0295v12.5739c0 4.4237-2.6542 7.1852-6.9438 7.1852-3.8071 0-6.4076-2.1717-6.8098-5.7106h3.2708c.2145 1.7159 1.5282 2.7346 3.539 2.7346 2.252 0 3.6998-1.4209 3.6998-3.6193v-2.1985c-.8311 1.2333-2.4665 2.0108-4.3701 2.0108-3.7534 0-6.2199-2.8151-6.2199-6.6489zm3.2976-.0805c0 2.2253 1.421 3.8875 3.5658 3.8875 2.252 0 3.6462-1.5818 3.6462-3.8875 0-2.252-1.3674-3.807-3.6462-3.807-2.1716 0-3.5658 1.6354-3.5658 3.807zm19.0422 7.346c-3.9411 0-6.7026-2.8687-6.7026-6.9706 0-4.1556 2.7078-7.0243 6.5953-7.0243 3.9678 0 6.4878 2.6542 6.4878 6.783v.992l-9.9731.0268c.2413 2.3325 1.4746 3.5121 3.6462 3.5121 1.7963 0 2.9759-.697 3.3509-1.9571h3.03c-.563 2.8955-2.976 4.6381-6.4345 4.6381zm-.0805-11.3139c-1.9303 0-3.11 1.0456-3.4317 3.0296h6.6487c0-1.8231-1.2598-3.0296-3.217-3.0296zm6.677 17.1049v-2.7346h1.957c1.287 0 2.091-.2949 2.654-1.8499l.375-.992-5.335-13.8072h3.459l3.405 9.6516 3.592-9.6516h3.378l-6.488 16.1933c-.992 2.4666-2.386 3.4853-4.557 3.4853-.912 0-1.716-.1072-2.44-.2949zm17.568-6.1395h-3.029v-19.9468h3.271v8.6329c.858-1.4746 2.627-2.3593 4.638-2.3593 3.78 0 6.086 2.9491 6.086 7.1315 0 4.0752-2.494 6.8902-6.301 6.8902-1.984 0-3.673-.8847-4.45-2.4129zm.269-6.6757c0 2.3861 1.474 4.0215 3.726 4.0215 2.306 0 3.673-1.6622 3.673-4.0215s-1.367-4.0484-3.673-4.0484c-2.252 0-3.726 1.6623-3.726 4.0484zm15.794 6.6757h-3.244v-19.9468h3.244zm8.552.3485c-3.941 0-6.702-2.8687-6.702-6.9706 0-4.1556 2.708-7.0243 6.595-7.0243 3.968 0 6.488 2.6542 6.488 6.783v.992l-9.973.0268c.241 2.3325 1.474 3.5121 3.646 3.5121 1.796 0 2.976-.697 3.351-1.9571h3.03c-.563 2.8955-2.976 4.6381-6.435 4.6381zm-.08-11.3139c-1.93 0-3.11 1.0456-3.432 3.0296h6.649c0-1.8231-1.26-3.0296-3.217-3.0296z\" fill=\"#fff\"/></svg>"
+            },
+            "disabled": null
+          },
+          "menu": {
+            "type": "menu",
+            "settings": {
+              "menu": "main-menu",
+              "menu_back_label": "Back",
+              "menu_alignment_horizontal": "center",
+              "menu_alignment_vertical": "top",
+              "menu_opener_position": "left"
+            },
+            "disabled": null
+          },
+          "search": {
+            "type": "search",
+            "settings": {
+              "search_closer_label": "Close",
+              "search_placeholder": "Search",
+              "show_search": true
+            },
+            "disabled": null
+          },
+          "button": {
+            "type": "button",
+            "settings": {
+              "button_label": "Contact us",
+              "button_url": "booqable://pages/contact",
+              "show_button_desktop": true,
+              "show_button_mobile": true
+            },
+            "disabled": null
+          }
+        },
+        "block_order": [
+          "logo",
+          "menu",
+          "search",
+          "button"
+        ],
         "settings": {
+          "color_scheme": "set-1",
+          "header_outline": "none",
+          "padding_bottom_desktop": "lg",
+          "padding_bottom_mobile": "md",
+          "padding_top_desktop": "lg",
+          "padding_top_mobile": "md",
+          "show_transparency": true,
+          "sticky_header": true
         },
         "disabled": null
       }