Place social media icons to the left of search bar on header | Reformer Theme

I’m trying to implement social media icons on my header, for this site: www.artclubapparel.com

Ideally I would like to place them below the search bar and shopping cart as highlighted in green on the screenshot below:

The header is a bit tricky though, because when you hover the mouse when on the Home page, the hero images are on the background. Currently when this happens, logo, icons turn to white, then revert back to black when on the rest of site.

The theme I’m using has an Announcement Bar feature, but it doesn’t have an additional section for social media icons. It’s only function is rotating text.

Any help would be greatly appreciated.

Thank you!

Hi @pjcasgui

Which theme are you using? In your header file, you can search for the CSS class thb-secondary-area thb-header-right, which is for the top area. Then, you can add the social links that you inserted in the footer. This needs to be done through your theme coding. Since this is not a default Shopify theme, we are unable to provide the correct code for it.

Thank you.

Hi, I’m using Reformation Theme.

Hi, @pjcasgui
If possible you can share the header.liquide and footer.liquid file then we can check and told you what to put. We do not have this theme. It may be Premium theme.

Hi @Arif_Shopidevs , yes it is a premium theme.

I’ve attached both files.

Can. you check again? no file is attached

Oh, that’s odd. Sorry. Apparently (.rtf) files aren’t supported. I’ll just paste them here.

theme.liquid

{%- capture dir -%}

{%- case request.locale.iso_code -%}

{%- when ‘ae’ or ‘ar’ or ‘arc’ or ‘bcc’ or ‘bqi’ or ‘ckb’ or ‘dv’ or ‘fa’ or ‘glk’ or ‘ha’ or ‘he’ or ‘kwh’ or ‘ks’ or ‘ku’ or ‘mzn’ or ‘nqo’ or ‘pnb’ or ‘ps’ or ‘sd’ or ‘ug’ or ‘ur’ or ‘yi’ -%}

rtl

{%- else -%}

ltr

{%- endcase -%}

{%- endcapture -%}

{% render ‘head-preload’ %}

{% if settings.favicon != blank -%}

{%- endif %}

{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ’ %} – {{ ‘general.meta.tags’ | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ ‘general.meta.page’ | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}

{% if page_description %}

{% endif %}

{%- unless settings.heading_font.system? and settings.body_font.system? -%}

{%- endunless -%}

{% render ‘social-meta-tags’ %}

{{ ‘app.css’ | asset_url | stylesheet_tag }}

{% render ‘head-variables’ %}

{{ content_for_header }}

{{ ‘accessibility.skip_to_text’ | t }}

{% sections ‘header-group’ %}

{{ content_for_layout }}

{% sections ‘footer-group’ %}

{% render ‘cart-drawer’ %}

{% render ‘product-drawer’ %}

{% render ‘search-drawer’ %}

{{ ‘vendor.min.js’ | asset_url | script_tag }}

{% if settings.animations %}

{{ ‘animations.min.js’ | asset_url | script_tag }}

{% endif %}

{% if settings.enable_quick_view or settings.enable_quick_add %}

{{ ‘product.js’ | asset_url | script_tag }}

{% endif %}

{{ ‘slideshow.js’ | asset_url | script_tag }}

{{ ‘app.js’ | asset_url | script_tag }}

{%- if request.design_mode -%}

{{ ‘theme-editor.js’ | asset_url | script_tag }}

{%- endif -%}

{%- if settings.cart_recommendations -%}

{%- endif -%}

{% render ‘back-to-top’ %}

h1.collection-banner--title { display: none !important; }

footer.liquid

{% liquid

assign full_width = section.settings.full_width

assign copyright_text = section.settings.copyright_text

assign show_language_switcher = section.settings.show_language_switcher

assign show_currency_switcher = section.settings.show_currency_switcher

assign show_payment_icons = section.settings.show_payment_icons

%}

{{ ‘footer.css’ | asset_url | stylesheet_tag }}

{%- for block in section.blocks -%}

{% if block.type == ‘text’ %}

{%- liquid

assign column_class = ‘small-12 medium-4 large-2’

case block.settings.column_size

when ‘medium’

assign column_class = ‘small-12 medium-3’

when ‘large’

assign column_class = ‘small-12 medium-6’

endcase

-%}

{%- if block.settings.title != blank -%}

{{ block.settings.title }}

{%- endif -%}

{%- if block.settings.image != blank -%}

{% assign image = block.settings.image %}

{% assign master_width = image.src.width | append: ‘x’ | append: image.src.height %}

{%- render ‘responsive-image’, image: image, sizes: master_width, retina: 1, priority: ‘low’ -%}

{%- endif -%}

{%- if block.settings.text != blank -%}

{{ block.settings.text }}

{%- endif -%}

{%- if block.settings.button_text != blank -%}

{{ block.settings.button_text }}

{%- endif -%}

{%- if block.settings.show_social_links -%}

{%- render ‘social-links’ -%}

{%- endif -%}

{% endif %}

{%- if block.type == ‘menu’ -%}

{%- liquid

assign column_class = ‘small-12 medium-4 large-2’

case block.settings.column_size

when ‘medium’

assign column_class = ‘small-12 medium-3’

when ‘large’

assign column_class = ‘small-12 medium-6’

endcase

-%}

{{ block.settings.title }}

{%- if block.settings.menu != blank -%}

    {% for link in block.settings.menu.links %}

    {% assign has_sub_menu = false %}

    {% if link.links.size > 0 %}

    {% assign has_sub_menu = true %}

    {% endif %}

  • <a href=“{{ link.url }}” title=“{{ link.title | escape }}”{%- if link.active %} aria-current=“page”{% endif -%}>{{ link.title }}{% if has_sub_menu %}{%- render ‘svg-icons’ with ‘thb-dropdown-bottom’ -%}{% endif %}

    {% if has_sub_menu %}

      {% for l in link.links %}

      {% assign has_sub_menu = false %}

      {% if l.links.size > 0 %}

      {% assign has_sub_menu = true %}

      {% endif %}

    • {{ l.title }}{% if has_sub_menu %}{%- render ‘svg-icons’ with ‘thb-dropdown-bottom’ -%}{% endif %}

      {% if has_sub_menu %}

        {% for sub_link in l.links %}

        {% assign has_sub_menu = false %}

        {% if sub_link.links.size > 0 %}

        {% assign has_sub_menu = true %}

        {% endif %}

      • {{ sub_link.title }}

      • {% endfor %}

      {% endif %}

    • {% endfor %}

    {% endif %}

  • {% endfor %}

{%- endif -%}

{%- endif -%}

{%- if block.type == ‘signup’ -%}

{%- liquid

assign column_class = ‘small-12 medium-4 large-2’

case block.settings.column_size

when ‘medium’

assign column_class = ‘small-12 medium-3’

when ‘large’

assign column_class = ‘small-12 medium-6’

endcase

-%}

{% if block.settings.title != blank %}

{{ block.settings.title }}

{% endif %}

{% if block.settings.text != blank %}

{{ block.settings.text }}

{% endif %}

{% render ‘email-signup-form’ %}

{%- endif -%}

{%- if block.type == ‘social’ -%}

{%- liquid

assign column_class = ‘small-6 medium-4 large-2’

case block.settings.column_size

when ‘medium’

assign column_class = ‘small-12 medium-3’

when ‘large’

assign column_class = ‘small-12 medium-6’

endcase

-%}

{% if block.settings.title != blank %}

{{ block.settings.title }}

{% endif %}

{% render ‘social-links’ %}

{%- endif -%}

{%- if block.type == ‘custom_liquid’ -%}

{%- liquid

assign column_class = ‘small-6 medium-4 large-2’

case block.settings.column_size

when ‘medium’

assign column_class = ‘small-12 medium-3’

when ‘large’

assign column_class = ‘small-12 medium-6’

endcase

-%}

{% if block.settings.title != blank %}

{{ block.settings.title }}

{% endif %}

{{ block.settings.custom_liquid }}

{%- endif -%}

{%- endfor -%}

{% render ‘localization’, id: ‘FooterLocalization’, show_language_switcher: show_language_switcher, show_currency_switcher: show_currency_switcher %}

{%- if show_payment_icons -%}

{%- unless shop.enabled_payment_types == empty -%}

{%- for type in shop.enabled_payment_types -%}

{{ type | payment_type_svg_tag: class: 'payment-icons__icon' }}

{%- endfor -%}

{%- endunless -%}

{%- endif -%}

© {{ 'now' | date: "%Y" }} {{ shop.name }}, {{ copyright_text }} {{ powered_by_link }}

{%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}

{{ shop | login_button: action: ‘follow’ }}

{%- endif -%}

{% schema %}

{

“name”: “Footer”,

“class”: “section-footer”,

“settings”: [

{

“type”: “checkbox”,

“id”: “full_width”,

“default”: false,

“label”: “Make section full width”

},

{

“type”: “text”,

“id”: “copyright_text”,

“label”: “Additional copyright text”,

“default”: “All rights reserved.”

},

{

“type”: “checkbox”,

“id”: “show_language_switcher”,

“label”: “Enable language switcher”,

“default”: true,

“info”: “To add a language, go to your language settings.”

},

{

“type”: “checkbox”,

“id”: “show_currency_switcher”,

“label”: “Enable currency switcher”,

“default”: true,

“info”: “To add a country/region, go to your payment settings.”

},

{

“type”: “checkbox”,

“id”: “show_payment_icons”,

“label”: “Show payment icons”,

“default”: true,

“info”: “By default your theme shows the icons that are associated with the payment gateway you have enabled in the payment settings.”

},

{

“type”: “header”,

“content”: “Follow on Shop”,

“info”: “To allow customers to follow your store on the Shop app from your storefront, Shop Pay must be enabled. Learn more

},

{

“type”: “checkbox”,

“id”: “enable_follow_on_shop”,

“default”: true,

“label”: “Enable Follow on Shop”

}

],

“blocks”: [

{

“type”: [email removed]

},

{

“type”: “text”,

“name”: “Text”,

“settings”: [

{

“type”: “select”,

“id”: “column_size”,

“label”: “Column size”,

“options”: [

{ “value”: “small”, “label”: “Small” },

{ “value”: “medium”, “label”: “Medium” },

{ “value”: “large”, “label”: “Large” }

],

“default”: “small”

},

{

“id”: “title”,

“type”: “text”,

“label”: “Title”

},

{

“type”: “image_picker”,

“id”: “image”,

“label”: “Image”,

“info”: “240 x 100 px .png recommended.”

},

{

“type”: “richtext”,

“id”: “text”,

“label”: “Text”,

“default”: “

Add company info here.

},

{

“type”: “select”,

“id”: “text_size”,

“label”: “Text size”,

“options”: [

{

“value”: “small”,

“label”: “Small”

},

{

“value”: “medium”,

“label”: “Medium”

},

{

“value”: “large”,

“label”: “Large”

}

],

“default”: “medium”

},

{

“id”: “button_text”,

“type”: “text”,

“label”: “Button label”,

“default”: “Explore”,

“info”: “Leave the label blank to hide the button.”

},

{

“id”: “button_link”,

“type”: “url”,

“label”: “Button link”

},

{

“type”: “checkbox”,

“id”: “show_social_links”,

“label”: “Show social links”,

“default”: true

}

]

},

{

“type”: “menu”,

“name”: “Menu”,

“settings”: [

{

“type”: “select”,

“id”: “column_size”,

“label”: “Column size”,

“options”: [

{ “value”: “small”, “label”: “Small” },

{ “value”: “medium”, “label”: “Medium” },

{ “value”: “large”, “label”: “Large” }

],

“default”: “small”

},

{

“id”: “title”,

“type”: “text”,

“label”: “Title”

},

{

“type”: “link_list”,

“id”: “menu”,

“default”: “footer”,

“label”: “Menu”,

“info”: “Select navigation to display”

}

]

},

{

“type”: “social”,

“name”: “Social links”,

“settings”: [

{

“type”: “select”,

“id”: “column_size”,

“label”: “Column size”,

“options”: [

{ “value”: “small”, “label”: “Small” },

{ “value”: “medium”, “label”: “Medium” },

{ “value”: “large”, “label”: “Large” }

],

“default”: “small”

},

{

“id”: “title”,

“type”: “text”,

“label”: “Title”

}

]

},

{

“type”: “signup”,

“name”: “Email signup”,

“limit”: 1,

“settings”: [

{

“type”: “select”,

“id”: “column_size”,

“label”: “Column size”,

“options”: [

{ “value”: “small”, “label”: “Small” },

{ “value”: “medium”, “label”: “Medium” },

{ “value”: “large”, “label”: “Large” }

],

“default”: “small”

},

{

“id”: “title”,

“type”: “text”,

“label”: “Title”

},

{

“type”: “richtext”,

“id”: “text”,

“label”: “Text”,

“default”: “

Add a text to attract more customers to sign up!

}

]

},

{

“type”: “custom_liquid”,

“name”: “Custom liquid”,

“settings”: [

{

“type”: “select”,

“id”: “column_size”,

“label”: “Column size”,

“options”: [

{ “value”: “small”, “label”: “Small” },

{ “value”: “medium”, “label”: “Medium” },

{ “value”: “large”, “label”: “Large” }

],

“default”: “small”

},

{

“id”: “title”,

“type”: “text”,

“label”: “Title”

},

{

“type”: “liquid”,

“id”: “custom_liquid”,

“label”: “Custom liquid”,

“info”: “Add app snippets or other Liquid code to create advanced customizations.”

}

]

}

]

}

{% endschema %}

Oh, that’s odd. Apparently (.rtf) files aren’t supported. I tried pasting the code, but it didn’t go through either.

I’ve added them to a Google Docs file, please let me know if you’re able to view:

https://docs.google.com/document/d/e/2PACX-1vSr8lUq5mvMYbMtROudLS5iluIcnTJss8O_vtS7tLNhpZyyJiXwrFdYhYV-zzfUJVnZNfN6ntiOY143/pub

Thank you for the file but unfortunatly the code is not exits their. Are you able to find from your theme file. Or you can send me the theme file from top personal message. I can find that for you if you want.

Oh no. Okay, I uploaded the files to a WeTransfer link: https://we.tl/t-QFeh1p4MZV

Let me know if you can access them fine.

Thank you

Thank you but here is no header code.

Sorry for the confusion. I figured out how to download the theme file and uploaded via WeTransfer: ///////

Fingers crossed.

My download is complete, please remove the link, so that , this premium theme can’t download by all. Which. may financially lose the theme author.
I will update you soon.
thank you

1 Like

Hi, @pjcasgui

In snippets/header-secondary-area.liquid line you can add this code after this line


{%- render 'svg-icons' with 'cart' %} {%- if cart.item_count > 99 -%}{%- render 'svg-icons' with 'thb-asterisk' -%}{%- else -%}{{ cart.item_count }}{%- endif -%}

{% render ‘social-links’ %} which will render your footer social link. Now need to adjust the CSS Or you can put their any custom div and show the social icon
Hope it helps you to find the location and solve
thank you

@pjcasgui

You can use this css it will optimize the icon like the image

.thb-header-right {
    position: relative;
}

.thb-header-right .social-links {
    position: absolute;
    top: 42px;
    right: 0;
    display: flex;
    gap: 15px;
}

.thb-header-right .social-links li {
    margin-bottom: 0;
    line-height: 0;
    padding: 5px;
}

.thb-header-right .social-links li a {
    height: 0;
    display: contents;
}

.thb-header-right .social-links span {
    display: none;
}

,

I hope you find this useful. If it meets your needs, please consider liking and marking it as the accepted solution.

Kind regards,

Arif from ShopiDevs

Thank you Arif, where do I place this css?

Right now it’s appearing like this, when the background is white:

And it stays black, when the background scrolls up:

Will the provided css take into account changing the color to white when the white bg is not present?

Thank you.

Put this css in base.css file in your theme .

  1. navigate your theme from Online Store

  2. Click Edit your theme edit code

  3. Search base.css

Thank you

Arif, thank you for all your help so far. Since you downloaded the theme file, could you tell me which specific css to look for since “base.css” is not one of the options.

Hi, Extremly sorry, not checked that your theme used app.css you can insert at the end of the file or at the end of theme.liquid file


Thank you

Is there any way to invert the color of the icons when the white background is not present? It doesn’t look good when the white background isn’t present: