metafield collections on collection page

[alanrichardtex]

Hi, i am trying to get the metafields i made that contain multiple collections that should show as a grid or list on the page but i can't seem to figure out where to add the code. I was trying to add this code into collection list, but that didnt show them as collections you could click. 

The link i am trying to currently add it to. is https://alanrichardtextiles.com/collections/somfy-motors-shades-blinds-awnings-curtains-projectors

{% assign metafield_collections = collection.metafields.custom.metafield_collections.value %}

{% for collection in metafield_collections %}

  {{ collection.title }}

{% endfor %}

[race_]

Hey Alan! Here is long shot! 

{% assign metafield_collections = collection.metafields.custom.metafield_collections.value %}

{% if metafield_collections != blank %}
  <div class="collection-list">
    {% for collection_handle in metafield_collections %}
      {% assign collection = collections[collection_handle] %}
      {% if collection != blank %}
        <div class="collection-item">
          <a href="{{ collection.url }}">
            <div class="collection-image">
              <img src="{{ collection.image.src | img_url: 'medium' }}" alt="{{ collection.title }}">
            </div>
            <div class="collection-title">{{ collection.title }}</div>
          </a>
        </div>
      {% endif %}
    {% endfor %}
  </div>
{% else %}
  <p>No collections found.</p>
{% endif %}

[alanrichardtex]

shows up, but not how it should and doesnt pull the picture. Bottom is how collections normally look, and the stuff on the left is whats being pulled from the metafields

[EBOOST]

Hi @alanrichardtex ,

You try to add code to sections/main-collection-product-grid.liquid

{% assign metafield_collections = collection.metafields.custom.metafield_collections.value %}
<div class=" #section-body  @spaced ">
    <div class="#section-body-header">
        <div class="#container @width:default">
            <div class="#section-body-header-inner ">
                <div class="#hero gap-h4    @align:center @size:md " style=" --width: auto;  --gap: 0.5em;">
                    <h2 class="#hero-heading fs-d4 heading-font">
                        Collection list
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <div class="#container @width:default">
        <div class="#section-body-wrapper ">
            <div class="#section-body-content">
                <div class="#grid @type:columns" style="--columns: 5; --columns-mobile: 2;">
                  {% for col in metafield_collections %}
                    <div>
                        {% if col.image != blank %}
                        <div class="#collection-card shadow-hover-2-3  @inner-caption ">
                            <div class="#collection-card-image ">
                                <div class="#media @type: ar @type-mobile: ar @border-radius: inner " style=" --image-fit: cover; --ar-padding:100.0%;">
                                    <a href="{{ col.url }}">
                                        {{
                                            col.image
                                            | image_url: width: 3840
                                            | image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority
                                          }}
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        <div class="#collection-card-caption @position:inner-bottom-center">
                            <h4 class="#collection-card-title heading-font @text-bg "> <a href="{{ col.url }}">{{ col.title }}</a></h4>
                        </div>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

[alanrichardtex]

so between what you just sent me and messing with AI a bit, this is what i came up with. its pretty much what i want, but i can't get the titles to show up beneath each category. https://alanrichardtextiles.com/collections/somfy-motors-shades-blinds-awnings-curtains-screens 

{% assign metafield_collections = collection.metafields.custom.metafield_collections.value %}
<div class="#section-body" style="display: flex; justify-content: center;">
    <div class="#container @width:default">
        <div class="#section-body-wrapper" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; width: 100%;">
            {% for col in metafield_collections %}
                <div style="width: 100%; height: 200px; background-color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; margin: 5px;">
                    <div class="#collection-card shadow-hover-2-3 @inner-caption" style="width: 100%;">
                        <div class="#collection-card-image" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;">
                            <div class="#media @type: ar @type-mobile: ar @border-radius: inner" style="--image-fit: cover; --ar-padding:100%;">
                                <a href="{{ col.url }}">
                                    <img src="{{ col.image | image_url }}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                </a>
                            </div>
                        </div>
                        <div class="#collection-card-caption @position:outer-bottom-center" style="padding: 10px; text-align: center;">
                        </div>
                        <h4 class="#collection-card-title heading-font @text-bg"><a href="{{ col.url }}">{{ col.title }}</a></h4>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

[EBOOST]

Hi @alanrichardtex ,

You try to add code below to top file?

<style>
.\#section-body .\#section-body-wrapper > div {
	height: auto!important;
	border-radius: var(--border-radius-base);
}
.\#collection-card.\@inner-caption,
.\#collection-card-title.\@text-bg {
	box-shadow: 0 0 0!important;
}
.\#collection-card-title.\@text-bg a{
	color: var(--color-g-text);
	text-decoration: none;
}

.\#collection-card.\@inner-caption {
	height: 100%;
}
.\#collection-card .\#collection-card-image {
	margin-bottom: auto;
}
</style>

[alanrichardtex]

that didnt work still. but i actually got it to work now using this code. 

thank you for the help!

{% assign metafield_collections = collection.metafields.custom.metafield_collections.value %}
<div class="#section-body" style="display: flex; justify-content: center;">
    <div class="#container @width:default">
        <div class="#section-body-wrapper" style="width: 100%; display: flex; flex-wrap: wrap; justify-content: space-around;">

            {% for col in metafield_collections %}
               <div style="width: calc(50% - 10px); max-width: 200px; margin: 5px; background-color: white; display: flex; flex-direction: column; justify-content: space-between; border-radius: 10px; border: 3px solid #FFF;">
    <div class="#collection-card shadow-hover-2-3 @inner-caption" style="width: 100%; display: flex; flex-direction: column;">
                        <div class="#collection-card-image" style="width: 100%; aspect-ratio: 1/1;">
                            <a href="{{ col.url }}">
                                <img src="{{ col.image | image_url }}" style="width: 100%; height: 100%; object-fit: contain;">
                            </a>
                        </div>
                        <div class="#collection-card-caption @position:outer-bottom-center" style="padding: 10px; text-align: center;">
                            <h4 class="#collection-card-title heading-font @text-bg" style="color: black; text-decoration: none;"><a href="{{ col.url }}" style="color: black; text-decoration: none;">{{ col.title }}</a></h4>
                        </div>
                    </div>
                    <!-- Additional Space for Text Visibility Below Image -->
                </div>
            {% endfor %}

        </div>
    </div>
</div>

[alanrichardtex · Accepted solution]

this is the final code i'll be using after i did some more editing to it. now everything looks pretty nice and neat. heres the code incase anyone else wants to use it for something similar. you can view how it looks on this page https://alanrichardtextiles.com/collections/somfy-motors-shades-blinds-awnings-curtains-screens

{% assign metafield_collections = collection.metafields.custom.metafield_collections.value %}
<div class="#section-body" style="display: flex; justify-content: center; border-radius: 15px; overflow: hidden;">
    <div class="#container @width:default">
        <div class="#section-body-wrapper" style="width: 100%; display: flex; flex-wrap: wrap; justify-content: space-around;">

           {% for col in metafield_collections %}
    {% assign imageSize = col.image | image_size %}
    {% assign imageWidth = imageSize[0] %}
    {% assign imageHeight = imageSize[1] %}
    {% assign maxImageSize = imageWidth | max: imageHeight %}
    {% assign backgroundSize = maxImageSize | append: "px" %}
    <div style="width: calc(50% - 10px); max-width: 200px; margin: 5px 5px 20px 5px; background-color: white; display: flex; flex-direction: column; border-radius: 15px; overflow: hidden;">
        <div class="#collection-card shadow-hover-2-3 @inner-caption" style="width: 100%; display: flex; flex-direction: column; border-radius: 15px; overflow: hidden;">
            <div class="#collection-card-image" style="width: 100%; height: 0; padding-top: 100%; position: relative; overflow: hidden; border-radius: 15px;">
                <a href="{{ col.url }}" aria-label="{{ col.title }}">
                    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white url('{{ col.image | image_url }}') no-repeat center center / contain; border: 7px solid white; border-radius: 15px;"></div>
                </a>
            </div>
        </div>
        <!-- Additional Space for Text Visibility Below Image -->
        <div class="#collection-card-caption @position:outer-bottom-center" style="padding: 10px; text-align: center; background-color: transparent;">
            <h4 class="#collection-card-title heading-font @text-bg" style="color: black; text-decoration: none;"><a href="{{ col.url }}" style="color: black; text-decoration: none;">{{ col.title }}</a></h4>
        </div>
    </div>
{% endfor %}


        </div>
    </div>
</div>