Hello,
I would like to move the social icons to below the contact email and move the section “Subscribe to our email” to the center of the footer. Could anyone guide me how to do it? Thank you in advance.
2 Likes
Hello @anusa ,
Hope you are doing well.
By doing custom coding to your theme file and adding some CSS you can change the position of social icons and signup form.
If you are not good at coding then I can help you with it. For that, I need access to your store to perform the solution. Please private message me your store URL so that I can send you the collaborator request and can solve your query.
Thank you!
@anusa Hi Anusa
here is solution. here our working store same as per your design layout
https://avidbrio.myshopify.com/
Make sure you do the theme duplication with backup then work on custom code solution if dont know the code the please hire experts
Note : may be your text content loss if any custom work on footer section
- From your Shopify admin, go to Online Store > Themes.
- Click Actions > Edit code.
replace the code into the file
theme/section/footer.liquid
{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
{% javascript %}
class LocalizationForm extends HTMLElement {
constructor() {
super();
this.elements = {
input: this.querySelector('input[name="locale_code"], input[name="country_code"]'),
button: this.querySelector('button'),
panel: this.querySelector('ul'),
};
this.elements.button.addEventListener('click', this.openSelector.bind(this));
this.elements.button.addEventListener('focusout', this.closeSelector.bind(this));
this.addEventListener('keyup', this.onContainerKeyUp.bind(this));
this.querySelectorAll('a').forEach(item => item.addEventListener('click', this.onItemClick.bind(this)));
}
hidePanel() {
this.elements.button.setAttribute('aria-expanded', 'false');
this.elements.panel.setAttribute('hidden', true);
}
onContainerKeyUp(event) {
if (event.code.toUpperCase() !== 'ESCAPE') return;
this.hidePanel();
this.elements.button.focus();
}
onItemClick(event) {
event.preventDefault();
const form = this.querySelector('form');
this.elements.input.value = event.currentTarget.dataset.value;
if (form) form.submit();
}
openSelector() {
this.elements.button.focus();
this.elements.panel.toggleAttribute('hidden');
this.elements.button.setAttribute('aria-expanded', (this.elements.button.getAttribute('aria-expanded') === 'false').toString());
}
closeSelector(event) {
const shouldClose = event.relatedTarget && event.relatedTarget.nodeName === 'BUTTON';
if (event.relatedTarget === null || shouldClose) {
this.hidePanel();
}
}
}
customElements.define('localization-form', LocalizationForm);
{% endjavascript %}
{% schema %}
{
"name": "t:sections.footer.name",
"blocks": [
{
"type": "link_list",
"name": "t:sections.footer.blocks.link_list.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Quick links",
"label": "t:sections.footer.blocks.link_list.settings.heading.label",
"info": "t:sections.footer.blocks.link_list.settings.heading.info"
},
{
"type": "link_list",
"id": "menu",
"default": "footer",
"label": "t:sections.footer.blocks.link_list.settings.menu.label",
"info": "t:sections.footer.blocks.link_list.settings.menu.info"
}
]
},
{
"type": "text",
"name": "t:sections.footer.blocks.text.name",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Heading",
"label": "t:sections.footer.blocks.text.settings.heading.label"
},
{
"type": "richtext",
"id": "subtext",
"default": "
Share store details, promotions, or brand content with your customers.
",
"label": "t:sections.footer.blocks.text.settings.subtext.label"
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_width",
"min": 50,
"max": 200,
"step": 5,
"unit": "px",
"label": "Image width",
"default": 100
},
{
"type": "select",
"id": "alignment",
"label": "Image alignment on large screen",
"options": [
{
"value": "",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
}
]
}
],
"settings": [
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.footer.settings.color_scheme.options__1.label"
},
{
"value": "accent-2",
"label": "t:sections.footer.settings.color_scheme.options__2.label"
},
{
"value": "background-1",
"label": "t:sections.footer.settings.color_scheme.options__3.label"
},
{
"value": "background-2",
"label": "t:sections.footer.settings.color_scheme.options__4.label"
},
{
"value": "inverse",
"label": "t:sections.footer.settings.color_scheme.options__5.label"
}
],
"default": "background-1",
"label": "t:sections.footer.settings.color_scheme.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__1.content",
"info": "t:sections.footer.settings.header__1.info"
},
{
"type": "checkbox",
"id": "newsletter_enable",
"default": true,
"label": "t:sections.footer.settings.newsletter_enable.label"
},
{
"type": "text",
"id": "newsletter_heading",
"default": "Subscribe to our emails",
"label": "t:sections.footer.settings.newsletter_heading.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__2.content",
"info": "t:sections.footer.settings.header__2.info"
},
{
"type": "checkbox",
"id": "show_social",
"default": false,
"label": "t:sections.footer.settings.show_social.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__3.content",
"info": "t:sections.footer.settings.header__4.info"
},
{
"type": "checkbox",
"id": "enable_country_selector",
"default": true,
"label": "t:sections.footer.settings.enable_country_selector.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__5.content",
"info": "t:sections.footer.settings.header__6.info"
},
{
"type": "checkbox",
"id": "enable_language_selector",
"default": true,
"label": "t:sections.footer.settings.enable_language_selector.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__7.content"
},
{
"type": "checkbox",
"id": "payment_enable",
"default": true,
"label": "t:sections.footer.settings.payment_enable.label"
}
],
"default": {
"blocks": [
{
"type": "link_list"
},
{
"type": "text"
}
]
}
}
{% endschema %}
Thank you for the reply. But could you just give me the part that I need to change/add instead of giving me the whole content of file?
1 Like
this is simple way to search the code and move one location to another location.
here code line you need to move
{%- if section.settings.show_social -%}
this code for the social icon display.
{%- if section.settings.show_social -%}
{%- if settings.social_twitter_link != blank -%}
- {%- render 'icon-twitter' -%}
{{ 'general.social.links.twitter' | t }}
{%- endif -%}
{%- if settings.social_facebook_link != blank -%}
- {%- render 'icon-facebook' -%}
{{ 'general.social.links.facebook' | t }}
{%- endif -%}
{%- if settings.social_pinterest_link != blank -%}
- {%- render 'icon-pinterest' -%}
{{ 'general.social.links.pinterest' | t }}
{%- endif -%}
{%- if settings.social_instagram_link != blank -%}
- {%- render 'icon-instagram' -%}
{{ 'general.social.links.instagram' | t }}
{%- endif -%}
{%- if settings.social_tiktok_link != blank -%}
- {%- render 'icon-tiktok' -%}
{{ 'general.social.links.tiktok' | t }}
{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}
- {%- render 'icon-tumblr' -%}
{{ 'general.social.links.tumblr' | t }}
{%- endif -%}
{%- if settings.social_snapchat_link != blank -%}
- {%- render 'icon-snapchat' -%}
{{ 'general.social.links.snapchat' | t }}
{%- endif -%}
{%- if settings.social_youtube_link != blank -%}
- {%- render 'icon-youtube' -%}
{{ 'general.social.links.youtube' | t }}
{%- endif -%}
{%- if settings.social_vimeo_link != blank -%}
- {%- render 'icon-vimeo' -%}
{{ 'general.social.links.vimeo' | t }}
{%- endif -%}
{%- endif -%}
cut this code with if and endif condition
Search the line
{{ block.settings.subtext }}
this section block show the text blocks
past the social media code below the line. see the code pasted in section/footer.liquid
@AvidBrio thank you for the solution. It works.
But is it possible to align the social icon to the left side instead of the right side?
@anusa yes it was possible.
My answer solved your problems make it accept and like the solution.
For social icon left align you need to make css change justify-content: flex-start; to justify-content: flex-end;
.list-social {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}