Add A Button to The Announcement Bar - Taste Theme

Store Design
1

Dear Community Members,

Please help me add a CTA button to the announcement bar similar to the below example.

I need it aligned to the left,

Background color #ececee

Hover color #262628

Website URL:

https://mavie-food.com/

Thank you.

Gaiar_0-1663590353659.png
Gaiar_0-1663590353659.png2736×1416 949 KB

https://lifelypets.com/
2

@Gaiar - do you have track page? I think announcement bar code editing will be needed to add this button to your bar

3

Hi @suyash1

I am sorry, would you please clarify your response.

What is a track page?

4

@Gaiar - I saw your screenshot, it has track button,

if you want just button then it can be added but it will need code editing

5

@suyash1

Yes!

I need help with the code.

6

@Gaiar - need announcement bar code, can you s\hare your file code here?

7

@suyash1

This is the announcement-bar.liquid 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 -%}
{%- endcase -%} {%- endfor -%}

{% 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”: “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 %}

8

@Gaiar - open customize settings, check header->announcement bar, you already have an link in t\he bar

9

@Gaiar you can replace above code with code below and add css to the very end of your base.css file

.announcement_bar_button {
    background-color: #ececee;
    border: none;
    padding: 10px;
    border-radius: 50px;
}

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'announcement' -%}

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

{%- endif -%}

Here

{{ 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,
"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": "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 %}