Go to the Shopify theme edit code. Head over to the Section folder and click Header.liquid.
<span class="desktop-currency">
{% form 'currency' %}
{{ form | currency_selector }}
{% endform %}
</span>
<li class="mobile-nav__item mobile-currency">
{% form 'currency' %}
{{ form | currency_selector }}
{% endform %}
</li>
That’s the HTML code completed. Now go to the Assets folder and click theme.js scroll down to the very bottom and add the below code.
function currencyFormSubmit(event) {
event.target.form.submit();
}
document.querySelectorAll('.shopify-currency-form select').forEach(function() {
this.addEventListener('change', currencyFormSubmit);
});
Add Code in Theme.css
That’s the Javascript completed, now for the last step. Within the same Asset Folder, click theme.css. Scroll down to the very bottom and add the below code.
.desktop-currency #currency_form select {
padding-top: 7px;
padding-bottom: 7px;
padding-left: 5px;
padding-right: 5px;
font-size: 12px;
margin: 3px 5px 0 0;
background: transparent;
}
.desktop-currency #currency_form select option {
font-weight: 400;
}
@media only screen and (max-width: 749px) {
.desktop-currency #currency_form select {
display: none;
}
.mobile-currency #currency_form {
padding: 10px 0;
text-align: center;
}
}
Congrats! You now have a working currency converter in your store’s header and mobile navigation!
No comments: