Social media icons in the announcement bar

Store Design
1

Hello,

How to move social media icons to announcement bar?

1234.PNG
1234.PNG570×138 2.69 KB

To add this icons I used this code:


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

I’ll be grateful for help

2

Hi @paulinaz00 ,

Please send your site and if your site is password protected, please send me the password. I will check it.

3

Hi @paulinaz00

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

4

Hi @paulinaz00 ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.announcement-bar-section {
    position: relative;
}
.announcement-bar {
    padding: 0 90px !important;
}
.announcement-bar-section .footer__list-social.list-social {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    height: 100%;
}
.announcement-bar-section .list-social__item {
    height: 100%;
}
.announcement-bar-section .list-social__link {
    height: 100%;
    color: #fff;
}

Hope it helps!

5

Unfortunately it doesn’t work :confused:

6

The code worked! But only after I pasted it elsewhere, not at the bottom of the file. I don’t know why that is, but thank you anyway!

p09.PNG
p09.PNG1021×473 20.9 KB

7

Hi @paulinaz00

The error of the CSS code not working when you put it at the end of the file can be fixed simply. It seems that you forgot to close the braces at the @media (forced-colors: active) command line at the end of the file, so all statements after that won’t work.

view (28).png
view (28).png1639×1046 424 KB

We hope that this can help you.