Solved

Different Announcement Bars for Different Countries

LumberjackBeard
Tourist
9 1 2

Hi,

I'm aware there are a few apps that offer the option of showing a different announcement depending on the customers' IP address and geolocation, but I'm not looking to pay any more in terms of monthly fees for features I feel could be achieved with a little bit of simple editing to the already existing theme code. I've tried a few of the free apps as well but they either display in a weird way or are just incompatible with my site for whatever reason.

With that in mind, does anyone know of a way I could edit the existing announcement-bar code to show one message for say customers in the UK, and another message for everyone else in the world, (see below for how it exists in my header.liquid section)?

Thanks for the help,

Mark

 

<!-- //announcement-bar code -->

 

<div class="header-container drawer__header-container">
<div class="header-wrapper" data-header-wrapper>
{% if section.settings.show_announcement %}
{% 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>

{% if section.settings.link == blank %}
<div class="announcement-bar">
{% else %}
<a href="{{ section.settings.link }}" class="announcement-bar announcement-bar--link">
{% endif %}

<p class="announcement-bar__message">{{ section.settings.text | escape }}</p>

{% if section.settings.link == blank %}
</div>
{% else %}
</a>
{% endif %}

{% endif %}
{% endif %}

Accepted Solution (1)

LumberjackBeard
Tourist
9 1 2

This is an accepted solution.

Turns out one free option I hadn't found/tried was the solution I needed... the only one I could get to work exactly as planned.

https://apps.shopify.com/yeps-io?surface_detail=yeps&surface_inter_position=1&surface_intra_position...

View solution in original post

Replies 2 (2)

LumberjackBeard
Tourist
9 1 2

This is an accepted solution.

Turns out one free option I hadn't found/tried was the solution I needed... the only one I could get to work exactly as planned.

https://apps.shopify.com/yeps-io?surface_detail=yeps&surface_inter_position=1&surface_intra_position...

MichaelGeo
Pathfinder
194 3 17

Hi congrats on finding the solution.

Here is one solution you may consider in the future: Geo Targetly. It provides a set of tools to deliver location-specific content on your webpage, and engage with multi-regional customers, including pop-ups, announcement bars, redirect to particular pages, multi-currency displaying, customised banners etc according to your customers' locations. It's easy to use, no code is necessary. Shopify platform is supported. Hope it helps.