Apps: Coin Currency Converter Installation

In this tutorial we will show you how and where to install your currency converter

This tutorial uses the Coin currency conversion app

You will need to have the Coin app installed to use this tutorial
Install Coin app

Use the following three steps to add the converter to the header of your site. Optionally, you can add the currency converter to your footer. For the footer, skip the following two steps and proceed to the bottom of this tutorial.

1

Modify currency format in General settings

Make sure you've completed the currency format change - Required:

https://docs.theshoppad.com/article/78-install-coin

2

Placing the converter in the header bar above the navigation

Open your sections/header.liquid file. If Pipeline is published/live, use this link:

sections/header.liquid

Around line 34, add the currency snippet just after the {% endif %} statement:

Add the following line to support the Coin app:

<div id='coin-container'></div>

Example:

Save the file.

3

Styling the dropdown

Open the assets/style.scss.liquid file. Use this link if Pipeline is your published theme:

https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

Paste the following style code to the very bottom of the file (add a couple blank lines after the very last code in that file, then paste the following):

/* -- Style Code for Coin Currency App -- */

.header__wrapper #coin-container {
    position: absolute;
    top: -3px;
}

@media screen and (min-width: 480px) {
    .header__wrapper #coin-container {
        right:20px
    }
}

.header__wrapper #coin-container select {
    width: auto;
    color: #656565;
    padding: 5px 24px 5px 8px
}

#coin-container select {
    font-family: "Montserrat","Helvetica Neue",Arial,sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8em
}

.header-search__wrapper {
    right: 120px !important
}

@media screen and (max-width: 480px) {
    .header-search__wrapper {
        right:105px !important
    }
    .header-message {max-width:225px;
    text-align:left;}
.header__wrapper #coin-container {

    right:10px
    }
}

/* - end - */

Save the file.


Placing the converter in the Footer

If you're placing the converter in your footer, then skip the above steps and simply add to this file:

Open your sections/footer.liquid file. Click the following link if Pipeline is your published theme:

https://myshopify.com/admin/themes/current?key=sections/footer.liquid&line=79

Around line 79, add a blank line just after the {% endfor %} statement looping through the footer links and then add the following code:

<li><div id='coin-container'></div></li>

Save the file.

Still need help? Contact Us Contact Us