[DAWN THEME] How can I add a 'truck icon' to the Announcement Bar?

Tungsteno · September 1, 2022, 2:42pm

Dear Community,

How can I add a ‘truck icon’ to the Announcement Bar? I need to add a 'truck icon’

'Truck icon’ should be added before the “Envío GRATIS por compras mayores a S/ 250” text.

URL: https://wearhorse.myshopify.com
Screenshot:

Screen Shot 2022-09-01 at 09.26.14.jpg890×304 27.3 KB
Ideally, ’truck icon’ should be the same that is already available at the Product Page

URL: https://wearhorse.myshopify.com/products/polo-pique-azul-marino
Screenshot:

Screen Shot 2022-09-01 at 09.37.47.jpg646×606 16.8 KB

Hope you can help me figure it out.

Thanks!

Ahsan_ANC · September 1, 2022, 5:46pm

Hi @Tungsteno share the code of the “announcement-bar.liquid” file.

Tungsteno · September 1, 2022, 6:25pm

Sure @Ahsan_ANC ! Here it is:

{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'announcement' -%}
      
        {%- if block.settings.text != blank -%}
          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
              

                {{ block.settings.text | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              

          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
        {%- endif -%}
      

  {%- endcase -%}
{%- endfor -%}

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "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": "color_scheme",
          "options": [
            {
              "value": "background-1",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__1.label"
            },
            {
              "value": "background-2",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__2.label"
            },
            {
              "value": "inverse",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__3.label"
            },
            {
              "value": "accent-1",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__4.label"
            },
            {
              "value": "accent-2",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__5.label"
            }
          ],
          "default": "accent-1",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }
}
{% endschema %}

Ahsan_ANC · September 1, 2022, 6:32pm

plz try this code in “announcement-bar.liquid” file.

{%- for block in section.blocks -%}
  {%- case block.type -%}
  
    {%- when 'announcement' -%}
      
        {%- if block.settings.text != blank -%}
          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
              

			    {%- if forloop.index == 1 -%}
                  {{ block.settings.text | escape }}
				{%- else -%}
				  {{ block.settings.text | escape }}
				{%- endif -%}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              

          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
        {%- endif -%}
      

  {%- endcase -%}
{%- endfor -%}

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "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": "color_scheme",
          "options": [
            {
              "value": "background-1",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__1.label"
            },
            {
              "value": "background-2",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__2.label"
            },
            {
              "value": "inverse",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__3.label"
            },
            {
              "value": "accent-1",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__4.label"
            },
            {
              "value": "accent-2",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__5.label"
            }
          ],
          "default": "accent-1",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }
}
{% endschema %}
Cop

Tungsteno · September 1, 2022, 6:45pm

@Ahsan_ANC got this error message:

Ahsan_ANC · September 1, 2022, 6:49pm

i have updated the code in my previous reply plz use that new code

Tungsteno · September 1, 2022, 6:55pm

Almost there @Ahsan_ANC !

Truck icon should be displayed in white and in the second Announcement Bar row, before the text: “Envío GRATIS…”

Thank you so much! I really appreciate your help.

Ahsan_ANC · September 1, 2022, 7:02pm

try this one

{%- for block in section.blocks -%}
  {%- case block.type -%}
  
    {%- when 'announcement' -%}
      
        {%- if block.settings.text != blank -%}
          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
              

			    {%- if forloop.index == 2 -%}
                  {{ block.settings.text | escape }}
				{%- else -%}
				  {{ block.settings.text | escape }}
				{%- endif -%}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              

          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
        {%- endif -%}
      

  {%- endcase -%}
{%- endfor -%}

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "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": "color_scheme",
          "options": [
            {
              "value": "background-1",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__1.label"
            },
            {
              "value": "background-2",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__2.label"
            },
            {
              "value": "inverse",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__3.label"
            },
            {
              "value": "accent-1",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__4.label"
            },
            {
              "value": "accent-2",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.options__5.label"
            }
          ],
          "default": "accent-1",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.color_scheme.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }
}
{% endschema %}

Tungsteno · September 1, 2022, 8:57pm

It worked!

Now, how can I center it vertically and spacing it a little bit more? Just like the arrow at the right on top.

farhanaliijaz · December 18, 2024, 1:23pm

hi bro i need to add shipping truck icon in my annoucment bar can you help me

Topic		Replies	Views
Change announcement bar font and add icons to look like 'Bleame' Store Design design , customizations , third-party-themes	10	182	September 26, 2024
Theme Debut: Add shipping ICON to Announcement bar Store Design	9	134	October 15, 2023
Anyone know how to make an announcement bar like this ? Dawn Theme 13.0 Store Design menu , design , header , css , html	10	242	May 10, 2024
SVG Icons in Announcement bar integrieren Shopify Design design	5	60	June 12, 2024
Dawn 12 theme: How to Add a Shipping Icon to Announcement bar Store Design design , header , customizations , css	9	149	November 13, 2023

[DAWN THEME] How can I add a 'truck icon' to the Announcement Bar?

Related topics