Changing order of payment icons (Superstore theme by Pixelunion)

Solved
highpowered
Tourist
5 0 2

Hi guys,

Can anyone tell me how to change the order of the payment icons in the footer?
My shop uses the 'Superstore' theme by Pixelunion.

Below I've attached the footer's code sections which mention payment methods.

My preferred order would be like this:

  • TWINT
  • PayPal
  • Visa
  • Mastercard
  • AMEX
  • ApplePay

Shop URL: highpowered.ch

Thanks a lot!

Best regards
Tobias

    {%- if section.settings.payment_icons or currency_selector or locale_selector -%}
      <div class="site-footer-information__payment-icons-cross-border">
        {% comment %}cross-border{% endcomment %}
        {% form 'localization' %}
          {% if locale_selector and form.available_locales.size > 1 %}
            {% comment %}multi-language{% endcomment %}
            <div class="selectors-form__item">
              <div class="disclosure" data-disclosure-locale>
                <button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="lang-list" aria-describedby="lang-heading" data-disclosure-toggle>
                  {{ form.current_locale.endonym_name }}
                </button>
                <ul id="lang-list" class="disclosure-list" data-disclosure-list>
                  {% for locale in form.available_locales %}
                    <li>
                      <a class="disclosure-list__item {% if locale.iso_code == form.current_locale.iso_code %}disclosure-list__item--current{% endif %}" href="#" lang="{{ locale.iso_code }}" {% if locale.iso_code == form.current_locale.iso_code %}aria-current="true"{% endif %} data-value="{{ locale.iso_code }}" data-disclosure-option>
                        <span class="disclosure-list__option">{{ locale.endonym_name }}</span>
                      </a>
                    </li>
                  {%- endfor -%}
                </ul>
                <input type="hidden" name="locale_code" id="LocaleSelector" value="{{ form.current_locale.iso_code }}" data-disclosure-input/>
              </div>
            </div>
          {% endif %}
        
          {% if currency_selector and form.available_currencies.size > 1 %}
            {% comment %}multi-currency{% endcomment %}
            <div class="selectors-form__item">
              <div class="disclosure" data-disclosure-currency>
                <button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="currency-list" aria-describedby="currency-heading" data-disclosure-toggle>
                  {{ form.current_currency.iso_code }} {%- if form.current_currency.symbol -%}{{ form.current_currency.symbol }}{%- endif -%}
                </button>
                <ul id="currency-list" class="disclosure-list" data-disclosure-list>
                  {% for currency in form.available_currencies %}
                    <li>
                      <a class="disclosure-list__item {% if currency.iso_code == form.current_currency.iso_code %}disclosure-list__item--current{% endif %}" href="#" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %} data-value="{{ currency.iso_code }}" data-disclosure-option>
                        <span class="disclosure-list__option">{{ currency.iso_code }} {%- if currency.symbol -%}{{ currency.symbol }}{%- endif -%}</span>
                      </a>
                    </li>
                  {%- endfor -%}
                </ul>
                <input type="hidden" name="currency_code" id="CurrencySelector" value="{{ form.current_currency.iso_code }}" data-disclosure-input/>
              </div>
            </div>
          {% endif %}
        {% endform %}

        {% if section.settings.payment_icons and shop.enabled_payment_types.size > 0 %}
          <ul class="payment-icons">
            {% for type in shop.enabled_payment_types %}
              <li class="payment-icons-item">
                {{ type | payment_type_svg_tag }}
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </div>
    {% endif %}
  </div>
</footer>

{% schema %}
{
  "name": "Footer",
  "max_blocks": 5,
  "settings": [
    {
      "type": "select",
      "id": "mobile_alignment",
      "label": "Mobile alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "centered",
          "label": "Centered"
        }
      ],
      "default": "left"
    },
    {
      "type": "header",
      "content": "Payment icons"
    },
    {
      "type": "checkbox",
      "id": "payment_icons",
      "label": "Show payment icons",
      "default": false
    },
    {
      "type": "header",
      "content": "Language Selector",
      "info": "To add a language, go to your [language settings.](/admin/settings/languages)"
    },
    {
      "type": "checkbox",
      "id": "show_locale_selector",
      "label": "Show language selector",
      "default": true
    },
    {
      "type": "header",
      "content": "Currency Selector",
      "info": "To add a currency, go to your [payment settings.](/admin/settings/payments)"
    },

 

0 Likes
Natztech
Shopify Partner
596 152 366

This is an accepted solution.

for this changes i want to customize theme please add me as staff member so i can do it 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
highpowered
Tourist
5 0 2

Of course, I've just done so, thanks!

0 Likes
highpowered
Tourist
5 0 2

You're the best, thanks so much!
Could you maybe let me know where you've changed it?
In case I later want to change the order, and for other people who might have the same question.

0 Likes