@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
Shopify Discussion
Partners and Developers
Ollie
Aug 24, 2022
