How to hide a section in product page when metafielcd is empty.

[AMSTG]

Hello,

How can I hide a section in product page when metafield is empty?

(1) I wanna add an image in product page by using slideshow section with dynamic source {{product.metafields.custom.imagebanner}}. However, for products that don't have metafield value, it shows the section template on website which looks weird. Is there anything I can do to hide the entire section for certain products if their metafield is empty?

^ what it shows when metafield is empty.

Besides, (2) I also tried to use custom liquid section, but I got another problem is that the image display is not responsive. It cropped the image when viewing from mobile or smaller devices

The code I tried:

{% if product.metafields.custom.imagebanner != blank %}

<p style="text-align: center;">{{product.metafields.custom.imagebanner | image_url: width: "600" | image_tag}}</p>

{% endif %}

^ image cropped on mobile devices.

Much appreciated if you can solve either (1) or (2). Thank you in advance!

[irene-vintage]

Hello @AMSTG ,

Here is some suggestions you can try to take:

• Go to Online Store -> Theme -> Actions -> Edit code

• Go to Templates -> product.liquid
• Locate the section that contains the slideshow code.
• Wrap the entire section code in a conditional statement that checks if the product has a value for the metafield. The code should look like this:

{% if product.metafields.custom.imagebanner != blank %}
  <!-- Slideshow section code goes here -->
{% endif %}

• To make the image responsive, you can add some CSS to your theme. You can:
• Repeat step 1
• Go to Assets -> template-collection.css -> add the following code:

img {
  max-width: 100%;
  height: auto;
}

Save and preview. 

Hope this can help.

Ali Reviews team.

[AMSTG]

Thanks for your reply. I tried both solutions but they don't work. Did I place the codes correctly?

(wrap the section with if codes)

^ Did I place the codes at the right place? It doesn't allow me to save.

(make image responsive)

^ added at the bottom of template-collection.css, but the image is still cropped in mobile view.

[mohammed_joynal]

If you're still looking for a solution—or if anyone else is facing the same issue—I recently made a tutorial on how to hide sections, blocks, or tabs dynamically in Shopify when a metafield is empty. Instead of displaying blank fields, you can use a simple Liquid condition to ensure only relevant information appears on each product page.

Check out the video here: https://youtu.be/lmwSaVsbAB0

Hope this helps! Let me know if you have any questions.