Hide metafield if it's blank

Store Design
, , , , ,

Topic summary

A user is attempting to conditionally hide a “complete the look” featured products section on product pages when a metafield (product.metafield.custom.complete_the_look_products) is empty.

Problem encountered:

  • Initial code using {% if product.metafield.custom.complete_the_look_products == blank %} hides the section for all products, including those with populated metafields
  • Alternative approach using != blank with display: block/none also fails to work correctly

Suggested solution:
A commenter points out that since the metafield is a list (not a string), comparing it to blank won’t work properly. Instead, they recommend:

  • Checking the list’s size rather than comparing to blank
  • Using CSS targeting like .featured-products-section:has(.product-card) { display: block; } and .featured-products-section { display: none; } to show/hide based on whether product cards are present

The issue remains unresolved as the original poster hasn’t confirmed whether the suggested approach works.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

I have a featured products section on my product pages for complete the look. I have set up a product metafield so you can select which items pair with a product. Which works however I want the section to be hidden if the meta field is blank. I have tried this code on a custom liquid section in customiser but it only hides the section for all products (including the ones where the metafield has been filled in)

{% if product.metafield.custom.complete_the_look_products == blank %}

#shopify-section-template--23961742377309__featured_products_8BPVfh { display: none; } Store url: [https://really-wild-clothing-company.myshopify.com/products/isabella-cropped-wool-blend-boucle-jacket?pr_prod_strat=e5_desc&pr_rec_id=8c34f6d30&pr_rec_pid=10005208629597&pr_ref_pid=10005210399069&pr_seq=uniform?variant=54409669902685](https://really-wild-clothing-company.myshopify.com/products/isabella-cropped-wool-blend-boucle-jacket?pr_prod_strat=e5_desc&pr_rec_id=8c34f6d30&pr_rec_pid=10005208629597&pr_ref_pid=10005210399069&pr_seq=uniform?variant=54409669902685) ![Screenshot 2024-11-04 at 12.55.22.png|748x717](upload://kX74i0Mw1Ho4mJzh1f3KtdIwyCx.png) ![Screenshot 2024-11-04 at 12.57.03.png|704x56](upload://ef6OTAZmiZNpAWypsFui4ICFvVq.png)
2

this doesn’t work either:

{% if product.metafield.custom.complete_the_look_products != blank %}

#shopify-section-template--23961742377309__featured_products_8BPVfh { display: block; /* Ensure it displays if products are present */ }

{% else %}

#shopify-section-template--23961742377309__featured_products_8BPVfh { display: none; /* Hide if no products are present */ }

{% endif %}

1 Like
3

Since it’s a list, i guess you can’t really compare it to a blank – this is for strings, you should check size.

But at least you can do this:

.section-featured-products {
  display: none;
}

.section-featured-products:has(product-card) {
  display: block;
}