<div style="background-color:{{ section.settings.custombarcolor }}!important;" class="announcement_bottom_blocks">
  <div class="icon-text-wrap">
    <div class="icon">
      {% unless section.settings.custom_icon == blank and section.settings.icon == blank %}
        {% if section.settings.custom_icon != blank %}
          <img
            src="{{ section.settings.custom_icon | image_url: width: 150 }}"
            width="auto"
            height="auto"
            loading="lazy"
          >
        {% else %}
          {% render 'material-icon', icon: section.settings.icon, filled: section.settings.filled_icon %}
        {% endif %}
      {% endunless %}
    </div>
    <div class="text">
      <p style="font-size:{{ section.settings.iconbarfont }}px!important;">{{ section.settings.custom_top_bar1 }}</p>
    </div>
  </div>

  <div class="icon-text-wrap">
    <div class="icon">
      {% unless section.settings.custom_icon2 == blank and section.settings.icon2 == blank %}
        {% if section.settings.custom_icon2 != blank %}
          <img
            src="{{ section.settings.custom_icon2 | image_url: width: 150 }}"
            width="auto"
            height="auto"
            loading="lazy"
          >
        {% else %}
          {% render 'material-icon', icon: section.settings.icon2, filled: section.settings.filled_icon2 %}
        {% endif %}
      {% endunless %}
    </div>
    <div class="text">
      <p style="font-size:{{ section.settings.iconbarfont }}px!important;">{{ section.settings.custom_top_bar2 }}</p>
    </div>
  </div>
</div>

{% if section.settings.enablesticky2iconbar %}
<style>
.two-icon-bar-section {
    position: sticky!important;
    top: 0;
}
</style>
{% endif %}

{% schema %}
  {
    "name": "2 Icon Top Bar",
    "class": "two-icon-bar-section",
    "settings": [
      {
      "type": "checkbox",
      "id": "enablesticky2iconbar",
      "label": "Enable sticky bar",
      "default": false
    },

{
          "type": "header",
          "content": "Icon #1"
        },
       {
          "type": "text",
          "id": "icon",
          "default": "local_shipping",
          "label": "Icon",
          "info": "[View all available icons](https:\/\/fonts.google.com\/icons?icon.set=Material+Symbols&icon.platform=web)."
        },
        {
          "type": "checkbox",
          "id": "filled_icon",
          "default": false,
          "label": "Filled icon"
        },
       {
          "type": "image_picker",
          "id": "custom_icon",
          "label": "Custom icon"
        },


{
          "type": "header",
          "content": "Icon #2"
        },


       {
          "type": "text",
          "id": "icon2",
          "default": "favorite",
          "label": "Icon",
          "info": "[View all available icons](https:\/\/fonts.google.com\/icons?icon.set=Material+Symbols&icon.platform=web)."
        },
        {
          "type": "checkbox",
          "id": "filled_icon2",
          "default": false,
          "label": "Filled icon"
        },


     {
          "type": "image_picker",
          "id": "custom_icon2",
          "label": "Custom icon"
        },


 {
                  "type": "text",
                  "id": "custom_top_bar1",
                  "label": "Text",
                 "default": "Free shipping"
  },



 {
                  "type": "text",
                  "id": "custom_top_bar2",
                  "label": "Text",
             "default": "10,000+ Happy Customers"
  },
      {
        "type": "color",
        "id": "iconcolors",
        "label": "Icon Color",
        "default": "#FFFFFF"
      },

      {
        "type": "color",
        "id": "iconstextcolor",
        "label": "Text Color",
        "default": "#FFFFFF"
      },

  {
        "type": "color",
        "id": "custombarcolor",
        "label": "Bar Color",
        "default": "#000000"
      },
        {
      "type": "range",
      "id": "iconbarfont",
      "min": 13,
      "max": 19,
      "step": 1,
      "label": "Font size",
      "default": 14
    }
],

     "presets": [
    {
      "name": "2 Icon Bar",
      "category": "Announcement"
    }
  ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

<style>
  .icon .material-icon.material-symbols-outlined {
      color: {{section.settings.iconcolors }};
  }

      .announcement_bottom_blocks .text p {
      margin: 10px 10px 10px 5px;
      color: {{section.settings.iconstextcolor }};
  }
</style>
