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

Tungsteno · ‎09-01-2022

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:

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:

Hope you can help me figure it out.

Thanks!

Ahsan_ANC · ‎09-01-2022

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

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com

To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

Tungsteno · ‎09-01-2022

Sure @Ahsan_ANC! Here it is:

{%- 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 -%}
              <p class="announcement-bar__message h5">
                {{ block.settings.text | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </p>
          {%- if block.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
      </div>
  {%- 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 · ‎09-01-2022

plz try this code in "announcement-bar.liquid" file.

{%- 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 -%}
              <p class="announcement-bar__message h5">
			    {%- if forloop.index == 1 -%}
                 <svg class="icon icon-accordion color-foreground-text" aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M0 3.75156C0 3.47454 0.224196 3.24997 0.500755 3.24997H10.647C10.9235 3.24997 11.1477 3.47454 11.1477 3.75156V5.07505V5.63362V6.10938V13.6616C10.9427 14.0067 10.8813 14.1101 10.5516 14.6648L7.22339 14.6646V13.6614H10.1462V4.25316H1.00151V13.6614H2.6842V14.6646H0.500755C0.224196 14.6646 0 14.44 0 14.163V3.75156Z"></path>
      <path d="M18.9985 8.08376L11.1477 6.10938V5.07505L19.6212 7.20603C19.8439 7.26203 20 7.46255 20 7.69253V14.1631C20 14.4401 19.7758 14.6647 19.4992 14.6647H17.3071V13.6615H18.9985V8.08376ZM11.1477 13.6616L13.3442 13.6615L13.3443 14.6647L10.5516 14.6648L11.1477 13.6616Z"></path>
      <path d="M7.71269 14.1854C7.71269 15.6018 6.56643 16.75 5.15245 16.75C3.73847 16.75 2.59221 15.6018 2.59221 14.1854C2.59221 12.7691 3.73847 11.6209 5.15245 11.6209C6.56643 11.6209 7.71269 12.7691 7.71269 14.1854ZM5.15245 15.7468C6.01331 15.7468 6.71118 15.0478 6.71118 14.1854C6.71118 13.3231 6.01331 12.6241 5.15245 12.6241C4.29159 12.6241 3.59372 13.3231 3.59372 14.1854C3.59372 15.0478 4.29159 15.7468 5.15245 15.7468Z"></path>
      <path d="M17.5196 14.1854C17.5196 15.6018 16.3733 16.75 14.9593 16.75C13.5454 16.75 12.3991 15.6018 12.3991 14.1854C12.3991 12.7691 13.5454 11.6209 14.9593 11.6209C16.3733 11.6209 17.5196 12.7691 17.5196 14.1854ZM14.9593 15.7468C15.8202 15.7468 16.5181 15.0478 16.5181 14.1854C16.5181 13.3231 15.8202 12.6241 14.9593 12.6241C14.0985 12.6241 13.4006 13.3231 13.4006 14.1854C13.4006 15.0478 14.0985 15.7468 14.9593 15.7468Z"></path></svg> {{ block.settings.text | escape }}
				{%- else -%}
				  {{ block.settings.text | escape }}
				{%- endif -%}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </p>
          {%- if block.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
      </div>
  {%- 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

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com

To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

Tungsteno · ‎09-01-2022

@Ahsan_ANC got this error message:

Ahsan_ANC · ‎09-01-2022

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

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com

To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

Tungsteno · ‎09-01-2022

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 · ‎09-01-2022

try this one

{%- 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 -%}
              <p class="announcement-bar__message h5">
			    {%- if forloop.index == 2 -%}
                 <svg  focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M0 3.75156C0 3.47454 0.224196 3.24997 0.500755 3.24997H10.647C10.9235 3.24997 11.1477 3.47454 11.1477 3.75156V5.07505V5.63362V6.10938V13.6616C10.9427 14.0067 10.8813 14.1101 10.5516 14.6648L7.22339 14.6646V13.6614H10.1462V4.25316H1.00151V13.6614H2.6842V14.6646H0.500755C0.224196 14.6646 0 14.44 0 14.163V3.75156Z" fill="#fff"></path>
      <path d="M18.9985 8.08376L11.1477 6.10938V5.07505L19.6212 7.20603C19.8439 7.26203 20 7.46255 20 7.69253V14.1631C20 14.4401 19.7758 14.6647 19.4992 14.6647H17.3071V13.6615H18.9985V8.08376ZM11.1477 13.6616L13.3442 13.6615L13.3443 14.6647L10.5516 14.6648L11.1477 13.6616Z" fill="#fff"></path>
      <path d="M7.71269 14.1854C7.71269 15.6018 6.56643 16.75 5.15245 16.75C3.73847 16.75 2.59221 15.6018 2.59221 14.1854C2.59221 12.7691 3.73847 11.6209 5.15245 11.6209C6.56643 11.6209 7.71269 12.7691 7.71269 14.1854ZM5.15245 15.7468C6.01331 15.7468 6.71118 15.0478 6.71118 14.1854C6.71118 13.3231 6.01331 12.6241 5.15245 12.6241C4.29159 12.6241 3.59372 13.3231 3.59372 14.1854C3.59372 15.0478 4.29159 15.7468 5.15245 15.7468Z" fill="#fff"></path>
      <path d="M17.5196 14.1854C17.5196 15.6018 16.3733 16.75 14.9593 16.75C13.5454 16.75 12.3991 15.6018 12.3991 14.1854C12.3991 12.7691 13.5454 11.6209 14.9593 11.6209C16.3733 11.6209 17.5196 12.7691 17.5196 14.1854ZM14.9593 15.7468C15.8202 15.7468 16.5181 15.0478 16.5181 14.1854C16.5181 13.3231 15.8202 12.6241 14.9593 12.6241C14.0985 12.6241 13.4006 13.3231 13.4006 14.1854C13.4006 15.0478 14.0985 15.7468 14.9593 15.7468Z" fill="#fff"></path></svg> {{ block.settings.text | escape }}
				{%- else -%}
				  {{ block.settings.text | escape }}
				{%- endif -%}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </p>
          {%- if block.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
      </div>
  {%- 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 %}

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com

To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

Tungsteno · ‎09-01-2022

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 · ‎12-18-2024

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