Shopify themes, liquid, logos, and UX
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
sorry for this issue can you please share announcement bar section 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 }}</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 %}
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 %}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024