How to hide empty slides in a Dawn 12.0.0 slideshow section?

[Gumf]

I am populating a slideshow section using metafields on a page template that is used by multiple products. The problem is not all products utilise all 5 slides. Is there a way to hide a slide if the metafield is empty?

I am using Dawn 12.0.0.

Thank you

[BSS-Commerce]

Hi @Gumf ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[Gumf]

Hi 

Thanks for your reply. The website is: https://www.jddfurniture.com/ you can see the slider on the homepage. The product page in question isn't live yet and is currently on a backup so I can't send the exact link.

Thanks again

[BSS-Commerce]

Hi @Gumf ,

If you want to hide the slide when the metafile is empty, you can try the following

Insert this code into the liquid file where the slide appears

{% assign slide1 = page.metafields.product.metafield1 %}
{% assign slide2 = page.metafields.product.metafield2 %}
{% assign slide3 = page.metafields.product.metafield3 %}
{% assign slide4 = page.metafields.product.metafield4 %}
{% assign slide5 = page.metafields.product.metafield5 %}

<div class="slideshow">
  {% if slide1 != blank %}
    <div class="slide">{{ slide1 }}</div>
  {% endif %}
  
  {% if slide2 != blank %}
    <div class="slide">{{ slide2 }}</div>
  {% endif %}
  
  {% if slide3 != blank %}
    <div class="slide">{{ slide3 }}</div>
  {% endif %}
  
  {% if slide4 != blank %}
    <div class="slide">{{ slide4 }}</div>
  {% endif %}
  
  {% if slide5 != blank %}
    <div class="slide">{{ slide5 }}</div>
  {% endif %}
</div>

Or you can use a loop.

<div class="slideshow">
  {% for i in (1..5) %}
    {% assign slide = page.metafields.product["metafield" | append: i] %}
    {% if slide != blank %}
      <div class="slide">{{ slide }}</div>
    {% endif %}
  {% endfor %}
</div>

Hope it helps @Gumf  

[Gumf]

Hi 

Sorry for the late reply, I didn't see the message. So I have added the metafields as below:

{% assign slide1 = product.metafields.custom.slider_image_1 %}
{% assign slide2 = product.metafields.custom.slider_image_2 %}
{% assign slide3 = product.metafields.custom.slider_image_3 %}
{% assign slide4 = product.metafields.custom.slider_image_4 %}
{% assign slide5 = product.metafields.custom.slider_image_5 %}

<div class="slideshow">
  {% if slide1 != blank %}
    <div class="slide">{{ slide1 }}</div>
  {% endif %}
  
  {% if slide2 != blank %}
    <div class="slide">{{ slide2 }}</div>
  {% endif %}
  
  {% if slide3 != blank %}
    <div class="slide">{{ slide3 }}</div>
  {% endif %}
  
  {% if slide4 != blank %}
    <div class="slide">{{ slide4 }}</div>
  {% endif %}
  
  {% if slide5 != blank %}
    <div class="slide">{{ slide5 }}</div>
  {% endif %}
</div>

But I am struggling as to where to put the code. I have created a new product template which is using the slider, so do I add the code to the product template liquid file or another?

Thanks for your help.