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 %}

{{product.metafields.custom.imagebanner | image_url: width: "600" | image_tag}}

{% 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 %}
  
{% 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.