Metafield collections on collection page

Store Design
, ,
1

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.png
Screenshot 2024-05-26 at 6.19.05 PM.png3600×2338 598 KB

Screenshot 2024-05-26 at 6.18.35 PM.png
Screenshot 2024-05-26 at 6.18.35 PM.png3600×2338 738 KB

2

Hey Alan! Here is long shot!

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

{% if metafield_collections != blank %}
  
    {% for collection_handle in metafield_collections %}
      {% assign collection = collections[collection_handle] %}
      {% if collection != blank %}
        

          
            

              
            

            {{ collection.title }}

          
        

      {% endif %}
    {% endfor %}
  

{% else %}
  

No collections found.

{% endif %}
3

Hi @alanrichardtex ,

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

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

    

        

            

                

                    ## 
                        Collection list
                    
                

            

        

    

    
        

            

                

                  {% for col in metafield_collections %}
                    

                        {% if col.image != blank %}
                        

                            

                                

                                    
                                        {{
                                            col.image
                                            | image_url: width: 3840
                                            | image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority
                                          }}
                                    
                                

                            

                        

                        {% endif %}
                        
                            ####  {{ col.title }}
                        

                    

                {% endfor %}
1 Like
4

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
Screenshot 2024-05-26 at 7.35.29 PM.png3600×2338 703 KB

5

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

    

        

            {% for col in metafield_collections %}
                

                    

                        

                            

                                
                                    
                                
                            

                        

                        
                        

                        #### {{ col.title }}
                    

                

            {% endfor %}
6

Hi @alanrichardtex ,

You try to add code below to top file?

EBOOST_0-1716792229561.png
EBOOST_0-1716792229561.png1381×714 148 KB

1 Like
7

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

    

        

            {% for col in metafield_collections %}
               

    

                        

                            
                                
                            
                        

                        
                            #### {{ col.title }}
                        

                    

                    
                

            {% endfor %}
8

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

    

        

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

        

            

                
                    

                
            

        

        
        
            #### {{ col.title }}
        

    

{% endfor %}