Dawn Theme add currency converter in the mobile menu drawer

Store Design

Topic summary

A user seeks to add a currency converter to the mobile menu drawer in the Dawn theme and adjust social media icon positioning. They specifically want the converter on the left side of the bottom drawer, as shown in their reference images.

Solution Provided:
A detailed code implementation was shared involving:

  • Editing header.liquid in the theme code
  • Locating the menu-drawer__utility-links section
  • Adding a localization form with country/currency selector code
  • Styling adjustments via base.css for proper formatting

Follow-up Question:
Another user asked about adding multiple currency types with the ability to select which price gets converted, indicating interest in more advanced currency conversion functionality.

Status: The basic implementation appears resolved, but the advanced multi-currency question remains unanswered.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hi there ! Can I ask how can I add the currency converter on the left side in the bottom menu drawer on the mobile version please ? also move the social media icons a little to the right? As shown in the second image exactly if possible Thanks !

6634BE6C-5BA8-449B-ACCA-1FCDD9309E43.jpeg
6634BE6C-5BA8-449B-ACCA-1FCDD9309E43.jpeg1164Ă—2007 81.3 KB

80F3CF49-BC9B-47B7-95CD-1A258EFDD391.jpeg
80F3CF49-BC9B-47B7-95CD-1A258EFDD391.jpeg929Ă—735 7.11 KB

1 Like
2

@lslelegance ,

I can do this task for you, it needs some code changes.
Thank You!

3

I just need the code can do it my self thanks !

1 Like
4

Please follow the steps:

step 1 : Online store-> themes-> Actions-> Edit code-> sections-> header.liquid

Step 2 : ctrl + f and find text " menu-drawer__utility-links "

Step 3 : Paste below code under this “menu-drawer__utility-links” text

{%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="FooterCountryLabelNoScript">{{ 'localization.country_label' | t }}</h2>
<select class="localization-selector link" name="country_code" aria-labelledby="FooterCountryLabelNoScript">
{%- for country in localization.available_countries -%}
<option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
{{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
{%- endform -%}

Step 4 : Paste this code in Online store-> themes-> Actions-> Edit code-> Assets-> base.css

#menu-drawer .localization-selector.link{ 
 padding-bottom: 1.5rem; padding-top: 1.5rem; outline: none ; border: none; box-shadow: none;}
}
#menu-drawer .menu-drawer .list-social{justify-content: center !important; margin:0 !important;} 

Output : https://prnt.sc/HXJIEeaCmswB

5

Hey :waving_hand:

Your answer helped, but if I need to add several types of currency, and to select one price to be converted.

Can you help me?)

Thanks in advance