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

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

robertbarta
Explorer
69 0 15

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/

i am trying to make my announcement bars look like this.png

Replies 10 (10)

Dawood_Mirza_
Trailblazer
135 18 29

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

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.
robertbarta
Explorer
69 0 15

add icons.png

Dawood_Mirza_
Trailblazer
135 18 29

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

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.
robertbarta
Explorer
69 0 15

{%- 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_
Trailblazer
135 18 29

@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

Dawood_Mirza__0-1715794232460.png

 

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

search for truck image 

Dawood_Mirza__1-1715794489426.png


add images and then good to go 


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

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.
robertbarta
Explorer
69 0 15

It shows error when I try to save the file

EvaGleam · Edit ~ EvaGleam Live · Shopify - Google Chrome 5_15_2024 9_33_07 PM.png

Dawood_Mirza_
Trailblazer
135 18 29

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

Just remove comma(,) from end  line 19 

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.
cd22
Tourist
5 0 1

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

nolan interior announcement bar.png

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) 

Screenshot 2024-09-25 at 4.49.29 pm.png

if you could help us it would be much appreciated

Dawood_Mirza_
Trailblazer
135 18 29

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

Want to work with me - dawoodmirzabusiness@gmail.com
Don't forget to like and mark it as Solution if it was helpful to you.
cd22
Tourist
5 0 1

https://kitchnco.com/

 

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