Add WhatsApp icon to announcement bar

CamiC
Excursionist
34 0 13

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

Replies 3 (3)

KetanKumar
Shopify Partner
36839 3635 11972

@CamiC 

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

If helpful then please Like and Accept Solution.
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
Excursionist
34 0 13
{%- 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
Shopify Partner
36839 3635 11972

@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.
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