How to add an extra scrolling announcement bar to page

Store Design
, , , , ,
1

Hello, I want to put another scrolling announcement bar on my page but not on the header. Every time I try to put it on the page it just seems to change the one that is already on the header.

switchybits_0-1703410133764.png

switchybits_2-1703410167386.png
switchybits_2-1703410167386.png545×469 19.9 KB

2

it needs to create a seprate section on liquid that will work seprately from the header one.

i have created same on different store you can look on it collegehub.dk

3

Hi there,

So the easy fix is to make a small change in your announcement-bar.liquid file. You can fix this by simply removing the “section block”.

Find this piece of code in your liquid file:

"enabled_on": {
    "groups": ["header"]
  },

And simply delete it.

Hopefully this will work!

4

Yea I cant seem to find this section.

This is the code:


{% schema %}
{
  "name": "SS - Announcement Bar",
  "settings": [
    {
      "type": "header",
      "content": "Save section to see live"
    },
    {
      "type": "text",
      "id": "insert_css_class_target",
      "label": "Target CSS Class",
      "default": ".header, .pageheader, .section-header, #announcement, .toolbar, .header__wrapper",
      "placeholder": ".header, .pageheader",
      "info": "Empty text field this to display where you drag it. If you want to display the announcement bar in a specific place, you can add the CSS class of the target element here. Default is above header as announcement bar."
    },
    {
      "type": "header",
      "content": "Text"
    },
    {
        "type": "range",
        "id": "text_size",
        "label": "Font size",
        "default": 12,
        "min": 8,
        "max": 50,
        "step": 1,
        "unit": "px"
    },
    {
      "type": "font_picker",
      "id": "ss_font_family",
      "label": "Font family",
      "default": "montserrat_n4"
    },
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Url"
    },
    {
      "type": "header",
      "content": "Animation"
    },
    {
      "type": "range",
      "id": "animation_duration",
      "label": "Animation Duration",
      "unit": "sec",
      "min": 10,
      "max": 200,
      "step": 2,
      "default": 44
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "bg",
      "label": "Background Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#fff"
    },
    {
      "type": "range",
      "id": "hover_opacity",
      "label": "Background color hover opacity",
      "unit": "%",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 85
    },
    {
      "type": "header",
      "content": "Padding"
    },
    {
      "type": "range",
      "id": "padding_horizontal",
      "label": "Padding horizontal",
      "unit": "rem",
      "min": 0,
      "max": 5,
      "step": 0.2,
      "default": 2
    },
     {
      "type": "range",
      "id": "padding_vertical",
      "label": "Padding vertical",
      "unit": "rem",
      "min": 0,
      "max": 5,
      "step": 0.1,
      "default": 1.5
    }
  ],
  "presets": [
    {
      "category": "Custom",
      "name": "SS - Scrolling Announcement Bar",
      "blocks": [
        {
          "type": "text",
          "settings":{
            "text":"Free Shipping"
          }
        },
        {
          "type": "text",
           "settings":{
            "text":"Free Returns"
          }
        }
      ]
    }
  ],
  "max_blocks": 6,
  "blocks": [
    {
      "type": "text",
      "name": "Text",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text",
          "default": "Free Shipping"
        }
      ]
    }
  ]
}
{% endschema %}
5

aaah okay thanks, ill take a look