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.

 

    icon-globe-us-ca icon-globe

Leave a comment