Store Currency Drop Down Switcher - Smite Stores
Upload the images below to assets folder
store-switcher.liquid
Create a snippet named store-switcher.liquid and include in the location you want the drodown to appear.<div class="store-switcher dropdown">
<button class="dropbtn"><img class="globe-icon" src="{{ 'icon-globe-us-ca.png' | asset_url }}"> $</button>
<div class="dropdown-content">
<h3 class="site-switcher__dropdown__heading">Regions</h3>
<a href="https://globalsmite.hitpoint.tv/">Global (€)</a>
<a href="https://smite.hitpoint.tv/">United States ($)</a>
</div>
</div>
<style type="text/css">
h3.site-switcher__dropdown__heading {
color: #838383;
text-transform: uppercase;
font-size: 17px;
padding: 16px 16px 8px 16px;
}
img.globe-icon {
height: 40px;
width: auto;
}
img.globe-icon {
height: 40px;
position: relative;
width: auto;
top: 10px;
right: 10px;
}
.store-switcher.dropdown {
padding-right: 0;
margin-left: 10px;
float: left;
z-index: 9999 !important;
}
.dropbtn {
background: none;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background: none;
color: white;
padding: 16px;
font-size: 16px;
border: none;
padding-top: 0;
cursor: pointer;
}
.dropdown-content {
text-align: left;
display: none;
position: absolute;
background-color: #222;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
z-index: 99;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #444}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background: none;
}
</style>
US / CA Stores
Change the image to:
<img class=“globe-icon” src="{{ ‘icon-globe-us-ca.png’ | asset_url }}">
Global Stores
Change the image to:
<img class=“globe-icon” src="{{ ‘icon-globe.png’ | asset_url }}">
Change CSS to match theme.