Shopify · anavasbr · Dec 7, 2024 · Dec 7, 2024 · Dec 7, 2024 · Dec 7, 2024
diff --git a/config/settings_data.json b/config/settings_data.json
@@ -1,5 +1,197 @@
+/*
+ * ------------------------------------------------------------
+ * IMPORTANT: The contents of this file are auto-generated.
+ *
+ * This file may be updated by the Shopify admin theme editor
+ * or related systems. Please exercise caution as any changes
+ * made to this file may be overwritten.
+ * ------------------------------------------------------------
+ */
 {
-  "current": "Default",
+  "current": {
+    "logo_width": 90,
+    "type_header_font": "assistant_n4",
+    "heading_scale": 100,
+    "type_body_font": "assistant_n4",
+    "body_scale": 100,
+    "page_width": 1200,
+    "spacing_sections": 0,
+    "spacing_grid_horizontal": 8,
+    "spacing_grid_vertical": 8,
+    "buttons_border_thickness": 1,
+    "buttons_border_opacity": 100,
+    "buttons_radius": 0,
+    "buttons_shadow_opacity": 0,
+    "buttons_shadow_horizontal_offset": 0,
+    "buttons_shadow_vertical_offset": 4,
+    "buttons_shadow_blur": 5,
+    "variant_pills_border_thickness": 1,
+    "variant_pills_border_opacity": 55,
+    "variant_pills_radius": 40,
+    "variant_pills_shadow_opacity": 0,
+    "variant_pills_shadow_horizontal_offset": 0,
+    "variant_pills_shadow_vertical_offset": 4,
+    "variant_pills_shadow_blur": 5,
+    "inputs_border_thickness": 1,
+    "inputs_border_opacity": 55,
+    "inputs_radius": 0,
+    "inputs_shadow_opacity": 0,
+    "inputs_shadow_horizontal_offset": 0,
+    "inputs_shadow_vertical_offset": 4,
+    "inputs_shadow_blur": 5,
+    "card_style": "standard",
+    "card_image_padding": 0,
+    "card_text_alignment": "left",
+    "card_color_scheme": "scheme-2",
+    "card_border_thickness": 0,
+    "card_border_opacity": 10,
+    "card_corner_radius": 0,
+    "card_shadow_opacity": 0,
+    "card_shadow_horizontal_offset": 0,
+    "card_shadow_vertical_offset": 4,
+    "card_shadow_blur": 5,
+    "collection_card_style": "standard",
+    "collection_card_image_padding": 0,
+    "collection_card_text_alignment": "left",
+    "collection_card_color_scheme": "scheme-2",
+    "collection_card_border_thickness": 0,
+    "collection_card_border_opacity": 10,
+    "collection_card_corner_radius": 0,
+    "collection_card_shadow_opacity": 0,
+    "collection_card_shadow_horizontal_offset": 0,
+    "collection_card_shadow_vertical_offset": 4,
+    "collection_card_shadow_blur": 5,
+    "blog_card_style": "standard",
+    "blog_card_image_padding": 0,
+    "blog_card_text_alignment": "left",
+    "blog_card_color_scheme": "scheme-2",
+    "blog_card_border_thickness": 0,
+    "blog_card_border_opacity": 10,
+    "blog_card_corner_radius": 0,
+    "blog_card_shadow_opacity": 0,
+    "blog_card_shadow_horizontal_offset": 0,
+    "blog_card_shadow_vertical_offset": 4,
+    "blog_card_shadow_blur": 5,
+    "text_boxes_border_thickness": 0,
+    "text_boxes_border_opacity": 10,
+    "text_boxes_radius": 0,
+    "text_boxes_shadow_opacity": 0,
+    "text_boxes_shadow_horizontal_offset": 0,
+    "text_boxes_shadow_vertical_offset": 4,
+    "text_boxes_shadow_blur": 5,
+    "media_border_thickness": 1,
+    "media_border_opacity": 5,
+    "media_radius": 0,
+    "media_shadow_opacity": 0,
+    "media_shadow_horizontal_offset": 0,
+    "media_shadow_vertical_offset": 4,
+    "media_shadow_blur": 5,
+    "popup_border_thickness": 1,
+    "popup_border_opacity": 10,
+    "popup_corner_radius": 0,
+    "popup_shadow_opacity": 5,
+    "popup_shadow_horizontal_offset": 0,
+    "popup_shadow_vertical_offset": 4,
+    "popup_shadow_blur": 5,
+    "drawer_border_thickness": 1,
+    "drawer_border_opacity": 10,
+    "drawer_shadow_opacity": 0,
+    "drawer_shadow_horizontal_offset": 0,
+    "drawer_shadow_vertical_offset": 4,
+    "drawer_shadow_blur": 5,
+    "badge_position": "bottom left",
+    "badge_corner_radius": 40,
+    "sale_badge_color_scheme": "scheme-5",
+    "sold_out_badge_color_scheme": "scheme-3",
+    "social_facebook_link": "",
+    "social_instagram_link": "",
+    "social_youtube_link": "",
+    "social_tiktok_link": "",
+    "social_twitter_link": "",
+    "social_snapchat_link": "",
+    "social_pinterest_link": "",
+    "social_tumblr_link": "",
+    "social_vimeo_link": "",
+    "predictive_search_enabled": true,
+    "predictive_search_show_vendor": false,
+    "predictive_search_show_price": false,
+    "currency_code_enabled": true,
+    "cart_type": "notification",
+    "show_vendor": false,
+    "show_cart_note": false,
+    "cart_drawer_collection": "",
+    "sections": {
+      "main-password-header": {
+        "type": "main-password-header",
+        "settings": {
+          "color_scheme": "scheme-1"
+        }
+      },
+      "main-password-footer": {
+        "type": "main-password-footer",
+        "settings": {
+          "color_scheme": "scheme-1"
+        }
+      }
+    },
+    "color_schemes": {
+      "scheme-1": {
+        "settings": {
+          "background": "#FFFFFF",
+          "background_gradient": "",
+          "text": "#121212",
+          "button": "#121212",
+          "button_label": "#FFFFFF",
+          "secondary_button_label": "#121212",
+          "shadow": "#121212"
+        }
+      },
+      "scheme-2": {
+        "settings": {
+          "background": "#F3F3F3",
+          "background_gradient": "",
+          "text": "#121212",
+          "button": "#121212",
+          "button_label": "#F3F3F3",
+          "secondary_button_label": "#121212",
+          "shadow": "#121212"
+        }
+      },
+      "scheme-3": {
+        "settings": {
+          "background": "#242833",
+          "background_gradient": "",
+          "text": "#FFFFFF",
+          "button": "#FFFFFF",
+          "button_label": "#000000",
+          "secondary_button_label": "#FFFFFF",
+          "shadow": "#121212"
+        }
+      },
+      "scheme-4": {
+        "settings": {
+          "background": "#121212",
+          "background_gradient": "",
+          "text": "#FFFFFF",
+          "button": "#FFFFFF",
+          "button_label": "#121212",
+          "secondary_button_label": "#FFFFFF",
+          "shadow": "#121212"
+        }
+      },
+      "scheme-5": {
+        "settings": {
+          "background": "#334FB4",
+          "background_gradient": "",
+          "text": "#FFFFFF",
+          "button": "#FFFFFF",
+          "button_label": "#334FB4",
+          "secondary_button_label": "#FFFFFF",
+          "shadow": "#121212"
+        }
+      }
+    }
+  },
   "presets": {
     "Default": {
       "logo_width": 90,

diff --git a/config/test.liquid b/config/test.liquid
diff --git a/sections/Test.liquid b/sections/Test.liquid
@@ -0,0 +1,131 @@
+{% schema %}
+{
+  "name": "Custom Banner" /* Defines the name of the section in the Shopify theme editor */,
+  "settings": [
+    {
+      "type": "text" /* Input field for a title */,
+      "id": "title" /* Unique ID for the title setting */,
+      "label": "Title" /* Label displayed in the editor */,
+      "default": "Elegant Developers" /* Default value for the title */
+    },
+    {
+      "type": "text" /* Input field for a subtitle */,
+      "id": "subtitle" /* Unique ID for the subtitle setting */,
+      "label": "Subtitle" /* Label displayed in the editor */,
+      "default": "ONLY WORKING AT FSL" /* Default value for the subtitle */
+    },
+    {
+      "type": "url" /* Input field for a button link */,
+      "id": "button_link" /* Unique ID for the button link */,
+      "label": "Button Link" /* Label displayed in the editor */
+    },
+    {
+      "type": "text" /* Input field for button text */,
+      "id": "button_text" /* Unique ID for the button text */,
+      "label": "Button Text" /* Label displayed in the editor */,
+      "default": "CONTACT US" /* Default value for the button text */
+    },
+    {
+      "type": "image_picker" /* Allows the user to upload a background image */,
+      "id": "background_image" /* Unique ID for the background image */,
+      "label": "Background Image" /* Label displayed in the editor */
+    }
+  ],
+  "presets": [
+    {
+      "name": "Custom Banner" /* Default name for the section */
+    }
+  ]
+}
+{% endschema %}
+
+<section
+  class="custom-banner"
+  style="background-image: url({{ section.settings.background_image | img_url: 'master' }});"
+>
+  <!-- Section container with dynamic background image -->
+  <div class="custom-banner__content">
+    <div class="custom-banner__text">
+      <h1 class="custom-banner__title">{{ section.settings.title }}</h1>
+      <!-- Displays the dynamic title -->
+      <p class="custom-banner__subtitle">{{ section.settings.subtitle }}</p>
+      <!-- Displays the dynamic subtitle -->
+      <a href="{{ section.settings.button_link }}" class="custom-banner__button">{{ section.settings.button_text }}</a>
+      <!-- Button with dynamic text and link -->
+    </div>
+  </div>
+</section>
+
+<style>
+  /* General banner styling */
+  .custom-banner {
+    display: flex; /* Centers content horizontally */
+    align-items: center; /* Centers content vertically */
+    justify-content: center; /* Centers content within the banner */
+    position: relative; /* Allows for absolute positioning of child elements */
+    background-size: cover; /* Ensures the background covers the entire area */
+    background-repeat: no-repeat; /* Prevents the background from repeating */
+    background-position: center; /* Centers the background image */
+    height: 500px; /* Height of the banner */
+    padding: 0 80px; /* Horizontal padding */
+  }
+
+  /* Content container inside the banner */
+  .custom-banner__content {
+    display: flex; /* Flexbox container for alignment */
+    width: 100%; /* Takes full width */
+    max-width: 1200px; /* Limits the maximum width of the content */
+    justify-content: flex-end; /* Aligns the content to the right */
+    align-items: center; /* Vertically centers the content */
+  }
+
+  /* Text block inside the banner */
+  .custom-banner__text {
+    max-width: 600px; /* Sets the maximum width for the text area */
+    text-align: left; /* Aligns text to the left */
+  }
+
+  /* Title styling */
+  .custom-banner__title {
+    font-family: 'Playfair Display', serif; /* Serif font for the title */
+    font-size: 77px; /* Large font size */
+    font-weight: 400; /* Regular font weight */
+    line-height: 102.64px; /* Adjusts spacing between lines */
+    color: #000000; /* Black text color */
+    white-space: nowrap; /* Prevents text wrapping */
+    margin: 0 0 10px; /* Adds spacing below the title */
+  }
+
+  /* Subtitle styling */
+  .custom-banner__subtitle {
+    font-family: 'Cambay', sans-serif; /* Sans-serif font for the subtitle */
+    font-size: 28px; /* Font size for the subtitle */
+    font-weight: 400; /* Regular font weight */
+    line-height: 45.61px; /* Adjusts spacing between lines */
+    color: #000000; /* Black text color */
+    margin: 0 0 20px; /* Adds spacing below the subtitle */
+  }
+
+  /* Button styling */
+  .custom-banner__button {
+    display: inline-block; /* Makes the button behave as an inline-block */
+    width: 221px; /* Sets the width of the button */
+    height: 62px; /* Sets the height of the button */
+    font-family: 'Cambay', sans-serif; /* Font for the button */
+    font-size: 28px; /* Font size for the button text */
+    font-weight: bold; /* Bold font weight */
+    color: #ffffff; /* White text color */
+    text-align: center; /* Centers text within the button */
+    line-height: 58px; /* Centers the text vertically */
+    text-decoration: none; /* Removes underline from the link */
+    border: 4px solid #ffffff; /* White border */
+    background: transparent; /* Transparent background */
+    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effects */
+  }
+
+  /* Button hover effect */
+  .custom-banner__button:hover {
+    background-color: #ffffff; /* Changes background to white on hover */
+    color: #000000; /* Changes text color to black on hover */
+  }
+</style>
diff --git a/sections/header-group.json b/sections/header-group.json
@@ -1,3 +1,12 @@
+/*
+ * ------------------------------------------------------------
+ * IMPORTANT: The contents of this file are auto-generated.
+ *
+ * This file may be updated by the Shopify admin theme editor
+ * or related systems. Please exercise caution as any changes
+ * made to this file may be overwritten.
+ * ------------------------------------------------------------
+ */
 {
   "name": "t:sections.header.name",
   "type": "header",
@@ -9,25 +18,24 @@
           "type": "announcement",
           "settings": {
             "text": "Welcome to our store",
-            "text_alignment": "center",
-            "color_scheme": "scheme-1",
             "link": ""
           }
         }
       },
       "block_order": [
         "announcement-bar-0"
-      ]
+      ],
+      "settings": {}
     },
     "header": {
       "type": "header",
       "settings": {
-        "color_scheme": "scheme-1",
         "logo_position": "middle-left",
         "menu": "main-menu",
         "menu_type_desktop": "dropdown",
         "sticky_header_type": "on-scroll-up",
         "show_line_separator": true,
+        "color_scheme": "scheme-1",
         "enable_country_selector": true,
         "enable_language_selector": true,
         "mobile_logo_position": "center",

diff --git a/templates/404.json b/templates/404.json
@@ -1,7 +1,17 @@
+/*
+ * ------------------------------------------------------------
+ * IMPORTANT: The contents of this file are auto-generated.
+ *
+ * This file may be updated by the Shopify admin theme editor
+ * or related systems. Please exercise caution as any changes
+ * made to this file may be overwritten.
+ * ------------------------------------------------------------
+ */
 {
   "sections": {
     "main": {
-      "type": "main-404"
+      "type": "main-404",
+      "settings": {}
     }
   },
   "order": [