How do I align currency drop down in collection only?

Highlighted
Explorer
63 0 3

Using Debut. I hid the currency converter that was in my header but I still want it in a different area. I want to move it directly below the header and right-aligned on collection pages only. In collection.liquid, I tried:

<div class="page-width"><div style="text-align: right;">

Problem is, its too far right-aligned on desktop that its basically almost cut off, and you can't see it at all on mobile. I'd like it right aligned but aligned with where it was in the header...so it isn't going off the screen. Here's my code that I took from header and placed on collection.liquid:

 

<div class="page-width"><div style="text-align: right;">
{% if shop.enabled_currencies.size > 1 %} {% form 'currency', class: "currency-selector small--hide" %} <label for="CurrencySelector" class="visually-hidden">{{ 'general.currency.dropdown_label' | t }}</label> <div class="currency-selector__input-wrapper select-group"> <select name="currency" id="CurrencySelector" class="currency-selector__dropdown" aria-describedby="a11y-refresh-page-message a11y-selection-message" data-currency-selector> {% for currency in shop.enabled_currencies %} <option value="{{currency.iso_code}}"{% if currency == cart.currency %} selected="true"{% endif %}>{{currency.iso_code}}</option> {% endfor %} </select> {% include 'icon-chevron-down' %} </div> {% endform %} {% endif %}
</div></div>

 

0 Likes
New Member
1 0 0

I'm not sure if this will solve your issue or not but I was doing something similar and came up with the following which seems to work, it will also show up on both desktop and mobile. NB: if you don't want the currency symbol just delete   {{currency.symbol}}    from the code.

 

{% if shop.enabled_currencies.size > 1 %}
{% form 'currency' %}
<label for="CurrencySelector" class="visually-hidden">{{ 'general.currency.dropdown_label' | t }}</label>
<select name="currency" id="CurrencySelector" aria-describedby="a11y-refresh-page-message a11y-selection-message" data-currency-selector>
{% for currency in shop.enabled_currencies %}
<option value="{{currency.iso_code}}"{% if currency == cart.currency %} selected="true"{% endif %}>{{currency.iso_code}} {{currency.symbol}}</option>
{% endfor %}
</select>
{% endform %}
{% endif %}
0 Likes