How can I add social media icons to the body of my Dawn theme website?

ahmy-com
New Member
13 0 0

Hello, i want to have social media icons in the body of my website instead of footer on my homepage. But I can't find any solution on it or how to do it,btw im using dawn theme 10.0

Replies 6 (6)

arunme
Shopify Partner
41 8 13

@ahmy-com In Dawn theme we have code snippet called social-icons.liquid snippet which you can anywhere you want.

 

If you want to have social icon on home page somewhere you can go to your theme customisation > add section >custom liquid and paste this code 

<ul class="list-unstyled list-social{% if class %} {{ class}}{% endif %}" role="list">
  {%- if settings.social_facebook_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_facebook_link }}" class="link list-social__link">
        {%- render 'icon-facebook' -%}
        <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
      </a>
    </li>
  {%- endif -%}
  {%- if settings.social_instagram_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_instagram_link }}" class="link list-social__link">
        {%- render 'icon-instagram' -%}
        <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
      </a>
    </li>
  {%- endif -%}
  {%- if settings.social_youtube_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_youtube_link }}" class="link list-social__link">
        {%- render 'icon-youtube' -%}
        <span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
      </a>
    </li>
  {%- endif -%}
  {%- if settings.social_tiktok_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_tiktok_link }}" class="link list-social__link">
        {%- render 'icon-tiktok' -%}
        <span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
      </a>
    </li>
  {%- endif -%}
  {%- if settings.social_twitter_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_twitter_link }}" class="link list-social__link">
        {%- render 'icon-twitter' -%}
        <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
      </a>
    </li>
  {%- endif -%}
  {%- if settings.social_pinterest_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_pinterest_link }}" class="link list-social__link">
        {%- render 'icon-pinterest' -%}
        <span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
      </a>
    </li>
  {%- endif -%}
  {%- if settings.social_snapchat_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_snapchat_link }}" class="link list-social__link">
        {%- render 'icon-snapchat' -%}
        <span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
      </a>
    </li>
  {%- endif -%}
  {%- if settings.social_tumblr_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_tumblr_link }}" class="link list-social__link">
        {%- render 'icon-tumblr' -%}
        <span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
      </a>
    </li>
  {%- endif -%}
  {%- if settings.social_vimeo_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_vimeo_link }}" class="link list-social__link">
        {%- render 'icon-vimeo' -%}
        <span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
      </a>
    </li>
  {%- endif -%}
</ul>

 

If helpful please Like and Accept Solution.
Ask Me anything related to E-commerce or Shopify Let's connect Linkedin
ahmy-com
New Member
13 0 0

I don't get this where is add section, i want to put social media icon in body in the rich text section

arunme
Shopify Partner
41 8 13

@ahmy-com  there is no direct way to add social media icon in rich text, you have can either add custom liquid section like below or you need to modify theme code to support this 

Screenshot 2023-11-09 at 2.25.10 PM.png

If helpful please Like and Accept Solution.
Ask Me anything related to E-commerce or Shopify Let's connect Linkedin
ahmy-com
New Member
13 0 0

I can't see an option to add custom liquid in dawn

arthadeka
Visitor
1 0 0

how to make the position in the center on the desktop display ?

nestly
Excursionist
13 0 3

Add this code, I actually has a premium theme[focal] and what I did it to copy the social-media.liquid content.

Go to the page I was editing [for me Contact Us template] and adding Custom Liquid, and the CSS through Theme settings

.social-media {
  justify-content:center;
}