Change announcement bar font and add icons to look like 'Bleame'

[robertbarta]

Here is the link to my website:

https://evagleam.com/

Here is the link to the website I am trying to replicate:

https://bleame.com/

[Dawood_Mirza_]

You can try this code by following these steps: 

Go to Online Store->Theme->Edit code.

Search file theme.liquid

Paste the below code at the bottom of the file -> Save

Code-

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500;600;700;800&family=Poppins:wght@700&disp..." rel="stylesheet">

<style>

.announcement-bar__message {

font-size: 13px;

font-family: poppins medium;

}

</style>

I have added font size as 13px  adjust accordingly 

To add trucks and emoji just search truck emoji on Google and copy paste

[robertbarta]

[Dawood_Mirza_]

Please share the code of the "announcement-bar.liquid" file.

[robertbarta]

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'announcement' -%}
<div class="announcement-bar color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
{%- if block.settings.text != blank -%}
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
{%- endif -%}
<div class="page-width">
<p class="announcement-bar__message {{ block.settings.text_alignment }} h5">
<span>{{ block.settings.text | escape }}</span>
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</p>
</div>
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}

{% schema %}
{
"name": "t:sections.announcement-bar.name",
"max_blocks": 12,
"class": "announcement-bar-section",
"blocks": [
{
"type": "announcement",
"name": "t:sections.announcement-bar.blocks.announcement.name",
"settings": [
{
"type": "text",
"id": "text",
"default": "Welcome to our store",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
},
{
"type": "select",
"id": "text_alignment",
"options": [
{
"value": "left",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "accent-1",
"label": "t:sections.all.colors.label"
},
{
"type": "url",
"id": "link",
"label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
}
]
}
],
"default": {
"blocks": [
{
"type": "announcement"
}
]
}
}
{% endschema %}

[Dawood_Mirza_]

@robertbarta ,

Do to Edit Code > sections > add new Section > name it anything like Announcementbar-2

remove default code and add this code

{% schema %}
{
  "name": "Announcement Bar 2",
  "settings": [
    {
      "type": "image_picker",
      "id": "icon_image_1",
      "label": "Icon Image 1"
    },
    {
      "type": "text",
      "id": "announcement_text_1",
      "label": "Announcement Text 1",
      "default": "FREE SHIPPING"
    },
    {
      "type": "image_picker",
      "id": "icon_image_2",
      "label": "Icon Image 2",
    },
    {
      "type": "text",
      "id": "announcement_text_2",
      "label": "Announcement Text 2",
      "default": "4.9 GOOGLE RATING"
    },
    {
      "type": "color",
      "id": "banner_background_color",
      "label": "Background Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#FFFFFF"
    }
  ],
  "presets": [
    {
      "name": "Announcement Bar 2",
      "category": "Promotional",
      "settings": {
        "icon_image_1": "",
        "announcement_text_1": "FREE SHIPPING",
        "icon_image_2": "",
        "announcement_text_2": "4.9 GOOGLE RATING",

        "banner_background_color": "#000000",
        "text_color": "#FFFFFF"
      }
    }
  ]
}
{% endschema %}

{% assign icon_image_1 = section.settings.icon_image_1 | img_url: 'medium' %}
{% assign icon_image_2 = section.settings.icon_image_2 | img_url: 'medium' %}

{% assign announcement_text_1 = section.settings.announcement_text_1 %}
{% assign announcement_text_2 = section.settings.announcement_text_2 %}

{% assign banner_background_color = section.settings.banner_background_color %}
{% assign text_color = section.settings.text_color %}

<div class="announcement-bar" style="background-color: {{ banner_background_color }}; color: {{ text_color }}; padding: 5px 10px; text-align: center; font-size: 14px; display: flex; align-items: center; justify-content: center; height: 40px;">
  <div style="display: flex; align-items: center; margin-right: 10px;">
    {% if icon_image_1 %}
      <img src="{{ icon_image_1 }}" alt="Icon Image 1" style="height: 20px; margin-right: 5px; margin-bottom: 2px;">
    {% endif %}
    <p>{{ announcement_text_1 }}</p>
  </div>
  <div style="display: flex; align-items: center; margin: 0 10px;">
    {% if icon_image_2 %}
      <img src="{{ icon_image_2 }}" alt="Icon Image 2" style="height: 20px; margin-right: 5px; margin-bottom: 2px;">
    {% endif %}
    <p>{{ announcement_text_2 }}</p>
  </div>
  </div>

then from customizer add this new section to header

select your colors for font and background, enter your text, For addition if images go to : https://remixicon.com/

search for truck image 

add images and then good to go 


Do give a like and mark it as solution, if I have been helpful

[robertbarta]

It shows error when I try to save the file

[Dawood_Mirza_]

Sorry for the delay, I got cought up in some important work

Just remove comma(,) from end  line 19 

[cd22]

dawood can you please help me also,

using the debutify theme and we want to put the same style of google icons in the announcement bar as this one below can you please help us

the store below is our current store
we are also having issues with the logo upload off canva it pushes our header bigger when we make the font bigger (as you can see with the surrounding blue rectangle) 

 

if you could help us it would be much appreciated

 

[Dawood_Mirza_]

Hi @cd22 , Please share the store URL for me to check the theme Documentation since you are using and third party theme.
You have issues with logo and the icons right?

BR 

Dawood Mirza

[cd22]

https://kitchnco.com/

here it is, but as it is go daddy it says store coming soon