Hide Icon when Dynamic Metadata Field is Empty

[jvanzile]

I have a music site that contains various Artists, each with their own Bio page. Each bio has its own set of social media/streaming icons for the Artist. I am using dynamic data from a theme template to populate the social media links on the Artist page. I have (15) social media/streaming metadata fields, but only those that the Artist uses are filled in, but all of the icons are still displayed.

If a field is blank I do not want the icon displayed on the page. Here's what part of the code looks like on the snippets/social-icons.liquid page:

{%- if settings.social_youtube_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_youtube_link }}" class="link list-social__link" target="_blank">
{%- render 'icon-youtube' -%}
<span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
</a>
</li>
{%- endif -%}

Any help is appreciated!

[VipulBudhiraja]

Add conditions to check if each social media field is filled out. If the field is blank, the code will skip rendering that icon. Here’s an example for multiple social media platforms:

<ul class="list-social">
{%- if settings.social_youtube_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_youtube_link }}" class="link list-social__link" target="_blank">
{%- render 'icon-youtube' -%}
<span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
</a>
</li>
{%- endif -%}

{%- if settings.social_facebook_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_facebook_link }}" class="link list-social__link" target="_blank">
{%- 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" target="_blank">
{%- render 'icon-instagram' -%}
<span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
</a>
</li>
{%- endif -%}

{%- if settings.social_spotify_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_spotify_link }}" class="link list-social__link" target="_blank">
{%- render 'icon-spotify' -%}
<span class="visually-hidden">{{ 'general.social.links.spotify' | t }}</span>
</a>
</li>
{%- endif -%}

<!-- Repeat for each social media/streaming platform you want to include -->
</ul>

Explanation

• Conditional Checks: Each icon is wrapped in an {% if %} statement that checks if the corresponding social media link field is not blank.
• Rendering Icons Dynamically: Only the icons with filled-in fields will be displayed.
• Loop (Optional): If your fields and icons follow a standard pattern, you could simplify this further with a loop, but each field would need to be named consistently (e.g., social_links.youtube, social_links.facebook).

This method ensures only active social media links appear, keeping the page clean and relevant to each artist.

---

Enhance your artist pages with smart guidance from the Debales AI Chatbot on Shopify! Ready to help users find what they need—let’s chat!

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

[jvanzile]

Thank you for the quick response! This was helpful but did not solve the issue for me, but that's my fault. As I investigated further I came across the code below. I created a test section using this. It gives me the result I want on the page and the ability to add icons while accepting the dynamic data (urls) from my pages.

My theme template includes all of the icons (15) to start, what I hope to do is just fill in the metadata in the Artist Profile and if a field is not filled out then the icon would not appear on the page. 

<div class="socialContainer">
<h2 style="font-size:{{ section.settings.size }}px;">{{ section.settings.sectionTitle }}</h2>
<div class="socialIcons">
{% for block in section.blocks %}
<div class="socialIcons">
<a class="socialButton" target=_blank href="{{ block.settings.social_url }}">
<img src="{{ block.settings.social_image | img_url: 'Master' }}" alt="{{ block.settings.social_image.alt }}" loading="lazy" height="{{ block.settings.social_image.height }}" width="{{ block.settings.social_image.width }}">
</a>
</div>
{% endfor %}
</div>
</div>

<style>
.socialContainer{text-align:center;margin:40px 0}.socialContainer h2{margin-bottom:20px}.socialIcons{display:flex;justify-content:center;gap:20px}.socialIcons a img{width:40px;height:40px;transition:transform .3s}
</style>

{% schema %}
{
"name": "Social Icons Section",
"settings": [
{
"type": "text",
"id": "sectionTitle",
"label": "Section Heading",
"default": "Follow TBR on social media"
},
{
"type": "text",
"id": "size",
"label": "title size",
"default": "16"
}
],
"blocks": [{
"name": "Icons",
"type": "Text",
"settings": [
{
"type": "url",
"id": "social_url",
"label": "Add Your PDF's"
},
{
"type": "image_picker",
"id": "social_image",
"label": "Add Social Icon"
}
]
}

],
"presets": [
{
"name": "Add Social Icons"
}
]
}
{% endschema %}

[jvanzile]

1.  Here's what my page template looks like...

2. For the "Follow The Artist" section I add a new icon from the left-side 'Social Icons Section'.

3.  I have (15) 'social platform' metafields total.

4.  I populate the url for the icon with a metadata field, selected from the right-hand Icons frame.

5.  The code for my social-media.liquid section is in the previous post. 

What I'd like to accomplish is:

1. Have (14) Page metafields available for all the social platforms (as in the Follow this Artist example).
2. Only fill out the metafields that are needed for the specific Artist Profile page.
3. Only display the icons that I have filled in the metafields (as in the Follow TBR on social media example)

Hoping this is possible.

[VipulBudhiraja]

for that much i think you need to edit css file as well

Enhance your artist pages with smart guidance from the Debales AI Chatbot on Shopify! Ready to help users find what they need—let’s chat!

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

[jvanzile]

I'm getting closer using "custom liquid" code as provided below my screen capture. It accomplished what I was hoping by not displaying the icon if I did not fill out the page metafield. But when the icon is not displayed it leaves some extra spacing. I also want the icons to be responsive, especially on mobile. Any thoughts? Thanks!

{% if page.metafields.custom.icon_facebook == blank %}
<style>
img[src="//cdn.shopify.com/s/files/1/0869/0001/5411/files/icon-facebook_small.png?v=1731525967"] {
display:none;
}
</style>
{% endif %}

{% if page.metafields.custom.icon_instagram == blank %}
<style>
img[src="//cdn.shopify.com/s/files/1/0869/0001/5411/files/instagram_small.png?v=1725653885"] {
display:none;
}
</style>
{% endif %}

{% if page.metafields.custom.icon_patreon == blank %}
<style>
img[src="//cdn.shopify.com/s/files/1/0869/0001/5411/files/icon-patreon_small.png?v=1731526093"] {
display:none;
}
</style>
{% endif %}

{% if page.metafields.custom.icon_threads == blank %}
<style>
img[src="//cdn.shopify.com/s/files/1/0869/0001/5411/files/threads_small.png?v=1725718670"] {
display:none;
}
</style>
{% endif %}

AND SO ON FOR EACH ICON.

[jvanzile]

I have done a good deal of research on this with little results, from what I can tell it may require some Javascript to remove the div entirely. The screen shots below illustrate that the div space still exists. 

The illustration below presents spacing where the icon "Patreon" is not displayed because the metafield is empty.

The illustration below shows spacing where (2) icons are not displayed, Deering and Wikipedia icons.

The solution will need to remove the Divs entirely, when the metafield is empty so the icons are all equally spaced out.

The final solution will also need to make this line of icons responsive for mobile, so the icons stack in rows on top of each other.

This is how icons are added:

[jvanzile · Accepted solution]

I have solved the issue I was having for the Artist Profile Social Media Icon Section.

My Desired outcome:

• Only display icons when the page metafield is filled out.
• When a social media metafield is empty do not display the icon and remove the extra space between the icons.
• When on mobile make the icons responsive.

I created a Custom Liquid section with the following code:

{% comment %} Initialize the social media links as variables {% endcomment %}

{% assign facebook_link = page.metafields.custom.icon_facebook %}

{% assign instagram_link = page.metafields.custom.icon_instagram %}

{% assign patreon_link = page.metafields.custom.icon_patreon %}

{% assign threads_link = page.metafields.custom.icon_threads %}

{% comment %} Check if at least one metafield has a URL {% endcomment %}

{% assign has_links = false %}

{% if facebook_link or instagram_link or patreon_link or threads_link %}

  {% assign has_links = true %}

{% endif %}

{% if has_links %}

<div class="socialIcons">

  {% if facebook_link %}

    <a href="{{ facebook_link }}" target="_blank" rel="noopener noreferrer">

      <img src="{{ 'copy and paste image path here' }}" alt="Facebook" />

    </a>

  {% endif %}

  {% if instagram_link %}

    <a href="{{ instagram_link }}" target="_blank" rel="noopener noreferrer">

      <img src="{{ 'copy and paste image path here' }}" alt="Instagram" />

    </a>

  {% endif %}

  {% if patreon_link %}

    <a href="{{ patreon_link }}" target="_blank" rel="noopener noreferrer">

      <img src="{{ 'copy and paste image path here' }}" alt="Patreon" />

    </a>

  {% endif %}

  {% if threads_link %}

    <a href="{{ threads_link }}" target="_blank" rel="noopener noreferrer">

      <img src="{{ 'copy and paste image path here' }}" alt="Threads" />

    </a>

  {% endif %} 

</div>

{% endif %}

The responsive CSS:

.socialIcons {

    display: flex; /* Use flexbox for layout */

    justify-content: center; /* Center the icons horizontally */

    flex-wrap: wrap; /* Allow icons to wrap on smaller screens */

    gap: 15px; /* Space between the icons */

    padding: 10px; /* Padding around the container */

}

.socialIcons a {

    display: inline-block; /* Allow block behavior for links */

}

.socialIcons img {

    max-width: 100%; /* Ensure the icon does not exceed its container */

    height: auto; /* Maintain aspect ratio */

    width: 40px; /* Set a base width for the icons */

    transition: transform 0.3s; /* Optional: Add hover effect */

}

.socialIcons img:hover {

    transform: scale(1.1); /* Slightly scale the icon on hover */

}

/* Media Queries for Smaller Screens */

@media (max-width: 600px) {

    .socialIcons img {

        width: 30px; /* Smaller width for mobile devices */

    }

}

@media (max-width: 400px) {

    .socialIcons img {

        width: 25px; /* Even smaller width for very small screens */

    }

}