How To Make a Multi-Announcement Bar on PRESTIGE THEME

Store Design
1

Hi everyone, especially perfectionists!

I am trying to create a multi-announcement bar with links similar to this one: https://www.beardbrand.com

Does anyone have an idea how to achieve this?

I’ve tried a code mentioned by a Shopify Community Member, but it doesn’t seem to work:

{%- if section.settings.enable_bar -%}
{%- unless section.settings.home_page_only and template != 'index' -%}

{%- endunless -%}
{%- endif -%}

{% schema %}
{
  "name": "Announcement bar",
  "settings": [
      {
        "type": "checkbox",
        "id": "enable_bar",
        "label": "Enable bar",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "home_page_only",
        "label": "Home page only",
        "default": false
        },
      {
        "type": "color",
        "id": "background",
        "label": "Background",
        "default": "#000000"
      },
      {
        "type": "color",
        "id": "text_color",
        "label": "Text",
        "default": "#ffffff"
      }
    ],
 	"blocks": [
    	{
          "type": "announcement_bar",
          "name": "Announcement Bar",
          "settings": [
                  {
                    "id": "content",
                    "type": "text",
                    "label": "Announce something here"
                  },
	 			  {
                    "id": "link",
                    "type": "url",
                    "label": "Link"
                  }
	
             ]
		}
	],
	"presets":[
    	{
      	"name":"Announcement bar"
    	}
  	]
  }
{% endschema %}

I took the entire code and replaced the current announcement bar code, but it seems to not be working.

Original code:

{%- if section.settings.enable_bar -%}
{%- unless section.settings.home_page_only and template != 'index' -%}

{%- endunless -%}
{%- endif -%}

{% schema %}
{
"name": "Announcement bar",
"settings": [
{
"type": "checkbox",
"id": "enable_bar",
"label": "Enable bar",
"default": true
},
{
"type": "checkbox",
"id": "home_page_only",
"label": "Home page only",
"default": false
},
{
"type": "color",
"id": "background",
"label": "Background",
"default": "#000000"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#ffffff"
},
{
"type": "text",
"id": "content",
"label": "Text",
"default": "Announce something here"
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]
}
{% endschema %}
2

Hi @BeautifulDesign could you share your shopify store url? (myshopify.com)

3

@BeautifulDesign

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Hey you need only to add Jquery to the theme.liquid file one line before :

Here the code 4 copy and paste:

Everything is working well with this code we’ve used it in one project :wink:

5

@BeautifulDesign Not sure if you figured this out but i stumbled on this because i am on prestige and am trying to do the same plus that last comment with the jquery code looks super shady.

In your code, duplicate the section, announcement.liquid and name it something like announcement_2 or whatever you want. I called mine announcement_sale.liquid.

In the new section, scroll down to schema and change the name from announcement to whatever you want to call it. I used “Announcement Sale”

Next open theme.liquid and search for {% section ‘announcement’ %}

Should be directly under

duplicate the line and change ‘announcement’ to whatever your new section is called. in my case i changed this {% section ‘announcement’ %} to {% section ‘announcement_sale’ %}. New layout is

{% section 'announcement_sale' %} {% section 'announcement' %} {% section 'header' %}

you can work magic from there but this is the main point