Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
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 %}
User | RANK |
---|---|
114 | |
89 | |
69 | |
68 | |
45 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022