How to move payment details to a new line in footer using Brooklyn theme

[jakelemon]

Hello

I am wanting to move the payment details to a new line in the middle of the footer. I am not sure how to edit this with codes if you could help me out I would greatly appreciate it!

My store url is https://www.nextlevelsupps.com.au 

Thank you 

[Zworthkey]

@jakelemon 
Do you want to like this?

[KetanKumar]

@jakelemon 

yes please check theme setting its allow 

[ProfitLabs]

Hi @jakelemon 

this is not possible from theme editor , it would require actual code changes in your theme. Please dm me your store myshopify url so that I can send you a collaborator access request.

[Bang_T_ · Accepted solution]

Hi @jakelemon 

have to modify the sections/footer.liquid file

move this block of code to element below

Here is the new code:

<footer class="site-footer small--text-center" role="contentinfo" data-section-id="{{ section.id }}" data-section-type="footer-section">
<div class="wrapper">

<div class="grid-uniform">

{% comment %}
Default to 1 footer column (copyright/powered_by/payment_types)
{% endcomment %}
{% assign num_footer_columns = 1 %}

{% comment %}
Create an extra menu column if link list has more than 5 links
{% endcomment %}
{% if linklists[section.settings.footer_link_list].links.size > 0 %}
{% comment %}
We have a Footer menu that isn't empty, we will need another column
{% endcomment %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% assign extra_footer_linklist_column = false %}
{% assign footer_linklist_count = linklists[section.settings.footer_link_list].links.size %}
{% if footer_linklist_count > 5 %}
{% assign extra_footer_linklist_column = true %}
{% comment %}
We split the links so we'll need another column
{% endcomment %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% endif %}
{% comment %}
If we have an odd amount of links, we need to show 1 more link in 1st column
{% endcomment %}
{% assign extra_link = footer_linklist_count | modulo: 2 %}
{% comment %}
We start with a 2nd column after first column is filled up.
{% endcomment %}
{% assign footer_linklist_split = footer_linklist_count | divided_by: 2 | plus: extra_link | plus: 1 %}
{% endif %}

{% comment %}
Determine whether there are social links
{% endcomment %}
{% assign footer_social_enable = false %}
{% if
settings.social_twitter_link != blank
or settings.social_facebook_link != blank
or settings.social_pinterest_link != blank
or settings.social_google_plus_link != blank
or settings.social_instagram_link != blank
or settings.social_tumblr_link != blank
or settings.social_youtube_link != blank
or settings.social_vimeo_link != blank
or settings.social_fancy_link != blank
or settings.social_snapchat_link != blank
%}
{% assign footer_social_enable = true %}
{% endif %}

{% comment %}
Determine whether to show selectors
{% endcomment %}
{%- assign show_country_selector = section.settings.show_currency_selector -%}
{%- assign country_selector = false -%}
{%- if show_country_selector and localization.available_countries.size > 1 -%}
{%- assign country_selector = true -%}
{%- endif -%}

{%- assign locale_selector = false -%}
{%- if section.settings.show_locale_selector and localization.available_languages.size > 1 -%}
{%- assign locale_selector = true -%}
{%- endif -%}

{% comment %}
Calculate the number of footer columns shown. Default to 1.
{% endcomment %}
{% if footer_social_enable %}
{% assign num_footer_columns = num_footer_columns | plus: 1 %}
{% endif %}

{% case num_footer_columns %}
{% when 0 %}
{% when 1 %}
{% assign footer_column_width = '' %}
{% when 2 %}
{% assign footer_column_width = 'one-half small--one-whole' %}
{% when 3 %}
{% assign footer_column_width = 'one-third small--one-whole' %}
{% when 4 %}
{% assign footer_column_width = 'large--one-quarter medium--one-half' %}
{% endcase %}

{% if linklists[section.settings.footer_link_list].links.size > 0 %}
<div class="grid__item {{ footer_column_width }}">
<ul class="no-bullets site-footer__linklist">
{% for link in linklists[section.settings.footer_link_list].links %}

{% comment %}
Create a second column
{% endcomment %}
{% if extra_footer_linklist_column and forloop.index == footer_linklist_split %}
</ul>
</div>
<div class="grid__item {{ footer_column_width }}">
<ul class="no-bullets site-footer__linklist">
{% endif %}

<li><a href="{{ link.url }}">{{ link.title }}</a></li>

{% endfor %}
</ul>
</div>
{% endif %}

{% if footer_social_enable %}
<div class="grid__item {{ footer_column_width }}">
<ul class="no-bullets social-icons">
{% if settings.social_facebook_link != blank %}
<li>
<a href="{{ settings.social_facebook_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
<span class="icon icon-facebook" aria-hidden="true"></span>
Facebook
</a>
</li>
{% endif %}
{% if settings.social_twitter_link != blank %}
<li>
<a href="{{ settings.social_twitter_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
<span class="icon icon-twitter" aria-hidden="true"></span>
Twitter
</a>
</li>
{% endif %}
{% if settings.social_pinterest_link != blank %}
<li>
<a href="{{ settings.social_pinterest_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
<span class="icon icon-pinterest" aria-hidden="true"></span>
Pinterest
</a>
</li>
{% endif %}
{% if settings.social_instagram_link != blank %}
<li>
<a href="{{ settings.social_instagram_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
<span class="icon icon-instagram" aria-hidden="true"></span>
Instagram
</a>
</li>
{% endif %}
{% if settings.social_snapchat_link != blank %}
<li>
<a href="{{ settings.social_snapchat_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Snapchat' }}">
<span class="icon icon-snapchat" aria-hidden="true"></span>
Snapchat
</a>
</li>
{% endif %}
{% if settings.social_google_plus_link != blank %}
<li>
<a href="{{ settings.social_google_plus_link | escape }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
<span class="icon icon-google_plus" aria-hidden="true"></span>
Google Plus
</a>
</li>
{% endif %}
{% if settings.social_tumblr_link != blank %}
<li>
<a href="{{ settings.social_tumblr_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
<span class="icon icon-tumblr" aria-hidden="true"></span>
Tumblr
</a>
</li>
{% endif %}
{% if settings.social_youtube_link != blank %}
<li>
<a href="{{ settings.social_youtube_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
<span class="icon icon-youtube" aria-hidden="true"></span>
YouTube
</a>
</li>
{% endif %}
{% if settings.social_vimeo_link != blank %}
<li>
<a href="{{ settings.social_vimeo_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
<span class="icon icon-vimeo" aria-hidden="true"></span>
Vimeo
</a>
</li>
{% endif %}
{% if settings.social_fancy_link != blank %}
<li>
<a href="{{ settings.social_fancy_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
<span class="icon icon-fancy" aria-hidden="true"></span>
Fancy
</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}

{%- liquid
assign selectors_form_class = "selectors-form"

if num_footer_columns == 1
assign selectors_form_class = "selectors-form selectors-form--single-column"
endif
-%}

<div class="grid__item {{ footer_column_width }} {% if num_footer_columns == 1 %}text-center{% else %}large--text-right{% endif %}">
{%- form 'localization', class: selectors_form_class -%}
{%- if country_selector -%}
<div class="selectors-form__item">
<h2 class="visually-hidden" id="country-heading">
{{ 'general.country.dropdown_label' | t }}
</h2>
{%- assign current_currency_symbol = localization.country.currency.symbol -%}
{%- assign current_currency_iso_code = localization.country.currency.iso_code -%}
<div class="disclosure" data-disclosure-country>
<button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="country-list" aria-describedby="country-heading" data-disclosure-toggle>
{%- if current_currency_symbol -%}
{{ localization.country.name }} ({{ current_currency_iso_code }} {{ current_currency_symbol }})
{%- else -%}
{{ localization.country.name }} ({{ current_currency_iso_code }})
{%- endif -%}
</button>
<ul id="country-list" class="disclosure-list" data-disclosure-list>
{% for country in localization.available_countries %}
{%- assign currency_symbol = country.currency.symbol -%}
{%- assign currency_iso_code = country.currency.iso_code -%}
<li class="disclosure-list__item {% if country.iso_code == localization.country.iso_code %}disclosure-list__item--current{% endif %}">
<a class="disclosure-list__option" href="#" {% if country.iso_code == localization.country.iso_code %}aria-current="true"{% endif %} data-value="{{ country.iso_code }}" data-disclosure-option>
{%- if currency_symbol -%}
{{ country.name }} ({{ currency_iso_code }} {{ currency_symbol }})
{%- else -%}
{{ country.name }} ({{ currency_iso_code }})
{%- endif -%}
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="country_code" id="CountrySelector" value="{{ localization.country.iso_code }}" data-disclosure-input/>
</div>
</div>
{%- endif -%}

{%- if locale_selector -%}
<div class="selectors-form__item">
<h2 class="visually-hidden" id="lang-heading">
{{ 'general.language.dropdown_label' | t }}
</h2>

<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>
{{ localization.language.endonym_name }}
</button>
<ul id="lang-list" class="disclosure-list" data-disclosure-list>
{%- for language in localization.available_languages -%}
<li class="disclosure-list__item {% if language.iso_code == localization.language.iso_code %}disclosure-list__item--current{% endif %}">
<a class="disclosure-list__option" href="#" lang="{{ language.iso_code }}" {% if language.iso_code == localization.language.iso_code %}aria-current="true"{% endif %} data-value="{{ language.iso_code }}" data-disclosure-option>
{{ language.endonym_name }}
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="locale_code" id="LocaleSelector" value="{{ localization.language.iso_code }}" data-disclosure-input/>
</div>
</div>
{%- endif -%}
{%- endform -%}

</div>
</div>

<div class="grid-uniform">
<div class="grid__item one-whole text-center">
<p class="site-footer__copyright-content">&copy; {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: routes.root_url }}<br>{{ powered_by_link }}</p>

{%- if section.settings.show_payment_icons -%}
{%- unless shop.enabled_payment_types == empty -%}
<span class="visually-hidden">{{ 'general.payment.method' | t }}</span>
<ul class="inline-list payment-icons site-footer__payment-icons">
{%- for type in shop.enabled_payment_types -%}
<li>
{{ type | payment_type_svg_tag: class: 'icon' }}
</li>
{%- endfor -%}
</ul>
{%- endunless -%}
{%- endif -%}
</div>
</div>

</div>
</footer>




{% schema %}
{
"name": {
"cs": "Zápatí",
"da": "Sidefod",
"de": "Fußzeile",
"en": "Footer",
"es": "Pie de página",
"fi": "Alatunniste",
"fr": "Pied de page",
"it": "Footer",
"ja": "フッター",
"ko": "바닥글",
"nb": "Footer",
"nl": "Voettekst",
"pl": "Stopka",
"pt-BR": "Rodapé",
"pt-PT": "Rodapé",
"sv": "Sidfot",
"th": "ส่วนท้าย",
"tr": "Altbilgi",
"vi": "Chân trang",
"zh-CN": "页脚",
"zh-TW": "頁尾"
},
"settings": [
{
"type": "header",
"content": {
"cs": "Platební metody",
"da": "Betalingsmetoder",
"de": "Zahlungsmethoden",
"en": "Payment methods",
"es": "Métodos de pago",
"fi": "Maksutavat",
"fr": "Moyens de paiement",
"it": "Metodi di pagamento",
"ja": "決済方法",
"ko": "결제 방법",
"nb": "Betalingsmetoder",
"nl": "Betaalmethoden",
"pl": "Metody płatności",
"pt-BR": "Formas de pagamento",
"pt-PT": "Métodos de Pagamento",
"sv": "Betalningsmetoder",
"th": "วิธีการชำระเงิน",
"tr": "Ödeme yöntemleri",
"vi": "Phương thức thanh toán",
"zh-CN": "支付方式",
"zh-TW": "付款方式"
}
},
{
"type": "checkbox",
"id": "show_payment_icons",
"label": {
"cs": "Zobrazit ikony plateb",
"da": "Vis betalingsikoner",
"de": "Zahlungssymbole anzeigen",
"en": "Show payment icons",
"es": "Mostrar iconos de pago",
"fi": "Näytä maksukuvakkeet",
"fr": "Afficher les icônes de paiement",
"it": "Mostra le icone di pagamento",
"ja": "支払いアイコンを表示する",
"ko": "결제 아이콘 표시",
"nb": "Vis betalingsikoner",
"nl": "Betalingspictogrammen weergeven",
"pl": "Pokaż ikony płatności",
"pt-BR": "Exibir ícones de pagamento",
"pt-PT": "Mostrar ícones de pagamento",
"sv": "Visa betalningsikoner",
"th": "แสดงไอคอนการชำระเงิน",
"tr": "Ödeme simgelerini göster",
"vi": "Hiển thị biểu tượng thanh toán",
"zh-CN": "显示付款图标",
"zh-TW": "顯示付款圖示"
},
"default": true
},
{
"type": "header",
"content": {
"cs": "Selektor země/oblasti",
"da": "Land/område-vælger",
"de": "Auswahl für Land/Region",
"en": "Country/region Selector",
"es": "Selector de país/región",
"fi": "Maa-/aluevalitsin",
"fr": "Sélecteur de pays/région",
"it": "Selettore paese/area geografica",
"ja": "国/地域セレクター",
"ko": "국가/지역 선택기",
"nb": "Land-/regionvelger",
"nl": "Kiezer voor land/regio",
"pl": "Selektor kraju/regionu",
"pt-BR": "Seletor de país/região",
"pt-PT": "Seletor de país/região",
"sv": "Land/region-väljare",
"th": "ตัวเลือกประเทศ/ภูมิภาค",
"tr": "Ülke/Bölge Seçici",
"vi": "Hộp chọn quốc gia/vùng",
"zh-CN": "国家/地区选择器",
"zh-TW": "國家/地區選擇器"
},
"info": {
"cs": "Pokud chcete přidat zemi nebo oblast, přejděte na [nastavení plateb.](/admin/settings/payments)",
"da": "For at tilføje et land/område skal du gå til dine [betalingsindstillinger.](/admin/settings/payments)",
"de": "Gehe zu deinen [Zahlungseinstellungen](/admin/settings/payments), um ein Land/eine Region hinzuzufügen.",
"en": "To add a country/region, go to your [payment settings.](/admin/settings/payments)",
"es": "Para agregar un país/región, ve a tu [configuración de pago.](/admin/settings/payments)",
"fi": "Lisää maa/alue siirtymällä omiin [maksuasetuksiisi.](/admin/settings/payments)",
"fr": "Pour ajouter un pays/une région, allez dans vos [paramètres de paiement.](/admin/settings/payments)",
"it": "Per aggiungere un paese/area geografica, vai a [impostazioni pagamento.](/admin/settings/payments)",
"ja": "国/地域を追加するには、[決済設定](/admin/settings/payments) に移動します。",
"ko": "국가/지역을 추가하려면 [결제 설정](/admin/settings/payments)(으)로 이동하십시오.",
"nb": "For å legge til et land/region må du gå til [betalingsinnstillingene.](/admin/settings/payments)",
"nl": "Ga naar je [betaalinstellingen.](/admin/settings/payments) om een land/regio toe te voegen.",
"pl": "Aby dodać kraj/region, przejdź do swoich [ustawień płatności.](/admin/settings/payments)",
"pt-BR": "Para adicionar um país/região, acesse as [Configurações de pagamento.](/admin/settings/payments)",
"pt-PT": "Para adicionar um país/região, aceda às [definições de pagamento.](/admin/settings/payments)",
"sv": "För att lägga till land/region går du till dina [betalningsinställningar.](/admin/settings/payments)",
"th": "หากต้องการเพิ่มประเทศ/ภูมิภาค ให้ไปที่ [การตั้งค่าการชำระเงิน](/admin/settings/payments)",
"tr": "Ülke/bölge eklemek için [ödeme ayarlarınıza](/admin/settings/payments) gidin.",
"vi": "Để thêm quốc gia/vùng, vào [cài đặt thanh toán.](/admin/settings/payments)",
"zh-CN": "若要添加国家/地区，请转到 [支付设置。](/admin/settings/payments)",
"zh-TW": "若要新增國家/地區，請前往 [付款設定。](/admin/settings/payments)"
}
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": {
"cs": "Zobrazit selektor země/oblasti",
"da": "Vis land/område-vælger",
"de": "Auswahl für Land/Region anzeigen",
"en": "Show country/region selector",
"es": "Mostrar selector de país/región",
"fi": "Näytä maa-/aluevalitsin",
"fr": "Afficher le sélecteur de pays/région",
"it": "Mostra selettore paese/area geografica",
"ja": "国/地域セレクターを表示する",
"ko": "국가/지역 선택기 표시",
"nb": "Vis land-/regionvelger",
"nl": "Kiezer voor land/regio weergeven",
"pl": "Pokaż selektor kraju/regionu",
"pt-BR": "Exibir seletor de país/região",
"pt-PT": "Mostrar seletor de país/região",
"sv": "Visa land/region-väljare",
"th": "แสดงตัวเลือกประเทศ/ภูมิภาค",
"tr": "Ülke/bölge seçiciyi göster",
"vi": "Hiển thị hộp chọn quốc gia/vùng",
"zh-CN": "显示国家/地区选择器",
"zh-TW": "顯示國家/地區選擇器"
},
"default": true
},
{
"type": "header",
"content": {
"cs": "Selektor jazyka",
"da": "Sprogvælger",
"de": "Sprachauswahl",
"en": "Language Selector",
"es": "Selector de idioma",
"fi": "Kielenvalitsin",
"fr": "Sélecteur de langue",
"it": "Selettore lingua",
"ja": "言語セレクター",
"ko": "언어 선택기",
"nb": "Språkvelger",
"nl": "Taalkiezer",
"pl": "Selektor języka",
"pt-BR": "Seletor de idiomas",
"pt-PT": "Seletor de Idioma",
"sv": "Språkväljare",
"th": "ตัวเลือกภาษา",
"tr": "Dil Seçici",
"vi": "Hộp chọn ngôn ngữ",
"zh-CN": "语言选择器",
"zh-TW": "語言選擇器"
},
"info": {
"cs": "Pokud chcete přidat jazyk, přejděte na [jazykové nastavení.](/admin/settings/languages)",
"da": "Du kan tilføje et sprog ved at gå til dine [sprogindstillinger.](/admin/settings/languages)",
"de": "Geh zu deinen [Spracheinstellungen](/admin/settings/languages), um eine Sprache hinzuzufügen.",
"en": "To add a language, go to your [language settings.](/admin/settings/languages)",
"es": "Para agregar un idioma, ve a tu[configuración de idioma](/admin/settings/languages)",
"fi": "Lisää kieli siirtymällä [kieliasetuksiin.](/admin/settings/languages)",
"fr": "Pour ajouter une langue, allez dans vos [paramètres de langue.](/admin/settings/languages).",
"it": "Per aggiungere una lingua, vai su [impostazioni della lingua.](/admin/settings/languages)",
"ja": "言語を追加するには、[言語設定](/admin/settings/languages) に移動します。",
"ko": "언어를 추가하려면 [언어 설정.](/admin/settings/languages)(으)로 이동하십시오.",
"nb": "For å legge til et språk, går du til dine [språkinnstillinger.](/admin/settings/languages)",
"nl": "Ga naar je [taalinstellingen.](/admin/settings/languages) om een taal toe te voegen.",
"pl": "Aby dodać język, przejdź do swoich [ustawień języka.](/admin/settings/languages)",
"pt-BR": "Para adicionar um idioma, acesse suas [configurações de idioma. ](/admin/settings/languages)",
"pt-PT": "Para adicionar um idioma, aceda a [definições de idioma.](/admin/settings/languages)",
"sv": "För att lägga till ett språk, gå till dina [språkinställningar.](/admin/settings/languages)",
"th": "หากต้องการเพิ่มภาษา ให้ไปที่ [การตั้งค่าภาษา ](/admin/settings/languages) ของคุณ",
"tr": "Dil eklemek için [dil ayarları](/admin/settings/languages) bölümünüze gidin.",
"vi": "Để thêm ngôn ngữ, mở [cài đặt ngôn ngữ.](/admin/settings/languages)",
"zh-CN": "若要添加语言，请转到您的 [语言设置。](/admin/settings/languages)",
"zh-TW": "若要新增語言，請前往 [語言設定。](/admin/settings/languages)"
}
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": {
"cs": "Zobrazit selektor jazyka",
"da": "Vis sprogvælger",
"de": "Sprachauswahl anzeigen",
"en": "Show language selector",
"es": "Mostrar el selector de idioma",
"fi": "Näytä kielenvalitsin",
"fr": "Afficher le sélecteur de langue",
"it": "Mostra selettore lingua",
"ja": "言語セレクターを表示する",
"ko": "언어 선택기 표시",
"nb": "Vis språkvelger",
"nl": "Taalkiezer weergeven",
"pl": "Pokaż selektor języka",
"pt-BR": "Exibir seletor de idioma",
"pt-PT": "Mostrar seletor de idioma",
"sv": "Visa språkväljare",
"th": "แสดงตัวเลือกภาษา",
"tr": "Dil seçiciyi göster",
"vi": "Hiển thị hộp chọn ngôn ngữ",
"zh-CN": "显示语言选择器",
"zh-TW": "顯示語言選擇器"
},
"default": true
},
{
"type": "header",
"content": {
"cs": "Nabídka",
"da": "Menu",
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fi": "Valikko",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"ko": "메뉴",
"nb": "Meny",
"nl": "Menu",
"pl": "Menu",
"pt-BR": "Menu",
"pt-PT": "Menu",
"sv": "Meny",
"th": "เมนู",
"tr": "Menü",
"vi": "Menu",
"zh-CN": "菜单",
"zh-TW": "選單"
}
},
{
"type": "link_list",
"id": "footer_link_list",
"label": {
"cs": "Nabídka v zápatí",
"da": "Sidefodsmenu",
"de": "Fußzeilenmenü",
"en": "Footer menu",
"es": "Menú inferior",
"fi": "Alatunniste-valikko",
"fr": "Menu pied de page",
"it": "Menu footer",
"ja": "フッターメニュー",
"ko": "바닥글 메뉴",
"nb": "Bunntekstmeny",
"nl": "Voettekstmenu",
"pl": "Menu stopki",
"pt-BR": "Menu de rodapé",
"pt-PT": "Menu do rodapé",
"sv": "Sidfotsmeny",
"th": "เมนูส่วนท้าย",
"tr": "Altbilgi menüsü",
"vi": "Menu chân trang",
"zh-CN": "页脚菜单",
"zh-TW": "頁尾選單"
},
"default": "footer"
}
]
}
{% endschema %}

[hawkscode]

Follow Step : 

1. Edit theme code 

2. click on  footer.liquid file 

3. find payment icon code  by class name : "payment-icons "

4. cut this code  and paste after 'grid-uniform' div end 

more check in screen short 

[jakelemon]

@Bang_T_ Thank you so much! This worked for me 

[Bang_T_]

Np @jakelemon 

Happy to help 😊