Pretty simple with this one: I’d like to add an ‘X’ button at the right side of my announcement bar so website visitors can close it when they click.
Here’s where I’d like it placed:
If someone could drop some CSS in here for me to plug into the site, that would be much appreciated.
Using the latest Dawn Theme. Thanks!
Hey there MisfitsLifting,
Please refer to the custom code in the file announcement-bar.liquid
After that, you can see the result as below:
Where am I supposed to place this in the file?
Also, can you reply with the exact code for me to paste instead of a screenshot?
Thanks!
Hey there,
Please copy and paste the code:
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when ‘announcement’ -%}
{%- 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 -%}
x
{%- endcase -%}
{%- endfor -%}
.announcement-bar{ display: flex; } .announcement_close{ border: unset; }{% schema %}
{
“name”: “t:sections.announcement-bar.name”,
“max_blocks”: 12,
“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”: “select”,
“id”: “text_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label”
}
],
“default”: “center”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label”
},
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “accent-1”,
“label”: “t:sections.all.colors.label”
},
{
“type”: “url”,
“id”: “link”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.link.label”
}
]
}
],
“default”: {
“blocks”: [
{
“type”: “announcement”
}
]
}
}
{% endschema %}
