How to add heading text next to the social media icons such as instagram

Store Design
1

Hi,

How can we add a text next to the IG icon on the footer? Like “visit our instagram”? We are using dawn theme and the way the social media is set up is using theme footer section.

Here is a preview link:

https://laneh.co/

@Savior @KetanKumar @PaulNewton

2

@rosa_Laneh

your store password protect

bt its easy to show can you please IG Social media link at theme setting and show footer social media icon that’s it

3

Hi,

Attached is how it looks. This is my footer.liquid code right :

{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ ‘section-footer.css’ | asset_url | stylesheet_tag }}

{{ ‘component-newsletter.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-menu.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-payment.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-social.css’ | asset_url | stylesheet_tag }}
{{ ‘component-rte.css’ | asset_url | stylesheet_tag }}
{{ ‘disclosure.css’ | asset_url | stylesheet_tag }}

{%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social -%}
{%- if section.blocks.size > 0 -%} {%- liquid if section.blocks.size == 9 assign footer_grid_class = 'grid--3-col-tablet' elsif section.blocks.size > 6 assign footer_grid_class = 'grid--4-col-desktop' elsif section.blocks.size > 4 assign footer_grid_class = 'grid--3-col-tablet' endif -%}
{%- for block in section.blocks -%}
{%- if block.settings.heading != blank -%}

{{- block.settings.heading | escape -}}

{%- endif -%}

{%- case block.type -%}
{%- when ‘text’ -%}

{{ block.settings.subtext }}
{%- when 'link_list' -%} {%- if block.settings.menu != blank and block.settings.heading != blank -%} {%- endif -%} {%- when 'image' -%}
{%- if block.settings.image != blank -%} {%- assign image_size = block.settings.image_width | append: 'x' -%} {{ block.settings.image.alt | escape }} {%- else -%} {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }} {%- endif -%}
{%- endcase -%}
{%- endfor -%}
{%- endif -%}
{%- if section.settings.newsletter_enable -%}
{%- if section.settings.newsletter_heading != blank -%}

{{ section.settings.newsletter_heading | escape }}

{%- endif -%} {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
{{ 'newsletter.label' | t }} {% render 'icon-arrow' %}
{%- if form.errors -%} {% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }} {%- endif -%}
{%- if form.posted_successfully? -%}

{% render 'icon-success' %}{{ 'newsletter.success' | t }}

{%- endif -%} {%- endform -%}
{%- endif -%}

{%- if section.settings.show_social -%}

{%- endif -%}
{%- endif -%}
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%} {%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}

{{ 'localization.country_label' | t }}

{% render 'icon-caret' %}
{{ 'localization.update_country' | t }} {%- endform -%} {%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}

{{ 'localization.country_label' | t }}

{{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }}) {% render 'icon-caret' %}
{%- endform -%} {%- endif -%}

{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}

{%- form ‘localization’, id: ‘FooterLanguageFormNoScript’, class: ‘localization-form’ -%}

{{ 'localization.language_label' | t }}

{% render 'icon-caret' %}
{{ 'localization.update_language' | t }} {%- endform -%} {%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}

{{ 'localization.language_label' | t }}

{{ localization.language.endonym_name | capitalize }} {% render 'icon-caret' %}
{%- endform -%} {%- endif -%}
{%- if section.settings.payment_enable -%}
{{ 'sections.footer.payment' | t }}
    {%- for type in shop.enabled_payment_types -%}
  • {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
    • {%- endfor -%}
{%- endif -%}
{{ 'now' | date: "%Y" }}&copy Laneh GmbH, {{ powered_by_link }}

{% 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 %}

1 Like
4

Thanks for the reply it seems like you have done much handwork for providing right info keep posting this is true.Myloweslife

5

@rosa_Laneh

yes i can see this code

KetanKumar_0-1641194075160.png
KetanKumar_0-1641194075160.png1920×1080 243 KB

please just add code

6

Hi,

What am I supposed to add and where? I did not understand. Can you be more clear and precise please? Thanks so much for your help.

1 Like
7

@rosa_Laneh

for example like this

https://www.youtube.com/watch?v=6dtJ-SDskFQ

8

I think you did not look at the things I sent and my question- I already have added the Instagram icon for example! What I need is to add text something like “visit us here” next to the instagram icon- does that make sense?

1 Like
9

Hey, @rosa_Laneh Can you please share the store-front password so that I can check and give you the solution.

10

Hi- thanks so much- sure I’ll share in a private message but I have already sent a photo of what it looks like and the code and everything on the thread! doesn’t that help?

see here again- as you can see the instagram icon is on right bottom- I want to have a text “visit us here” to its right. I have shared the footer.liquid code above as well.

11

@rosa_Laneh It’s very hard to give a solution to see only code. If you share the store-front password then I can check on the front-end and give you the right solution where you have to add the code.

Thanks.

12

I sent you the password.

13

oh yes please hight part of code you have just added text that is

14

I don’t understand what you are saying

15

Hello @rosa_Laneh ,

To add heading text next to the social media icons Navigate to online store>> Click Edit Code.

Find the class(ctrl+ F to find) “list-social__item” in footer.liquid file. Now paste the code just below “list-social__item” class.

Your text/description

*(Change the text “Your text/description” to your preferred text.)

After adding this code you will see the text on the footer. Now add some style on to your footer.liquid file.

To add the style scroll up to the top and add the code:

.social_IconBottomText { width: 100%; text-align: right; margin-right: -5%; margin-top: -2%; }

If it is not worked then let me know and add the screenshot where you have added the code.

Hope it will be helpful for you.
Thanks.

16

Hi- this is not working- I added it here:

{%- if section.settings.show_social -%}

17

@eFoli-Marvic can you please help?

18

@rosa_Laneh Please add this code here

{%- if section.settings.show_social -%}

1 Like
19

This worked! Thanks so much!

20

@rosa_Laneh You’re always welcome.