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

Shopify Discussion
1

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

2

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…

1.PNG
1.PNG1242×191 6.43 KB

2.PNG
2.PNG647×318 17.6 KB

1 Like
3

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

4

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”.

1.PNG
1.PNG730×472 30 KB

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 -%}
      
        {%- if block.settings.text != blank -%}
          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
              

                

                  {{ block.settings.text | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                

              

          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
        {%- endif -%}
      

  {%- 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.

3.PNG
3.PNG1318×759 94.3 KB

I hope it helped you!

1 Like
5

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

2 Likes
6

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

7

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