Merge pull request #67 from abhishekjani08/footer

Customizable Footer Section Added

assets/footer.css

@@ -0,0 +1,116 @@
+/* footer.css */
+.footer {
+    background-color: #4C148A;
+    /* Footer background color */
+    color: #ffffff;
+    /* Footer text color */
+    padding: 40px;
+    /* Footer padding */
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.footer__section {
+    flex-basis: calc(25% - 20px);
+    /* Four columns with margins */
+    margin-bottom: 15px;
+}
+
+.footer__title {
+    font-size: 20px;
+    /* Adjust the font size as needed */
+    color: #ffffff;
+    /* White color for the titles */
+    font-weight: 600;
+    /* Semi-bold for a bit of emphasis */
+    margin-bottom: 20px;
+    /* Space below the title */
+    text-transform: uppercase;
+    /* Uppercase for the title for stylistic choice */
+    letter-spacing: 1px;
+    /* Add some spacing between letters */
+}
+
+.footer__toggle {
+    font-size: 20px; /* Example size, adjust as needed */
+    color: #ffffff; /* White color for the titles */
+    font-weight: 600; /* Semi-bold for emphasis */
+    margin-bottom: 20px; /* Space below the title */
+   letter-spacing: 1px; /* Spacing between letters */
+}
+
+.footer__link {
+    display: block;
+    color: #ffffff;
+    margin-bottom: 10px;
+    text-decoration: none;
+}
+
+.footer__form {
+    display: flex;
+    gap: 10px;
+}
+
+.footer__input {
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    flex-grow: 1;
+}
+
+.footer__button {
+    background-color: #8C65F7;
+    /* Button background color */
+    color: #ffffff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.footer__button:hover {
+    background-color: #7A4FC6;
+    /* Button hover state */
+}
+
+/* footer.css */
+.footer__toggle-checkbox {
+    display: none;
+    /* Hide the default checkbox */
+}
+
+
+.footer__links-list {
+    margin-top: 20px;
+}
+
+@media (max-width: 768px) {
+    .footer {
+        flex-direction: column;
+    }
+
+    .footer__section {
+        flex-basis: 100%;
+        padding: 0;
+    }
+
+    .footer__toggle-checkbox {
+        display: inline-block;
+        /* Show checkbox in mobile view */
+    }
+
+    .footer__links-list {
+        display: none;
+    }
+
+    .footer__toggle-checkbox:checked+.footer__toggle+.footer__links-list {
+        display: block;
+    }
+
+    .footer__title {
+        font-size: 18px;
+        /* Slightly smaller font size for mobile */
+        text-align: center;
+    }
+}

sections/footer.liquid

@@ -0,0 +1,78 @@
+{{ 'footer.css' | asset_url | stylesheet_tag }}
+
+<footer class="footer">
+  {% for block in section.blocks %}
+    <div class="footer__section">
+      <input type="checkbox" id="footer-toggle-{{ forloop.index }}" class="footer__toggle-checkbox">
+      <label for="footer-toggle-{{ forloop.index }}" class="footer__toggle">{{ block.settings.heading }}</label>
+      <ul class="footer__links-list">
+        {% for link in linklists[block.settings.menu].links %}
+          <li class="footer__link-item">
+            <a href="{{ link.url }}" class="footer__link">{{ link.title }}</a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endfor %}
+  <div class="footer__section footer__section--newsletter">
+    <p class="footer__title footer__title-common">
+      {{ section.settings.newsletter_heading }}
+    </p>
+    <form class="footer__form">
+      <input type="email" placeholder="{{ section.settings.email_placeholder }}" class="footer__input">
+      <button type="submit" class="footer__button">{{ section.settings.button_text }}</button>
+    </form>
+  </div>
+</footer>
+
+{% schema %}
+{
+  "name": "Footer",
+  "max_blocks": 3,
+  "blocks": [
+    {
+      "type": "menu",
+      "name": "Menu item",
+      "settings": [
+        {
+          "type": "text",
+          "id": "heading",
+          "label": "Heading",
+          "default": "Footer Heading"
+        },
+        {
+          "type": "link_list",
+          "id": "menu",
+          "label": "Menu"
+        }
+      ]
+    }
+  ],
+  "settings": [
+    {
+      "type": "text",
+      "id": "newsletter_heading",
+      "label": "Newsletter Heading",
+      "default": "Join the club"
+    },
+    {
+      "type": "text",
+      "id": "email_placeholder",
+      "label": "Email Placeholder",
+      "default": "Your email"
+    },
+    {
+      "type": "text",
+      "id": "button_text",
+      "label": "Button Text",
+      "default": "Subscribe"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default Footer",
+      "category": "Footer"
+    }
+  ]
+}
+{% endschema %}