Announcement bar

Copy-paste a theme-editor section for headers & navigation - A dismissible top-of-page message with configurable text, link and colours.

Headers & navigationTheme sectionFree to copyOS 2.0 themes

Live previewCustomize in playground

Free delivery on orders over $75

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.
2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.
3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.
4Open the theme editor, add the section to a template, and replace the example values using the section settings.
5Preview the storefront and test it on a phone-sized screen before publishing.

announcement-bar.liquid

Complete source

1{%- if section.settings.text != blank -%}2  <div class="gpl-announcement" role="region" aria-label="Announcement"3       style="--gpl-bg: {{ section.settings.bg }}; --gpl-fg: {{ section.settings.fg }};">4    {%- if section.settings.link != blank -%}5      <a href="{{ section.settings.link }}">{{ section.settings.text | escape }}</a>6    {%- else -%}7      <p>{{ section.settings.text | escape }}</p>8    {%- endif -%}9    <button type="button" class="gpl-announcement__close" aria-label="Dismiss announcement">&times;</button>10  </div>11{%- endif -%}12 13{% schema %}14{15  "name": "Announcement bar",16  "settings": [17    { "type": "text", "id": "text", "label": "Message", "default": "Free delivery on orders over $75" },18    { "type": "url", "id": "link", "label": "Link (optional)" },19    { "type": "color", "id": "bg", "label": "Background", "default": "#0b1220" },20    { "type": "color", "id": "fg", "label": "Text colour", "default": "#c8f542" }21  ],22  "presets": [{ "name": "Announcement bar" }]23}24{% endschema %}25 26{% stylesheet %}27.gpl-announcement {28  position: relative;29  background: var(--gpl-bg);30  color: var(--gpl-fg);31  padding: 0.6rem 2.5rem;32  text-align: center;33  font-size: 0.875rem;34}35.gpl-announcement a,36.gpl-announcement p { color: inherit; margin: 0; }37.gpl-announcement a { text-decoration: underline; }38.gpl-announcement__close {39  position: absolute;40  right: 0.75rem;41  top: 50%;42  transform: translateY(-50%);43  background: none;44  border: 0;45  color: inherit;46  font-size: 1.25rem;47  cursor: pointer;48}49{% endstylesheet %}50 51{% javascript %}52document.querySelectorAll('.gpl-announcement').forEach((bar) => {53  if (sessionStorage.getItem('gpl-announcement') === 'closed') {54    bar.hidden = true;55    return;56  }57  const close = bar.querySelector('.gpl-announcement__close');58  if (close) {59    close.addEventListener('click', () => {60      bar.hidden = true;61      sessionStorage.setItem('gpl-announcement', 'closed');62    });63  }64});65{% endjavascript %}66

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.

2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.

3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.

4Open the theme editor, add the section to a template, and replace the example values using the section settings.

5Preview the storefront and test it on a phone-sized screen before publishing.

announcement-bar.liquid

Complete source

1{%- if section.settings.text != blank -%}2  <div class="gpl-announcement" role="region" aria-label="Announcement"3       style="--gpl-bg: {{ section.settings.bg }}; --gpl-fg: {{ section.settings.fg }};">4    {%- if section.settings.link != blank -%}5      <a href="{{ section.settings.link }}">{{ section.settings.text | escape }}</a>6    {%- else -%}7      <p>{{ section.settings.text | escape }}</p>8    {%- endif -%}9    <button type="button" class="gpl-announcement__close" aria-label="Dismiss announcement">&times;</button>10  </div>11{%- endif -%}12 13{% schema %}14{15  "name": "Announcement bar",16  "settings": [17    { "type": "text", "id": "text", "label": "Message", "default": "Free delivery on orders over $75" },18    { "type": "url", "id": "link", "label": "Link (optional)" },19    { "type": "color", "id": "bg", "label": "Background", "default": "#0b1220" },20    { "type": "color", "id": "fg", "label": "Text colour", "default": "#c8f542" }21  ],22  "presets": [{ "name": "Announcement bar" }]23}24{% endschema %}25 26{% stylesheet %}27.gpl-announcement {28  position: relative;29  background: var(--gpl-bg);30  color: var(--gpl-fg);31  padding: 0.6rem 2.5rem;32  text-align: center;33  font-size: 0.875rem;34}35.gpl-announcement a,36.gpl-announcement p { color: inherit; margin: 0; }37.gpl-announcement a { text-decoration: underline; }38.gpl-announcement__close {39  position: absolute;40  right: 0.75rem;41  top: 50%;42  transform: translateY(-50%);43  background: none;44  border: 0;45  color: inherit;46  font-size: 1.25rem;47  cursor: pointer;48}49{% endstylesheet %}50 51{% javascript %}52document.querySelectorAll('.gpl-announcement').forEach((bar) => {53  if (sessionStorage.getItem('gpl-announcement') === 'closed') {54    bar.hidden = true;55    return;56  }57  const close = bar.querySelector('.gpl-announcement__close');58  if (close) {59    close.addEventListener('click', () => {60      bar.hidden = true;61      sessionStorage.setItem('gpl-announcement', 'closed');62    });63  }64});65{% endjavascript %}66