Query ~ Adding Social Media Icons In The Announcement Bar

[Ammar-R]

Greetings,

I’m using DAWN theme for my store and I wanna add social media icons in the announcement bar just like the screenshot below. Does anybody have any idea how can we add/achieve something like this?

Preview - https://ibb.co/ySj4hHw

Looking forward to some suggestions.

~ TIA

[JonasS]

You can add social icon with coding. There is no other way to achieve that so far in Dawn

[Ammar-R]

Thanks for the response JonasS , Do you tend you have the path/code to achieve something like this? I’d highly appreciate that.

[GemPages]

Hello @Ammar-R ,

It’s GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your announcement-bar.liquid theme file

3. Paste the below code before {% schema %}

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

4. Open your theme.liquid theme file

5. Paste the below code before

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

[Ammar-R]

Hi @GemPages , This worked like a charm. Thanks a lot ~

[GemPages]

Hi @Ammar-R ,

I am glad that my solution is helpful to you.

Best regards,
GemPages Support Team

[llennoxllc]

Hey there, thanks for the code, it works great! Is there a way to hide these icons from showing up on mobile view though? It looks great for a desktop but overlaps the other text in the mobile view.