Currency Converter: How to add Shopify's code
This tutorial will help you add Shopify's Currency converter to Pipeline. Here is Shopify's original article as a reference point:
https://help.shopify.com/en/themes/customization/currencies#example-currency-selector
Note: This tutorial will cover the code needed to add to your theme. The CSS sample we've included may require tweaking for your version of Pipeline. You are expected to have some CSS knowledge and the ability to modify padding and alignment in order to fit the currency selector in your header. There will be a new version of Pipeline which includes the currency converter built-in. This tutorial is oriented towards people that are comfortable with making code changes and CSS modifications.
Example result:
When changed, the cart total is also reflected:
Mobile navigation:
How to:
Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.
Make a duplicate before any code changes:
Next, open the Code Editor:
From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:
Example if you're working from your main live/published theme:
- 1
-
Open nav-contents.liquid
From the Snippets folder, open nav-contents.liquid:
In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:
nav-item
(1) Find the correct line.
(2) Add some blank new lines after the endfor line
Example:
We will be adding some code to the new blank lines - Verify you've added them after the correct endfor line and fore the next li list item:
Add the following code in that area:
Example after adding the code:
Save the file:
- 2
-
Add Javascript to theme.js
The next step is to add the following Javascript to the bottom of your theme.js file:
Use this link to learn where exactly to add this code snippet:
Where to add your Javascript code
Example:
- 3
-
Add CSS to align in your navigation
Use the following CSS sample to align the currency convertor in your navigation. If you're using a transparent navigation, you'll need to tweak the CSS colors to work with your background image and navigation background.
Example and notes:
(1) Position of currency select box. Adjust left margin size.
(2) Use a valid hex color code. Our example is a light navigation font color when using a transparent header (dark blue image behind transparent header).
(3) Use a valid hex color code. Our example is a dark font color in the mobile navigation over a white mobile navigation background.
hex color code references:
http://www.colorhexa.com/web-safe-colors
https://picular.co/
Save the file:
Where do I add the CSS code?
Use this link to learn where exactly to add this code snippet: