This is a step-by-step guide on how to create a custom Shopify translator & currency converter menu position. Once you have Translate & Currency Converter Pro installed and you want a custom menu position different from the 8 default option available. you can have it positioned anywhere using customized CSS code.
You can watch the video or follow the step by step instructions below how to make the changes for translation and currency converter to your Shopify store or follow the instructions below.
STEP 1 – Download Translate & Currency Converter Pro
STEP 2 – Choose Where You Want To Place Cutsom Menu
Choosing the right place for your customers is probably the most important part of this tutorial. In this example, I’ll show you where I want to place it and how to get the coding done.
Let’s say I want it placed in the area highlighted in the image below wherein I’m using a Debut theme:
The next thing you want to do is to get the code on that area by pressing ‘F12’ if you’re using google chrome to inspect the page. You can also do this by right-clicking on the page and click on inspect.
Once you have successfully opened the inspect mode in your browser you should see something similar to the image below:
The next step is to press Ctrl+Shift+C to select the element you want to inspect. Alternatively, you can also click the button on the square with an arrow pointer on it which will be highlighted in the next image.
Once you have the inspect element active, hover your mouse to the place where you want it and it will tell you a bunch of code like the image below:
Take note of the code that you’ll get. In my case it’s icon-wrapper.
STEP 3 – Menu Option
Since you already have the Shopify Currency Converter & Translation app ( installed, go to settings and scroll down and in the ‘Menu Option’. Make sure to select the ‘Custom’ under ‘Position’ and copy the code specified under the custom option.
custom menu on shopify store
STEP 4 – Create A Backup
The next following step might overwhelm you as you will start to see a lot of things that don’t make sense. Don’t worry, just follow this instruction and you’ll be fine.
One best practice before proceeding to this step is to make a backup of your existing theme to make sure that you can reverse any unwanted changes.
Making a backup of your existing theme is really simple you just need to duplicate your theme by clicking on ‘Themes’ then click on ‘Actions’ then select ‘Duplicate’ see image below for reference:
Once you have successfully duplicated your theme you can also rename it to your liking by clicking the dropdown.
Step 5 – Edit Code
Click on the action button next to the renamed duplicate of your theme, then click on edit code.
Once you’re on the edit code page, use the search bar on the top left and look type in ‘Header’. then select ‘Header’ on the left side and it should bring up a bunch of text.
Click somewhere in the page the just opened then press ‘Ctril+f’ to open a search bar and search for the code that we found earlier which in my case is “site-header__icons-wrapper”. Paste the code that we copied from the ‘Menu option’ after the code then hit save.
Step 6 – Preview and Live
You have just successfully customized your menu placement. If you want to see a preview of your work, go back to ‘Themes’ then click on Actions, and hit Preview. Once you are satisfied with the changes then you can hit Publish to set it live to your store.
You can also make some other changes to your multicurrency and multilanguage menu selectors. Some of these changes include changing sizes, font styles or menu placement. This will help create a better experience for customers and make your menu look like it fits naturally on your Shopify store.
If you need any help, always feel free to reach out to us and we would be more than happy to help you.
Some of the other benefits or a translator & currency converter app can be seen on the Shopify App Store, just click the button below to be taken there.