multiple links in debut theme announcement bar

julhobart
Tourist
9 0 3

Hi there,

I would like to include multiple links in the announcement bar: https://p4sp7y45jnbzfqov-58788085959.shopifypreview.com/

I want the words between each | to link to a different URL. Please help!

Thanks!

 

 

 

Replies 8 (8)
AlexEffron
Shopify Partner
2468 386 1038

Hello, @julhobart 

There is some coding needed to implement this functiionality.

julhobart
Tourist
9 0 3

Can you help with that?

julhobart
Tourist
9 0 3

can someone help me with this?

KetanKumar
Shopify Partner
24920 2495 9027

@julhobart 

yes please user rich text schema code or share your header code so i will check and update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
julhobart
Tourist
9 0 3

I tried to use html in the announcement bar text field but it didn't work, it just displayed the HTML as I typed it in. How do I share the header code? Here's a section from the header.liquid code that addresses the announcement bar. Please let me know if you'd like to see something else.

 

<div data-section-id="{{ section.id }}" data-section-type="header-section" data-header-section>
{% if section.settings.message %}
{% if section.settings.home_page_only == false or request.page_type == 'index' %}
<style>
.announcement-bar {
background-color: {{ section.settings.color_bg }};
}

.announcement-bar__link:hover {
{% assign brightness = section.settings.color_bg | color_brightness %}

{% if brightness <= 192 %}
{% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
{% else %}
{% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
{% endif %}
}

.announcement-bar__message {
color: {{ section.settings.color_text }};
}
</style>

<div class="announcement-bar" role="region" aria-label="{{ 'sections.header.announcement_bar_label' | t }}">
{%- unless section.settings.message_link == blank -%}
<a href="{{ section.settings.message_link }}" class="announcement-bar__link">
{%- endunless -%}
<p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>
{%- unless section.settings.message_link == blank -%}
</a>
{%- endunless -%}
</div>

{% endif %}
{% endif %}

KetanKumar
Shopify Partner
24920 2495 9027

@julhobart 

thanks but schema code is missing

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
julhobart
Tourist
9 0 3

Hi! Sorry, I'm new to shopify. Where do I find the schema code? And is there a specific section you need to see?

KetanKumar
Shopify Partner
24920 2495 9027

@julhobart 

yes please share full section code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing