Solved

metafield collections on collection page

alanrichardtex
Excursionist
38 2 2

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

 

Screenshot 2024-05-26 at 6.19.05 PM.pngScreenshot 2024-05-26 at 6.18.35 PM.png

Accepted Solution (1)
alanrichardtex
Excursionist
38 2 2

This is an 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>

 

 

View solution in original post

Replies 7 (7)

race_
Shopify Partner
3 0 0

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
Excursionist
38 2 2

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

Screenshot 2024-05-26 at 7.35.29 PM.png

EBOOST
Shopify Partner
952 256 291

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>

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
alanrichardtex
Excursionist
38 2 2

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
Shopify Partner
952 256 291

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>

EBOOST_0-1716792229561.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
alanrichardtex
Excursionist
38 2 2

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
Excursionist
38 2 2

This is an 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>