Barra de Região – Script Shopify

Site para escolher a cor: https://htmlcolorcodes.com/

Script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<style>
:root {
--cor-da-barra: #121212; /* ALTERAR COR DA BARRA */
--cor-do-texto: white; /* ALTERAR COR DO TEXTO */
--cor-do-icone: white; /* ALTERAR COR DO ÍCONE */
}
.mobile #barra {float: left;padding: 12px 0px 12px 7px;height: 100%;width: 1400px;margin: 0 auto;}
.modelo {background-color: var(--cor-da-barra);color: var(--cor-do-texto);height: 44px;width: 100%;display: flex;}
.mobile #barra #bloco {float: left;height: 20px;display: inline-block;width: 85%;}
.mobile #barra #bloco .continuo {float: left;clear: both;font-size: 13px;line-height: 20px;display: inline-block;width:
100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.mobile #barra #icone {background-position: -75px -340px;width: 20px;height: 20px;float: left;margin: 0px 4px 0 0px;}
.biline {background-size: 275px;}
@media (max-width: 768px) {
.mobile #barra {width: 100%;}
.mobile #barra #icone {margin: 0px 4px 0 20px;}
}
</style>
<script type="text/javascript">
$.getJSON( "https://ipinfo.io/json", function(localizacao) {
var cidade = localizacao['city'];
var estado = localizacao['country'];
$("#cliente").html("Ofertas para {{ customer.first_name | capitalize }} {%- if customer.first_name -%} -&nbsp; {%- endif -
%}" + cidade + ", " + estado +" e Região.");
});
</script>
<div class="modelo mobile"><div id="barra"><div class="biline" id="icone">
<svg color="var(--cor-do-icone)" fill="var(--cor-do-icone)" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7
13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z">
</path></svg>
</div><div id="bloco"><span class="continuo"><span id="cliente"></span></span></div></div></div>