How can I display the product name under the images using this code?

[skeltonmfc]

could some one tell me how i display the product name underneath the images i used this code ?

{
  "type": "related_products",
  "name": " :high_voltage: ️ Related Products",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Related Products"
    },
	{
      "type": "number",
      "id": "heading_font_size",
      "label": "Heading font size (px)",
      "default": 18
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading color",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "hover_border_color",
      "label": "Border color (hover)",
      "default": "#121212",
      "info": "Make color field blank (transparent) if you don't want a border"
    }
  ]
},

and

{%- when 'related_products' -%}
  {% if product.metafields.product_info.related_products %}
    {% assign relatedProducts = product.metafields.product_info.related_products.value %}
    <!-- check at least one recommended product is available --> 
    {%- liquid 
      assign has1product = false
      for prod in relatedProducts
        if prod.available == true
          assign has1product = true
        endif
      endfor
    -%}
    {% if has1product %}
      <p class="related-products-heading" style="font-size: {{block.settings.heading_font_size}}px; color: {{block.settings.heading_color}};">{{ block.settings.heading }}</p>
      <div class="related-products" id="related-products-{{ block.id }}">
        {% for prod in relatedProducts %}
          {% if prod.available == true %}
            <a href="{{ prod.url }}" class="related-product" aria-label="{{prod.title}}" title="{{ prod.title }}">
              <img class="related-product__image" src="{{ prod.images[0] | img_url: '500x' }}" alt="{{ prod.title }}">
            </a>
          {% endif %}
        {% endfor %}
      </div>
      <style>
        #related-products-{{ block.id }} {
          text-align: left;
          display: flex;
          flex-wrap: wrap;
        }
        #related-products-{{ block.id }} .related-product {
          display: inline-block;
          width: calc(25% - 0.4rem);
          margin: 0px 0.4rem 0.8rem 0px;
          position: relative;
          border: 1px solid transparent;
          text-align: center;
        }
        #related-products-{{ block.id }} .related-product:last-child {
          margin-right: 0;
        }
        #related-products-{{ block.id }} .related-product__image {
          width: 100%;
          max-width: 100%;
          height: 100%;
          object-fit: cover;
        }
        #related-products-{{ block.id }} .related-product:hover {
          border-color: {{ block.settings.hover_border_color }};
        }
      </style>
    {% endif %}
  {% endif %}

[suyash1]

@skeltonmfc - I think this is where you fetch images, so you can try to add name in this section and check, I have added line {{ prod.title }} in below code, please check

        {% for prod in relatedProducts %}
          {% if prod.available == true %}
            
              

{{ prod.title }}
            
          {% endif %}
        {% endfor %}
      

[skeltonmfc]

thanks for the suggestion,

that seems to make the images longe and i think the product title is there but its being cut out

[skeltonmfc]

here is the screen shot

[suyash1]

@skeltonmfc - you will need to adjust css to show title… yes it is cut

[skeltonmfc]

Would you be able to point me in the right direction to adjust it ?

[suyash1]

@skeltonmfc - can you share this page link?

[skeltonmfc]

Hi yes it’s https://nativeself.co.uk/products/copy-of-holistic-transformation-coaching?variant=45158310641954

Password 1885

[suyash1]

@skeltonmfc - take name down again and add this cs to the end of your theme.css file and check

.product-single__details .related-products{overflow: initial;}