Moving Social Media Icons to right hand side of footer

Highlighted
New Member
3 0 0

Hoping someone can help me move the social media icons to sit above the copyright on the right hand side of footer.

Here is my 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 currency_selector = false -%}
{%- if section.settings.show_currency_selector and shop.enabled_currencies.size > 1 -%}
{%- assign currency_selector = true -%}
{%- endif -%}

{%- assign locale_selector = false -%}
{%- if section.settings.show_locale_selector and shop.enabled_locales.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 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>
{{ form.current_locale.endonym_name }}
</button>
<ul id="lang-list" class="disclosure-list" data-disclosure-list>
{%- for locale in form.available_locales -%}
<li class="disclosure-list__item {% if locale.iso_code == form.current_locale.iso_code %}disclosure-list__item--current{% endif %}">
<a class="disclosure-list__option" 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>
{{ locale.endonym_name }}
</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 -%}
<div class="selectors-form__item">
<h2 class="visually-hidden" id="currency-heading">
{{ 'general.currency.dropdown_label' | t }}
</h2>

<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 class="disclosure-list__item {% if currency.iso_code == form.current_currency.iso_code %}disclosure-list__item--current{% endif %}">
<a class="disclosure-list__option" href="#" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %} data-value="{{ currency.iso_code }}" data-disclosure-option>
{{ currency.iso_code }} {%- if currency.symbol -%}{{ currency.symbol }}{%- endif -%}
</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 -%}

<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",
"hi": "फुटर",
"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",
"hi": "भुगतान की विधियां",
"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",
"hi": "भुगतान आइकन दिखाएं",
"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 jazyka",
"da": "Sprogvælger",
"de": "Sprachauswahl",
"en": "Language Selector",
"es": "Selector de idioma",
"fi": "Kielenvalitsin",
"fr": "Sélecteur de langue",
"hi": "भाषा चयनकर्ता",
"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).",
"hi": "भाषा जोड़ने के लिए, अपने [language settings.](/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",
"hi": "मात्रा चयनकर्ता दिखाएं",
"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": "Výběr měny",
"da": "Valutavælger",
"de": "Währungsauswahl",
"en": "Currency Selector",
"es": "Selector de moneda",
"fi": "Valuutanvalitsin",
"fr": "Sélecteur de devise",
"hi": "मुद्रा चयनकर्ता",
"it": "Selettore di valuta",
"ja": "通貨セレクター",
"ko": "통화 선택기",
"nb": "Valutavelger",
"nl": "Valutakiezer",
"pl": "Selektor walut",
"pt-BR": "Seletor de moeda",
"pt-PT": "Seletor de Moeda",
"sv": "Valutaväljare",
"th": "เครื่องมือเลือกสกุลเงิน",
"tr": "Para Birimi Seçici",
"vi": "Hộp chọn đơn vị tiền tệ",
"zh-CN": "货币选择器",
"zh-TW": "幣別選擇器"
},
"info": {
"cs": "Pokud chcete přidat měnu, přejděte na [nastavení měny.](/admin/settings/payments)",
"da": "Du kan tilføje en valuta ved at gå til dine [valutaindstillinger.](/admin/settings/payments)",
"de": "Geh zu deinen [Währungseinstellungen](/admin/settings/payments), um eine Währung hinzuzufügen.",
"en": "To add a currency, go to your [currency settings.](/admin/settings/payments)",
"es": "Para agregar una moneda, ve a tu[configuración de moneda](/admin/settings/payments)",
"fi": "Lisää valuutta siirtymällä [valuutta-asetuksiin.](/admin/settings/payments)",
"fr": "Pour ajouter une devise, allez dans vos [paramètres de devise.](/admin/settings/payments).",
"hi": "मुद्रा जोड़ने के लिए, अपने [currency settings.](/admin/settings/payments) पर जाएं",
"it": "Per aggiungere una valuta, vai su [impostazioni valuta.](/admin/settings/payments)",
"ja": "通貨を追加するには、[通貨設定](/admin/settings/payments) に移動します。",
"ko": "통화를 추가하려면 [통화 설정.](/admin/settings/payments)(으)로 이동하십시오.",
"nb": "For å legge til en valuta, går du til [valutainnstillingene.](/admin/settings/payments)",
"nl": "Ga naar je [valuta-instellingen.](/admin/settings/payments) om een valuta toe te voegen.",
"pl": "Aby dodać walutę, przejdź do swoich [ustawień waluty.](/admin/settings/payments)",
"pt-BR": "Para adicionar uma moeda, acesse suas [configurações de moeda. ](/admin/settings/payments)",
"pt-PT": "Para adicionar uma moeda, aceda às suas [definições de moeda.](/admin/settings/payments)",
"sv": "För att lägga till en valuta, gå till [valutainställningar.](/admin/settings/payments)",
"th": "หากต้องการเพิ่มสกุลเงิน ให้ไปที่ [การตั้งค่าภาษา ](/admin/settings/payments) ของคุณ",
"tr": "Para birimi seçmek için [para birimi ayarlarınıza](/admin/settings/payments) gidin.",
"vi": "Để thêm đơn vị tiền tệ, đến phần [cài đặt đơn vị tiền tệ.](/admin/settings/payments)",
"zh-CN": "若要添加货币,请转到 [货币设置。](/admin/settings/payments)",
"zh-TW": "若要新增幣別,請前往 [幣別設定。](/admin/settings/payments)"
}
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": {
"cs": "Zobrazit selektor měny",
"da": "Vis valutavælger",
"de": "Währungsauswahl anzeigen",
"en": "Show currency selector",
"es": "Mostrar el selector de moneda",
"fi": "Näytä valuutanvalitsin",
"fr": "Afficher le sélecteur de devise",
"hi": "मुद्रा चयनकर्ता दिखाएं",
"it": "Mostra selettore valuta",
"ja": "通貨セレクターを表示する",
"ko": "통화 선택기 표시",
"nb": "Vis valutavelger",
"nl": "Valutakiezer weergeven",
"pl": "Pokaż selektor walut",
"pt-BR": "Exibir seletor de moeda",
"pt-PT": "Mostrar seletor de moeda",
"sv": "Visa valutaväljare",
"th": "แสดงเครื่องมือเลือกสกุลเงิน",
"tr": "Para birimi seçici göster",
"vi": "Hiển thị hộp chọn đơn vị tiền tệ",
"zh-CN": "货币选择器显示",
"zh-TW": "顯示幣別選擇器"
},
"default": true
},
{
"type": "header",
"content": {
"cs": "Nabídka",
"da": "Menu",
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fi": "Valikko",
"fr": "Menu",
"hi": "मेनू",
"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",
"hi": "फुटर मेनू",
"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 %}

0 Likes
Highlighted
Shopify Partner
686 104 204

Please provide website url and if your store is password protected then also provide password

If this solution works, then please accept it as solution and like.

If you want any Shopify theme customization, making Website, App development in iOS and Android, Please feel free to contact me.

Email: parambabla.soft@gmail.com
0 Likes
Highlighted
New Member
3 0 0
*sayers-home.myshopify.com *

*and password is *brayng
0 Likes
Highlighted
Shopify Partner
686 104 204

Where are the social media icons in the footer?

paramSoft_0-1603516753825.png

 

If this solution works, then please accept it as solution and like.

If you want any Shopify theme customization, making Website, App development in iOS and Android, Please feel free to contact me.

Email: parambabla.soft@gmail.com
0 Likes