Dawn Theme - Adding social media to header

[Hello22]

Hi everyone

I have tried to add social media icons to my header section, without success. I am obviously doing something wrong…

Can someone help me? I would like the icons to be placed to the right, next to the shopping bag.

My site is https://mintestside.myshopify.com/

Password: test

Thank you in advance:-)

[oscprofessional]

@Hello22 ,

Please share your footer.liquid file. I will guide you

[Hello22]

Thank you:-) Do you mean copy copy it in here? Like this:

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

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

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

{%- for link in block.settings.menu.links -%}
• {{ link.title }}
{%- endfor -%}

{%- endif -%} {%- when 'image' -%}

{%- if block.settings.image != blank -%} {%- assign image_size_2x = block.settings.image_width | times: 2 | at_most: 5760 -%} {%- 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 -%}

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

{%- endif -%}

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

{{ 'localization.country_label' | t }}

{%- for country in localization.available_countries -%} {{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }}) {%- endfor -%} {% 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' %}

{%- for country in localization.available_countries -%}
• {{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
{%- endfor -%}

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

{%- for language in localization.available_languages -%} {{ language.endonym_name | capitalize }} {%- endfor -%} {% 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' %}

{%- for language in localization.available_languages -%}
• {{ language.endonym_name | capitalize }}
{%- endfor -%}

{%- 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" }}, {{ shop.name | link_to: routes.root_url }} {{ 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(‘.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 %}

[oscprofessional]

@Hello22 ,

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

Add this code in header.liquid

[Hello22]

Okay, just at the bottom? I pasted it in an nothing changed.

[oscprofessional]

@Hello22 ,

send yourstore header.liquid code

[Hello22]

Thank you for trying:-)

{%- if settings.predictive_search_enabled -%}
  
  
{%- endif -%}
{%- if section.settings.menu_type_desktop == 'mega' -%}
  
  
{%- endif -%}
{%- if settings.cart_type == "drawer" -%}
  {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
  {{ 'component-cart.css' | asset_url | stylesheet_tag }}
  {{ 'component-totals.css' | asset_url | stylesheet_tag }}
  {{ 'component-price.css' | asset_url | stylesheet_tag }}
  {{ 'component-discounts.css' | asset_url | stylesheet_tag }}
  {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{%- endif -%}

{%- style -%}
  .header {
    padding-top: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px;
  }

  .section-header {
    margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-header {
      margin-bottom: {{ section.settings.margin_bottom }}px;
    }
  }

  @media screen and (min-width: 990px) {
    .header {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- if settings.cart_type == "drawer" -%}
  
{%- endif -%}

<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}">
  

{%- if settings.cart_type == "notification" -%}
  {%- render 'cart-notification', color_scheme: section.settings.color_scheme -%}
{%- endif -%}

{% javascript %}
  class StickyHeader extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      this.header = document.getElementById('shopify-section-header');
      this.headerBounds = {};
      this.currentScrollTop = 0;
      this.preventReveal = false;
      this.predictiveSearch = this.querySelector('predictive-search');

      this.onScrollHandler = this.onScroll.bind(this);
      this.hideHeaderOnScrollUp = () => this.preventReveal = true;

      this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
      window.addEventListener('scroll', this.onScrollHandler, false);

      this.createObserver();
    }

    disconnectedCallback() {
      this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
      window.removeEventListener('scroll', this.onScrollHandler);
    }

    createObserver() {
      let observer = new IntersectionObserver((entries, observer) => {
        this.headerBounds = entries[0].intersectionRect;
        observer.disconnect();
      });

      observer.observe(this.header);
    }

    onScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

      if (this.predictiveSearch && this.predictiveSearch.isOpen) return;

      if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
        if (this.preventHide) return;
        requestAnimationFrame(this.hide.bind(this));
      } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
        if (!this.preventReveal) {
          requestAnimationFrame(this.reveal.bind(this));
        } else {
          window.clearTimeout(this.isScrolling);

          this.isScrolling = setTimeout(() => {
            this.preventReveal = false;
          }, 66);

          requestAnimationFrame(this.hide.bind(this));
        }
      } else if (scrollTop <= this.headerBounds.top) {
        requestAnimationFrame(this.reset.bind(this));
      }

      this.currentScrollTop = scrollTop;
    }

    hide() {
      this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
      this.closeMenuDisclosure();
      this.closeSearchModal();
    }

    reveal() {
      this.header.classList.add('shopify-section-header-sticky', 'animate');
      this.header.classList.remove('shopify-section-header-hidden');
    }

    reset() {
      this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate');
    }

    closeMenuDisclosure() {
      this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu');
      this.disclosures.forEach(disclosure => disclosure.close());
    }

    closeSearchModal() {
      this.searchModal = this.searchModal || this.header.querySelector('details-modal');
      this.searchModal.close(false);
    }
  }

  customElements.define('sticky-header', StickyHeader);
{% endjavascript %}

{%- if request.page_type == 'index' -%}
  {% assign potential_action_target = request.origin | append: routes.search_url | append: "?q={search_term_string}" %}
  
{%- endif -%}

{% schema %}
{
  "name": "t:sections.header.name",
  "class": "section-header",
  "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": "image_picker",
      "id": "logo",
      "label": "t:sections.header.settings.logo.label"
    },
    {
      "type": "range",
      "id": "logo_width",
      "min": 50,
      "max": 250,
      "step": 10,
      "default": 100,
      "unit": "t:sections.header.settings.logo_width.unit",
      "label": "t:sections.header.settings.logo_width.label"
    },
    {
      "type": "select",
      "id": "logo_position",
      "options": [
        {
          "value": "top-left",
          "label": "t:sections.header.settings.logo_position.options__2.label"
        },
        {
          "value": "top-center",
          "label": "t:sections.header.settings.logo_position.options__3.label"
        },
        {
          "value": "middle-left",
          "label": "t:sections.header.settings.logo_position.options__1.label"
        },
        {
          "value": "middle-center",
          "label": "t:sections.header.settings.logo_position.options__4.label"
        }
      ],
      "default": "middle-left",
      "label": "t:sections.header.settings.logo_position.label"
    },
    {
      "type": "link_list",
      "id": "menu",
      "default": "main-menu",
      "label": "t:sections.header.settings.menu.label"
    },
    {
      "type": "select",
      "id": "menu_type_desktop",
      "options": [
        {
          "value": "dropdown",
          "label": "t:sections.header.settings.menu_type_desktop.options__1.label"
        },
        {
          "value": "mega",
          "label": "t:sections.header.settings.menu_type_desktop.options__2.label"
        }
      ],
      "default": "dropdown",
      "label": "t:sections.header.settings.menu_type_desktop.label",
      "info": "t:sections.header.settings.menu_type_desktop.info"
    },
    {
      "type": "checkbox",
      "id": "show_line_separator",
      "default": true,
      "label": "t:sections.header.settings.show_line_separator.label"
    },
    {
      "type": "checkbox",
      "id": "enable_sticky_header",
      "default": true,
      "label": "t:sections.header.settings.enable_sticky_header.label",
      "info": "t:sections.header.settings.enable_sticky_header.info"
    },
    {
      "type": "header",
      "content": "t:sections.header.settings.mobile_layout.content"
    },
    {
      "type": "select",
      "id": "mobile_logo_position",
      "options": [
        {
          "value": "center",
          "label": "t:sections.header.settings.mobile_logo_position.options__1.label"
        },
        {
          "value": "left",
          "label": "t:sections.header.settings.mobile_logo_position.options__2.label"
        }
      ],
      "default": "center",
      "label": "t:sections.header.settings.mobile_logo_position.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.spacing"
    },
    {
      "type": "range",
      "id": "margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.header.settings.margin_bottom.label",
      "default": 0
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 36,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 20
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 36,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 20
    }
  ]
}
{% endschema %}
{%- 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 -%}

[Hello22]

I keep trying to send it, and it keeps deleting… Does this message get through?

[Hello22]

{%- if settings.predictive_search_enabled -%} {%- endif -%} {%- if section.settings.menu_type_desktop == 'mega' -%} {{ 'component-mega-menu.css' | asset_url | stylesheet_tag }} {%- endif -%} {%- if settings.cart_type == "drawer" -%} {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }} {{ 'component-cart.css' | asset_url | stylesheet_tag }} {{ 'component-totals.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} {{ 'component-discounts.css' | asset_url | stylesheet_tag }} {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }} {%- endif -%}

{{ ‘component-list-menu.css’ | asset_url | stylesheet_tag }}
{{ ‘component-search.css’ | asset_url | stylesheet_tag }}
{{ ‘component-menu-drawer.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart-notification.css’ | asset_url | stylesheet_tag }}
{{ ‘component-cart-items.css’ | asset_url | stylesheet_tag }}

header-drawer { justify-self: start; margin-left: -1.2rem; } .header__heading-logo { max-width: {{ section.settings.logo_width }}px; } @media screen and (min-width: 990px) { header-drawer { display: none; } } .menu-drawer-container { display: flex; } .list-menu { list-style: none; padding: 0; margin: 0; } .list-menu--inline { display: inline-flex; flex-wrap: wrap; } summary.list-menu__item { padding-right: 2.7rem; } .list-menu__item { display: flex; align-items: center; line-height: calc(1 + 0.3 / var(--font-body-scale)); } .list-menu__item--link { text-decoration: none; padding-bottom: 1rem; padding-top: 1rem; line-height: calc(1 + 0.8 / var(--font-body-scale)); } @media screen and (min-width: 750px) { .list-menu__item--link { padding-bottom: 0.5rem; padding-top: 0.5rem; } }

{%- style -%}
.header {
padding-top: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px;
}

.section-header {
margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-header {
margin-bottom: {{ section.settings.margin_bottom }}px;
}
}

@media screen and (min-width: 990px) {
.header {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- if settings.cart_type == “drawer” -%}

{%- endif -%}

<{% if section.settings.enable_sticky_header %}sticky-header{% else %}div{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}"> {%- if section.settings.menu != blank -%}

{% render 'icon-hamburger' %} {% render 'icon-close' %}

{%- for link in section.settings.menu.links -%}
• {%- if link.links != blank -%}
  {{ link.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}

  {% render 'icon-arrow' %} {{ link.title | escape }}

  {%- for childlink in link.links -%}
  • {%- if childlink.links == blank -%} {{ childlink.title | escape }} {%- else -%}
    {{ childlink.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}

    {% render 'icon-arrow' %} {{ childlink.title | escape }}

    {%- for grandchildlink in childlink.links -%}
    • {{ grandchildlink.title | escape }}
    {%- endfor -%}
    {%- endif -%}
  {%- endfor -%}
  {%- else -%} {{ link.title | escape }} {%- endif -%}
{%- endfor -%}

{%- if shop.customer_accounts_enabled -%} {% render 'icon-account' %} {%- liquid if customer echo 'customer.account_fallback' | t else echo 'customer.log_in' | t endif -%} {%- endif -%}

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

{%- if section.settings.logo_position == ‘top-center’ or section.settings.menu == blank -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{{ 'general.search.search' | t }}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{%- endif -%}

{%- if section.settings.logo_position != ‘middle-center’ -%}
{%- if request.page_type == ‘index’ -%}

{%- endif -%} {%- if section.settings.logo != blank -%} {%- assign logo_alt = section.settings.logo.alt | default: shop.name | escape -%} {%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%} {{ section.settings.logo | image_url: width: section.settings.width | image_tag: class: 'header__heading-logo', widths: '50, 100, 150, 200, 250, 300, 400, 500', height: logo_height, width: section.settings.logo_width, alt: logo_alt }} {%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type == 'index' -%}

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

{%- if section.settings.menu != blank -%}
{%- if section.settings.menu_type_desktop == ‘dropdown’ -%}

{%- for link in section.settings.menu.links -%}
• {%- if link.links != blank -%}
  {{ link.title | escape }} {% render 'icon-caret' %}

  {%- for childlink in link.links -%}
  • {%- if childlink.links == blank -%} {{ childlink.title | escape }} {%- else -%}
    {{ childlink.title | escape }} {% render 'icon-caret' %}

    {%- for grandchildlink in childlink.links -%}
    • {{ grandchildlink.title | escape }}
    {%- endfor -%}
    {%- endif -%}
  {%- endfor -%}
  {%- else -%} {{ link.title | escape }} {%- endif -%}
{%- endfor -%}

{%- else -%}

{%- for link in section.settings.menu.links -%}
• {%- if link.links != blank -%}
  {{ link.title | escape }} {% render 'icon-caret' %}

  {%- for childlink in link.links -%}
  • {{ childlink.title | escape }} {%- if childlink.links != blank -%}
    {%- for grandchildlink in childlink.links -%}
    • {{ grandchildlink.title | escape }}
    {%- endfor -%}
    {%- endif -%}
  {%- endfor -%}
  {%- else -%} {{ link.title | escape }} {%- endif -%}
{%- endfor -%}

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

{%- if section.settings.logo_position == ‘middle-center’ -%}
{%- if request.page_type == ‘index’ -%}

{%- endif -%} {%- if section.settings.logo != blank -%} {%- assign logo_alt = section.settings.logo.alt | default: shop.name | escape -%} {%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%} {{ section.settings.logo | image_url: width: section.settings.width | image_tag: class: 'header__heading-logo', widths: '50, 100, 150, 200, 250, 300, 400, 500', height: logo_height, width: section.settings.logo_width, alt: logo_alt }} {%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type == 'index' -%}

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

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{{ 'general.search.search' | t }}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- if settings.predictive_search_enabled -%} {%- endif -%}

{%- if shop.customer_accounts_enabled -%}

{% render ‘icon-account’ %}

{%- liquid
if customer
echo ‘customer.account_fallback’ | t
else
echo ‘customer.log_in’ | t
endif
-%}


{%- endif -%}

{%- liquid if cart == empty render 'icon-cart-empty' else render 'icon-cart' endif -%} {{ 'templates.cart.cart' | t }} {%- if cart != empty -%}

{%- if cart.item_count < 100 -%} {{ cart.item_count }} {%- endif -%} {{ 'sections.header.cart_count' | t: count: cart.item_count }}

{%- endif -%}

{%- if settings.cart_type == “notification” -%}
{%- render ‘cart-notification’, color_scheme: section.settings.color_scheme -%}
{%- endif -%}

{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}

connectedCallback() {
this.header = document.getElementById(‘shopify-section-header’);
this.headerBounds = {};
this.currentScrollTop = 0;
this.preventReveal = false;
this.predictiveSearch = this.querySelector(‘predictive-search’);

this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;

this.addEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.addEventListener(‘scroll’, this.onScrollHandler, false);

this.createObserver();
}

disconnectedCallback() {
this.removeEventListener(‘preventHeaderReveal’, this.hideHeaderOnScrollUp);
window.removeEventListener(‘scroll’, this.onScrollHandler);
}

createObserver() {
let observer = new IntersectionObserver((entries, observer) => {
this.headerBounds = entries[0].intersectionRect;
observer.disconnect();
});

observer.observe(this.header);
}

onScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (this.predictiveSearch && this.predictiveSearch.isOpen) return;

if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (this.preventHide) return;
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);

this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);

requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
requestAnimationFrame(this.reset.bind(this));
}

this.currentScrollTop = scrollTop;
}

hide() {
this.header.classList.add(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’);
this.closeMenuDisclosure();
this.closeSearchModal();
}

reveal() {
this.header.classList.add(‘shopify-section-header-sticky’, ‘animate’);
this.header.classList.remove(‘shopify-section-header-hidden’);
}

reset() {
this.header.classList.remove(‘shopify-section-header-hidden’, ‘shopify-section-header-sticky’, ‘animate’);
}

closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll(‘header-menu’);
this.disclosures.forEach(disclosure => disclosure.close());
}

closeSearchModal() {
this.searchModal = this.searchModal || this.header.querySelector(‘details-modal’);
this.searchModal.close(false);
}
}

customElements.define(‘sticky-header’, StickyHeader);
{% endjavascript %}

{%- if request.page_type == ‘index’ -%}
{% assign potential_action_target = request.origin | append: routes.search_url | append: “?q={search_term_string}” %}

{%- endif -%}

{% schema %}
{
“name”: “t:sections.header.name”,
“class”: “section-header”,
“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”: “image_picker”,
“id”: “logo”,
“label”: “t:sections.header.settings.logo.label”
},
{
“type”: “range”,
“id”: “logo_width”,
“min”: 50,
“max”: 500,
“step”: 10,
“default”: 100,
“unit”: “t:sections.header.settings.logo_width.unit”,
“label”: “t:sections.header.settings.logo_width.label”
},
{
“type”: “select”,
“id”: “logo_position”,
“options”: [
{
“value”: “top-left”,
“label”: “t:sections.header.settings.logo_position.options__2.label”
},
{
“value”: “top-center”,
“label”: “t:sections.header.settings.logo_position.options__3.label”
},
{
“value”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.options__1.label”
},
{
“value”: “middle-center”,
“label”: “t:sections.header.settings.logo_position.options__4.label”
}
],
“default”: “middle-left”,
“label”: “t:sections.header.settings.logo_position.label”
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “main-menu”,
“label”: “t:sections.header.settings.menu.label”
},
{
“type”: “select”,
“id”: “menu_type_desktop”,
“options”: [
{
“value”: “dropdown”,
“label”: “t:sections.header.settings.menu_type_desktop.options__1.label”
},
{
“value”: “mega”,
“label”: “t:sections.header.settings.menu_type_desktop.options__2.label”
}
],
“default”: “dropdown”,
“label”: “t:sections.header.settings.menu_type_desktop.label”,
“info”: “t:sections.header.settings.menu_type_desktop.info”
},
{
“type”: “checkbox”,
“id”: “show_line_separator”,
“default”: true,
“label”: “t:sections.header.settings.show_line_separator.label”
},
{
“type”: “checkbox”,
“id”: “enable_sticky_header”,
“default”: true,
“label”: “t:sections.header.settings.enable_sticky_header.label”,
“info”: “t:sections.header.settings.enable_sticky_header.info”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.mobile_layout.content”
},
{
“type”: “select”,
“id”: “mobile_logo_position”,
“options”: [
{
“value”: “center”,
“label”: “t:sections.header.settings.mobile_logo_position.options__1.label”
},
{
“value”: “left”,
“label”: “t:sections.header.settings.mobile_logo_position.options__2.label”
}
],
“default”: “center”,
“label”: “t:sections.header.settings.mobile_logo_position.label”
},
{
“type”: “header”,
“content”: “t:sections.all.spacing”
},
{
“type”: “range”,
“id”: “margin_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.header.settings.margin_bottom.label”,
“default”: 0
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 36,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 20
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 36,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 20
}
]
}
{% endschema %}
{%- 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 -%}