Hi, I am looking to assign a social banner to my footer can any one help me with that
my store: youbohovibe
password: hamza
section name: Social-icons
Topic summary
A user wants to add a custom social media icons section to their Dawn theme footer but is having difficulty implementing it.
Current Situation:
- The user created a custom
social-icons.liquidsection with configurable icons (Facebook, Instagram, Twitter, YouTube, etc.) and styling options - They shared both the social icons section code and their
footer.liquidfile for assistance - Social media icons already exist in the header
Proposed Solutions:
Initial approach: BSS-Commerce suggested copying the existing header social media section to the footer using JavaScript in global.js:
const listSocialMedia = document.querySelector('.footer__list-social.list-unstyled.list-social')
const cloneSocialMedia = listSocialMedia.cloneNode(true)
const elementFooter = document.querySelector('.footer-block--newsletter')
elementFooter.appendChild(cloneSocialMedia)
User’s preference: The user clarified they want to use their custom-built social icons section instead of duplicating the header version
Updated solution: BSS-Commerce provided revised JavaScript code to work with the custom section and requested store password if further troubleshooting is needed
Status: Awaiting confirmation whether the updated code resolves the issue
With Shopify section groups, you have the ability to place any section in both the header and footer sections of your website.
We’re happy to support you; however, can you add a social media section you want to your storefront and then send us the file social-icons.liquid? Then, we can help you customize it.
Hi @BSS-Commerce and thank you for response, here is the code
### {{ section.settings.text }}
{% for block in section.blocks %}
{% if block.settings.icon == 'facebook' %}
{% elsif block.settings.icon == 'instagram' %}
{% elsif block.settings.icon == 'pinterest' %}
{% elsif block.settings.icon == 'reddit' %}
{% elsif block.settings.icon == 'snapchat' %}
{% elsif block.settings.icon == 'twitch' %}
{% elsif block.settings.icon == 'twitter' %}
{% elsif block.settings.icon == 'vk' %}
{% elsif block.settings.icon == 'youtube' %}
{% endif %}
{% endfor %}
{% style %}
.social-banner {
background: {{ section.settings.background_color }};
}
.social-text h3 {
color: {{ section.settings.icon_color }};
}
.social-banner svg {
fill: {{ section.settings.icon_color }};
}
{% endstyle %}
{% schema %}
{
"name": "Social icons",
"settings": [
{
"type": "text",
"id": "text",
"label": "Socials text"
},
{
"type": "color",
"id": "background_color",
"label": "Background color"
},
{
"type": "color",
"id": "icon_color",
"label": "Icon & text color"
}
],
"blocks": [
{
"type": "icon",
"name": "Social icon",
"settings": [
{
"type": "select",
"id": "icon",
"label": "Choose an icon",
"options": [
{
"value": "facebook",
"label": "Facebook"
},
{
"value": "instagram",
"label": "Instagram"
},
{
"value": "pinterest",
"label": "Pinterest"
},
{
"value": "reddit",
"label": "Reddit"
},
{
"value": "snapchat",
"label": "Snapchat"
},
{
"value": "twitch",
"label": "Twitch"
},
{
"value": "twitter",
"label": "Twitter"
},
{
"value": "vk",
"label": "VK"
},
{
"value": "youtube",
"label": "Youtube"
}
],
"default": "facebook"
},
{
"type": "url",
"id": "link",
"label": "Social link"
}
]
}
] ,
"presets": [
{
"name": "Social icons",
"category":"Custom"
}
]
}
{% endschema %}
1 Like
Thank you so much for your information. Can you let us know exactly where you want to add social media to the footer? Also, if possible, please share with us the footer.liquid file so that we can customize it for you.
Hi, and thank you for your responding, this my footer.liquid
{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
{%- style -%}
.footer {
margin-top: {{ section.settings.margin_top | times: 0.75 | round: 0 }}px;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.footer {
margin-top: {{ section.settings.margin_top }}px;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{% 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('.disclosure__list-wrapper'),
};
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"
},
{
"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 contact information, store details, and 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.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.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"
},
{
"type": "header",
"content": "t:sections.all.spacing"
},
{
"type": "range",
"id": "margin_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.footer.settings.margin_top.label",
"default": 0
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"default": {
"blocks": [
{
"type": "link_list"
},
{
"type": "text"
}
]
}
}
{% endschema %}
After checking, we saw that your site already has social media in the header, so instead of adding a new one, just copy the social media section and put it in the footer. Please go to Theme => Edit Code => find the file global.js => then add the following at the end of the file:
// fix for social media
const listSocialMedia = document.querySelector('.footer__list-social.list-unstyled.list-social')
const cloneSocialMedia = listSocialMedia.cloneNode(true);
const elementFooter = document.querySelector('.footer-block--newsletter')
header.appendChild(elementFooter)
// end fix
I hope that this is useful for you.
Hi, thank you for your response, but I created custom sections for social media icons, and I want to move it to the footer
You just need to replace the old code with the following code:
// fix for social media
const listSocialMedia = document.querySelector('.footer__list-social.list-unstyled.list-social')
const elementFooter = document.querySelector('.footer-block--newsletter')
elementFooter.appendChild(listSocialMedia )
// end fix
If it doesn’t work, please share your store password with us again. We will check it for you.