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?
Topic summary
A Shopify store owner using the Wonder theme needs to reposition social media icons in their footer—specifically moving them to the top-left and left-aligning them, above the footer menu items.
Current Situation:
- An image shows the icons are currently positioned differently than desired
- The user has shared their footer code seeking a modified version
- Theme settings don’t provide the needed customization options
Responses Received:
- One user requested the store URL to provide specific assistance
- Another suggested checking theme settings for social media options (which the original poster confirmed aren’t available)
- The user is specifically seeking step-by-step code modifications to achieve the desired layout
Status: The issue remains unresolved, with the user awaiting code-based solutions since theme settings don’t offer the required flexibility.
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?