Ad

Social Icons/links On Shopify Simple Theme Won't Show Up

- 1 answer

I'm tweaking the Simple theme and added social links on the customize page settings but I wonder why links won't show up. I didn't did anything in the theme.liquid to break the social links default template but why is it not showing. Can anyone guide me how to do it or explain to me why? Thanks in advance.

theme.liquid social template:

<ul class="list--inline social-links">
            {% if settings.social_facebook_link != blank %}
              <li>
                <a target="_blank" rel="nofollow noreferrer" href="{{ settings.social_facebook_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
                  {% include 'icon-facebook' %}
                  <span class="icon__fallback-text">Facebook</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_twitter_link != blank %}
              <li>
                <a target="_blank" rel="nofollow noreferrer" href="{{ settings.social_twitter_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
                  {% include 'icon-twitter' %}
                  <span class="icon__fallback-text">Twitter</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_pinterest_link != blank %}
              <li>
                <a target="_blank" rel="nofollow noreferrer" href="{{ settings.social_pinterest_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
                  {% include 'icon-pinterest' %}
                  <span class="icon__fallback-text">Pinterest</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_instagram_link != blank %}
              <li>
                <a target="_blank" rel="nofollow noreferrer" href="{{ settings.social_instagram_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
                  {% include 'icon-instagram' %}
                  <span class="icon__fallback-text">Instagram</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_google_plus_link != blank %}
              <li>
                <a target="_blank" rel="nofollow noreferrer" href="{{ settings.social_google_plus_link }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
                  {% include 'icon-google-plus' %}
                  <span class="icon__fallback-text">Google Plus</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_tumblr_link != blank %}
              <li>
                <a target="_blank" rel="nofollow noreferrer" href="{{ settings.social_tumblr_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
                  {% include 'icon-tumblr' %}
                  <span class="icon__fallback-text">Tumblr</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_youtube_link != blank %}
              <li>
                <a target="_blank" rel="nofollow noreferrer" href="{{ settings.social_youtube_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
                  {% include 'icon-youtube' %}
                  <span class="icon__fallback-text">YouTube</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_vimeo_link != blank %}
              <li>
                <a target="_blank" rel="nofollow noreferrer" href="{{ settings.social_vimeo_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
                  {% include 'icon-vimeo' %}
                  <span class="icon__fallback-text">Vimeo</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_fancy_link != blank %}
              <li>
                <a target="_blank" rel="nofollow noreferrer" href="{{ settings.social_fancy_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
                  {% include 'icon-fancy' %}
                  <span class="icon__fallback-text">Fancy</span>
                </a>
              </li>
            {% endif %}
            {% if settings.show_atom and settings.main_blog != blank %}
              <li>
                <a target="_blank" rel="nofollow noreferrer" href="/blogs/{{ settings.main_blog }}.atom">
                  {% include 'icon-rss' %}
                  <span class="icon__fallback-text">Blog</span>
                </a>
              </li>
            {% endif %}
          </ul>
Ad

Answer

The links will show up in the following cases:

  1. You have set up the links in the config/settings.json or via the theme editor GUI.

  2. The site is displayed in the relevant size - if the template is responsive it will hide the icons in order to have more space on the screen.

How to check if i have set up ithe links?

Open the config file and check any value, for example: settings.social_facebook_link

Online Store > Themes > ... > Edit HTML/CSS

Open the config folder and you will see the settings_data file inside.
The flag to display it might need to be true as well.

enter image description here

Ad
source: stackoverflow.com
Ad