I need my social media icons to be above the footer menu items on the left and be aligned to the left as well. I’m using the wonder theme. Any suggestions on how I can fix that using the code? step by step?
2 Likes
Hi @visitor1231
Please feel free to share your store URL here, or you can PM me if you prefer not to share it publicly. Thanks!
You will navigate to the theme setting you will find social media options you will be able to move it there
I’m having a hard time making that change. This is my code, can you give me an updated code with the social media icons in the right place with the right alignment?
.footer-section { --section-gap-top: 0px; /* Adjust this if needed */ --section-gap-bottom: 0px; /* Adjust this if needed */ --big-logo-width: 100%; /* Adjust this if needed */ }
{% for block in section.blocks %}
{% case block.type %}
{% when '@app' %}
{% render block %}
{% when 'custom_liquid' %}
{{ block.settings.custom_liquid }}
{% when 'menu' %}
{% if block.settings.heading_links != empty %}
{% else %}
{% endif %}
{% when 'text' %}
{% if block.settings.heading_text != blank %}
{% endif %}
{% endform %}
{% endcase %}
{% endfor %}
{{ block.settings.heading_links }}
{% render 'icons', id: 'plus' %}
-
{% for link in block.settings.links.links %}
- {{ link.title }} {% endfor %}
-
{% for link in block.settings.links.links %}
- {{ link.title }} {% endfor %}
{{ block.settings.heading_text }}
{% endif %}
{{ block.settings.text }}
{% when 'image' %}
{% if block.settings.desktop_image != blank %}
{% assign alt_text = block.settings.desktop_image.alt | escape %}
{{ block.settings.desktop_image | image_url: width: 750 | image_tag: loading: 'lazy', sizes: '(min-width: 750px) 750px, 320px', widths: '750, 1500, 3000', alt: alt_text, class: 'wt-footer__image' }}
{% else %}
{{ 'collection-apparel-2' | placeholder_svg_tag: 'wt-footer__image' }}
{% endif %}
{% when 'newsletter' %}
{{ block.settings.heading_newsletter }}
{{ block.settings.text_newsletter }}
{% form ‘customer’, class: ‘newsletter-form wt-newsletter__form wt-footer__additional__form’ %}
{{ 'newsletter.button_label' | t }}
{% if form.errors %}
{% for error in form.errors %}
{% render ‘icon-error’ %}
{% if error == ‘form’ %}
{{ form.errors.messages[error] }}
{% else %}
{{ form.errors.translated_fields[error] }} - {{ form.errors.messages[error] }}
{% endif %}
{% endfor %}
{% endif %}
{% if form.posted_successfully? %}
{{ 'newsletter.success' | t }}
{% if section.settings['show-country_region_selector'] or section.settings['show-social-media-icons'] %}
{% endif %}
{% if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop %}
{% if section.settings['show-country_region_selector'] and localization.available_countries.size > 1 %}
{{ 'localization.update_language' | t }}
{% endform %}
{% form 'localization', id: 'FooterLanguageForm', class: 'localization-form' %}
{% endif %}
{% form 'localization', id: 'FooterCountryForm', class: 'localization-form' %}
{% render 'country-localization' %}
{% endform %}
{% endif %}
{% if section.settings['show-language-selector'] and localization.available_languages.size > 1 %}
{% form 'localization', id: 'FooterLanguageFormNoScript', class: 'localization-form' %}
{{ 'localization.language_label' | t }}
{% render 'icon-caret' %}
{% render 'language-localization', localPosition: 'FooterLanguage' %}
{% endform %}
{% endif %}
{% if section.settings[‘show-social-media-icons’] %}
{% render 'social-links' %}
{% endif %}
{% if section.settings[‘show-payments-icons’] %}
-
{% for type in shop.enabled_payment_types %}
- {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }} {% endfor %}
{{ shop | login_button: action: 'follow' }}
{% endif %}
{% if section.settings[‘show-copyright’] %}
{{ section.settings.text }}
{% endif %}{% if section.settings[‘big-logo’] %}
{% assign big_logo = section.settings['big-logo'] | get_image %}
{% assign alt_text = big_logo.alt | default: big_logo.filename | escape %}
{{
section.settings['big-logo']
| image_url: width: 3840
| image_tag:
loading: 'lazy',
widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: alt_text,
class: 'wt-footer__big-logo-img',
sizes: '100vw'
}}
{% endif %}
I don’t have the option in my store unfortunately. Do you know what code I could use to move them over and move them to the top of my footer?