How can I add a WhatsApp icon to the announcement bar?

CamiC · ‎10-29-2021

Is there any chance I can add the whatsapp icon to the announcement bar?

I´m using warehouse, my URL is https://ncxyrc99mxexencv-60284535015.shopifypreview.com

KetanKumar · ‎10-29-2021

sorry for this issue can you please share announcement bar section code

If helpful then please Like and Accept Solution. Partnership of your ☕️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

CamiC · ‎10-31-2021

{%- if section.settings.show_announcement -%}
  {%- capture section_settings -%}
  {
    "showNewsletter": {{ section.settings.show_newsletter | json }}
  }
  {%- endcapture -%}

  <section data-section-id="{{ section.id }}" data-section-type="announcement-bar" data-section-settings='{{ section_settings }}'>
    {%- if section.settings.show_newsletter -%}
      <div id="announcement-bar-newsletter" class="announcement-bar__newsletter hidden-phone" aria-hidden="true">
        <div class="container">
          <div class="announcement-bar__close-container">
            <button class="announcement-bar__close" data-action="toggle-newsletter">
              <span class="visually-hidden">{{ 'general.accessibility.close' | t }}</span>
              {%- render 'icon', icon: 'close' -%}
            </button>
          </div>
        </div>

        <div class="container container--extra-narrow">
          <div class="announcement-bar__newsletter-inner">
            {%- if section.settings.newsletter_title != blank -%}
              <h2 class="heading h1">{{ section.settings.newsletter_title | escape }}</h2>
            {%- endif -%}

            {%- if section.settings.newsletter_content != blank -%}
              <div class="rte">
                {{ section.settings.newsletter_content }}
              </div>
            {%- endif -%}

            {%- assign newsletter_id = 'newsletter-' | append: section.id -%}

            <div class="newsletter">
              {%- form 'customer', id: newsletter_id, class: 'form newsletter__form' -%}
                {%- if form.posted_successfully? -%}
                  <p class="alert alert--success alert--center">{{ 'home_page.newsletter.success' | t }}</p>
                  {%- if form.context == 'announcement-bar' -%}
                    {%- assign open_announcement = true -%}
                  {%- endif -%}
                {%- else -%}
                  {%- if form.errors -%}
                    <p class="alert alert--error">{{ form.errors.messages['email'] }}</p>
                  {%- endif -%}

                  <input type="hidden" name="contact[tags]" value="newsletter">
                  <input type="hidden" name="contact[context]" value="announcement-bar">

                  <div class="form__input-row">
                    <div class="form__input-wrapper form__input-wrapper--labelled">
                      <input type="email" id="announcement[contact][email]" name="contact[email]" class="form__field form__field--text" autofocus required>
                      <label for="announcement[contact][email]" class="form__floating-label">{{ 'home_page.newsletter.input' | t }}</label>
                    </div>

                    <button type="submit" class="form__submit button button--primary">{{ 'home_page.newsletter.submit' | t }}</button>
                  </div>
                {%- endif -%}
              {%- endform -%}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    <div class="announcement-bar">
      <div class="container">
        <div class="announcement-bar__inner">
          {%- if section.settings.link != blank -%}
            <a href="{{ section.settings.link }}" class="announcement-bar__content announcement-bar__content--{{ section.settings.text_position }}">{{ section.settings.text | escape }}</a>
          {%- else -%}
            <p class="announcement-bar__content announcement-bar__content--{{ section.settings.text_position }}">{{ section.settings.text | escape }}</p>
          {%- endif -%}

          {%- if section.settings.show_newsletter -%}
            <button type="button" class="announcement-bar__button hidden-phone" data-action="toggle-newsletter" aria-expanded="false" aria-controls="announcement-bar-newsletter">
              {%- render 'icon', icon: 'newsletter' -%}
              {{- section.settings.newsletter_button | escape -}}
            </button>
          {%- endif -%}
        </div>
      </div>
    </div>
  </section>

  <style>
    .announcement-bar {
      background: {{ section.settings.background }};
      color: {{ section.settings.text_color }};
    }
  </style>

  <script>
    {%- if section.settings.show_newsletter -%}
      document.documentElement.style.setProperty('--announcement-bar-button-width', document.querySelector('.announcement-bar__button').clientWidth + 'px');
    {%- else -%}
      document.documentElement.style.removeProperty('--announcement-bar-button-width');
    {%- endif -%}

    document.documentElement.style.setProperty('--announcement-bar-height', document.getElementById('shopify-section-{{ section.id }}').clientHeight + 'px');
  </script>
{%- endif -%}

{% schema %}
{
  "name": "Announcement bar",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_announcement",
      "label": "Show announcement",
      "default": true
    },
    {
      "type": "color",
      "id": "background",
      "label": "Background",
      "default": "#1e2d7d"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#ffffff"
    },
    {
      "type": "text",
      "id": "text",
      "label": "Text",
      "default": "Announce something here"
    },
    {
      "type": "select",
      "id": "text_position",
      "label": "Text position",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ],
      "default": "left",
      "info": "Text is always centered on mobile."
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "header",
      "content": "Newsletter"
    },
    {
      "type": "paragraph",
      "content": "Customers who subscribe will have their email address added to the \"accepts marketing\" [customer list](/admin/customers?query=&accepts_marketing=1)."
    },
    {
      "type": "paragraph",
      "content": "Only visible on desktop."
    },
    {
      "type": "checkbox",
      "id": "show_newsletter",
      "label": "Show sign up form",
      "default": true
    },
    {
      "type": "text",
      "id": "newsletter_button",
      "label": "Open button",
      "default": "Subscribe & Save"
    },
    {
      "type": "text",
      "id": "newsletter_title",
      "label": "Heading",
      "default": "Newsletter"
    },
    {
      "type": "richtext",
      "id": "newsletter_content",
      "label": "Text",
      "default": "<p>A short sentence describing what someone will receive by subscribing</p>"
    }
  ]
}
{% endschema %}

KetanKumar · ‎10-31-2021

@CamiC

thanks for code

can you please add this code

{%- if section.settings.show_announcement -%}
  {%- capture section_settings -%}
  {
    "showNewsletter": {{ section.settings.show_newsletter | json }}
  }
  {%- endcapture -%}

  <section data-section-id="{{ section.id }}" data-section-type="announcement-bar" data-section-settings='{{ section_settings }}'>
    {%- if section.settings.show_newsletter -%}
      <div id="announcement-bar-newsletter" class="announcement-bar__newsletter hidden-phone" aria-hidden="true">
        <div class="container">
          <div class="announcement-bar__close-container">
            <button class="announcement-bar__close" data-action="toggle-newsletter">
              <span class="visually-hidden">{{ 'general.accessibility.close' | t }}</span>
              {%- render 'icon', icon: 'close' -%}
            </button>
          </div>
        </div>

        <div class="container container--extra-narrow">
          <div class="announcement-bar__newsletter-inner">
            {%- if section.settings.newsletter_title != blank -%}
              <h2 class="heading h1">{{ section.settings.newsletter_title | escape }}</h2>
            {%- endif -%}

            {%- if section.settings.newsletter_content != blank -%}
              <div class="rte">
                {{ section.settings.newsletter_content }}
              </div>
            {%- endif -%}

            {%- assign newsletter_id = 'newsletter-' | append: section.id -%}

            <div class="newsletter">
              {%- form 'customer', id: newsletter_id, class: 'form newsletter__form' -%}
                {%- if form.posted_successfully? -%}
                  <p class="alert alert--success alert--center">{{ 'home_page.newsletter.success' | t }}</p>
                  {%- if form.context == 'announcement-bar' -%}
                    {%- assign open_announcement = true -%}
                  {%- endif -%}
                {%- else -%}
                  {%- if form.errors -%}
                    <p class="alert alert--error">{{ form.errors.messages['email'] }}</p>
                  {%- endif -%}

                  <input type="hidden" name="contact[tags]" value="newsletter">
                  <input type="hidden" name="contact[context]" value="announcement-bar">

                  <div class="form__input-row">
                    <div class="form__input-wrapper form__input-wrapper--labelled">
                      <input type="email" id="announcement[contact][email]" name="contact[email]" class="form__field form__field--text" autofocus required>
                      <label for="announcement[contact][email]" class="form__floating-label">{{ 'home_page.newsletter.input' | t }}</label>
                    </div>

                    <button type="submit" class="form__submit button button--primary">{{ 'home_page.newsletter.submit' | t }}</button>
                  </div>
                {%- endif -%}
              {%- endform -%}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}

    <div class="announcement-bar">
      <div class="container">
        <div class="announcement-bar__inner">
          {%- if section.settings.link != blank -%}
            <a href="{{ section.settings.link }}" class="announcement-bar__content announcement-bar__content--{{ section.settings.text_position }}">{{ section.settings.text | escape }} <span class="whatsapp"><svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 39 39"><path fill="#00E676" d="M10.7 32.8l.6.3c2.5 1.5 5.3 2.2 8.1 2.2 8.8 0 16-7.2 16-16 0-4.2-1.7-8.3-4.7-11.3s-7-4.7-11.3-4.7c-8.8 0-16 7.2-15.9 16.1 0 3 .9 5.9 2.4 8.4l.4.6-1.6 5.9 6-1.5z"></path><path fill="#FFF" d="M32.4 6.4C29 2.9 24.3 1 19.5 1 9.3 1 1.1 9.3 1.2 19.4c0 3.2.9 6.3 2.4 9.1L1 38l9.7-2.5c2.7 1.5 5.7 2.2 8.7 2.2 10.1 0 18.3-8.3 18.3-18.4 0-4.9-1.9-9.5-5.3-12.9zM19.5 34.6c-2.7 0-5.4-.7-7.7-2.1l-.6-.3-5.8 1.5L6.9 28l-.4-.6c-4.4-7.1-2.3-16.5 4.9-20.9s16.5-2.3 20.9 4.9 2.3 16.5-4.9 20.9c-2.3 1.5-5.1 2.3-7.9 2.3zm8.8-11.1l-1.1-.5s-1.6-.7-2.6-1.2c-.1 0-.2-.1-.3-.1-.3 0-.5.1-.7.2 0 0-.1.1-1.5 1.7-.1.2-.3.3-.5.3h-.1c-.1 0-.3-.1-.4-.2l-.5-.2c-1.1-.5-2.1-1.1-2.9-1.9-.2-.2-.5-.4-.7-.6-.7-.7-1.4-1.5-1.9-2.4l-.1-.2c-.1-.1-.1-.2-.2-.4 0-.2 0-.4.1-.5 0 0 .4-.5.7-.8.2-.2.3-.5.5-.7.2-.3.3-.7.2-1-.1-.5-1.3-3.2-1.6-3.8-.2-.3-.4-.4-.7-.5h-1.1c-.2 0-.4.1-.6.1l-.1.1c-.2.1-.4.3-.6.4-.2.2-.3.4-.5.6-.7.9-1.1 2-1.1 3.1 0 .8.2 1.6.5 2.3l.1.3c.9 1.9 2.1 3.6 3.7 5.1l.4.4c.3.3.6.5.8.8 2.1 1.8 4.5 3.1 7.2 3.8.3.1.7.1 1 .2h1c.5 0 1.1-.2 1.5-.4.3-.2.5-.2.7-.4l.2-.2c.2-.2.4-.3.6-.5s.4-.4.5-.6c.2-.4.3-.9.4-1.4v-.7s-.1-.1-.3-.2z"></path></svg></span></a>
          {%- else -%}
            <p class="announcement-bar__content announcement-bar__content--{{ section.settings.text_position }}">{{ section.settings.text | escape }}</p>
          {%- endif -%}

          {%- if section.settings.show_newsletter -%}
            <button type="button" class="announcement-bar__button hidden-phone" data-action="toggle-newsletter" aria-expanded="false" aria-controls="announcement-bar-newsletter">
              {%- render 'icon', icon: 'newsletter' -%}
              {{- section.settings.newsletter_button | escape -}}
            </button>
          {%- endif -%}
        </div>
      </div>
    </div>
  </section>

  <style>
    .announcement-bar {
      background: {{ section.settings.background }};
      color: {{ section.settings.text_color }};
    }
  </style>

  <script>
    {%- if section.settings.show_newsletter -%}
      document.documentElement.style.setProperty('--announcement-bar-button-width', document.querySelector('.announcement-bar__button').clientWidth + 'px');
    {%- else -%}
      document.documentElement.style.removeProperty('--announcement-bar-button-width');
    {%- endif -%}

    document.documentElement.style.setProperty('--announcement-bar-height', document.getElementById('shopify-section-{{ section.id }}').clientHeight + 'px');
  </script>
{%- endif -%}

{% schema %}
{
  "name": "Announcement bar",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_announcement",
      "label": "Show announcement",
      "default": true
    },
    {
      "type": "color",
      "id": "background",
      "label": "Background",
      "default": "#1e2d7d"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#ffffff"
    },
    {
      "type": "text",
      "id": "text",
      "label": "Text",
      "default": "Announce something here"
    },
    {
      "type": "select",
      "id": "text_position",
      "label": "Text position",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ],
      "default": "left",
      "info": "Text is always centered on mobile."
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "header",
      "content": "Newsletter"
    },
    {
      "type": "paragraph",
      "content": "Customers who subscribe will have their email address added to the \"accepts marketing\" [customer list](/admin/customers?query=&accepts_marketing=1)."
    },
    {
      "type": "paragraph",
      "content": "Only visible on desktop."
    },
    {
      "type": "checkbox",
      "id": "show_newsletter",
      "label": "Show sign up form",
      "default": true
    },
    {
      "type": "text",
      "id": "newsletter_button",
      "label": "Open button",
      "default": "Subscribe & Save"
    },
    {
      "type": "text",
      "id": "newsletter_title",
      "label": "Heading",
      "default": "Newsletter"
    },
    {
      "type": "richtext",
      "id": "newsletter_content",
      "label": "Text",
      "default": "<p>A short sentence describing what someone will receive by subscribing</p>"
    }
  ]
}
{% endschema %}

If helpful then please Like and Accept Solution. Partnership of your ☕️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

How can I add a WhatsApp icon to the announcement bar?

How can I add a WhatsApp icon to the announcement bar?

Community Blog Articles