How to add two announcement bars on top of each other?

[Dave013]

Hey, I'm looking to add two announcement bars on top of each other but I am currently unable to.

I only have the option to do slideshow. Is there a way around this? Thank you 

[Spac-es · Accepted solution]

This depends a lot depending on the theme of your store. In my case I use the theme: DAWN and by default I can add up to 12 announcement bars...

[Spac-es · Accepted solution]

This depends a lot depending on the theme of your store. In my case I use the theme: DAWN and by default I can add up to 12 announcement bars...

[Dave013]

Thank you! I’m using the Sense theme maybe that’s why..

[Spac-es · Accepted solution]

Don't worry, I've managed to quickly adapt the DAWN Theme code to your SENSE theme store. To achieve this, follow these steps:

1- Open the code editor of your Shopify store.
2- Look for a file called: "announcement-bar.liquid".

3- Remove all the code.

4- Add the following code:

{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'announcement' -%}
      {%- assign background_color = block.settings.background_color | default: '#FFFFFF' -%}
      {%- assign top_margin = block.settings.top_margin | default: 0 -%}
      {%- assign bottom_margin = block.settings.bottom_margin | default: 0 -%}
      <div role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }} style="background-color: {{ background_color }}; margin-top: {{ top_margin }}px; margin-bottom: {{ bottom_margin }}px;">
        {%- if block.settings.text != blank -%}
          {%- if block.settings.link != blank -%}
            <a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
          {%- endif -%}
              <div class="page-width">
                <p class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                  <span>{{ block.settings.text | escape }}</span>
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                </p>
              </div>
          {%- if block.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
      </div>
  {%- endcase -%}
{%- endfor -%}

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "class": "announcement-bar-section",
  "blocks": [
    {
      "type": "announcement",
      "name": "t:sections.announcement-bar.blocks.announcement.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Welcome to our store",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "Background color",
          "default": "#FFFFFF"
        },
        {
          "type": "range",
          "id": "top_margin",
          "label": "Top Margin (in pixels)",
          "min": 0,
          "max": 100,
          "step": 1,
          "default": 0
        },
        {
          "type": "range",
          "id": "bottom_margin",
          "label": "Bottom margin (in pixels)",
          "min": 0,
          "max": 100,
          "step": 1,
          "default": 0
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }
}
{% endschema %}

5- Save the file.
6- From the "Customize" section you can now add vertical ad bars.
7- I have included in the code the option to dynamically change the background color and the upper and lower margins.

I hope it helped you!

[Dave013]

WOW! Thank you so much I really appreciate it. Words can't even explain how grateful I am. You're the best

[avazquez_rsw]

Could this also be applied to the Vantage theme? Thanks!

[Spac-es]

Yes, in principle you shouldn't have any problems. Same steps.