How can I add sections to a collection page?

Technical Q&A
1

Hello
I would like help with being able to add sections to the collection page!

Skärmbild1.png
Skärmbild1.png289×637 15.9 KB

Here is the collections.liquid file


    

        

            {%- if section.settings.title != blank -%}
                ## 
                    
                        {{ section.settings.title }}
                    
                
            {%- endif -%}
            
                {%- if section.blocks.size > 0 -%}
                    

                        {% for block in section.blocks %}
                            {%- assign proCollection = block.settings.collection_handle -%}
                            {%- if proCollection != blank -%}
                                

                                    

                                        

                                            
                                                {%- if block.settings.image != blank -%}
						        {% include 'image-global' with image: block.settings.image %}	
                                                {%- else -%}
                                                    {%- if collections[proCollection].image -%}
                                                        {% include 'image-global' with image: collections[proCollection].image %}
                                                    {%- else -%}
                                                        
                                                    {% endif %}
                                                {%- endif -%}
                                            
                                        

                                        
                                            {%- if block.settings.title != blank  or proCollection != blank -%}
                                                #### 
                                                    
                                                        {%- if block.settings.title != blank %}
                                                            {{ block.settings.title }}
                                                        {% else  %}
                                                            {{ collections[proCollection].title }}
                                                        {% endif %}
                                                    
                                                
                                            {%- endif -%}
                                        

                                    

                                

                            {%- endif -%}
                        {% endfor %}
                    

                {%- endif -%}
                {%- if section.settings.text_note != blank -%}
                    {{ section.settings.text_note }}

                {%- endif -%}
            

        

    

{% schema %}
    {
        "name": "Vela Collection Info",
        "class": "velaFramework",
        "settings": [
            {
                "type": "header",
                "content": "Design Section"
            },
            {
                "type": "checkbox",
                "id": "full_with",
                "label": "Enabel Full Width?"
            },
            {
                "type": "color",
                "id": "color_bg",
                "label": "Background Color",
                "default": "rgba(0,0,0,0)"
            },
            {
                "type": "text",
                "id": "padding_block",
                "label": "Padding",
                "placeholder": "0px 0px"
            },
            {
                "type": "header",
                "content": "General Settings"
            },
            {
                "type": "text",
                "id": "title",
                "label": "Heading"
            },
            {
                "type": "text",
                "id": "text_note",
                "label": "Note"
            }
        ],
  "presets": [
    {
                "type": "item",
                "name": "Collection",
                "settings": [
                    {
                        "type": "collection",
                        "id": "collection_handle",
                        "label": "Collection"
                    },                    
                    {
                        "type": "text",
                        "id": "title",
                        "label": "Box heading"
                    },
                    {
                        "type": "image_picker",
                        "id": "image",
                        "label": "Box image"
                    }
                ]
            }
  ],
        "blocks": [
            {
                "type": "item",
                "name": "Collection",
                "settings": [
                    {
                        "type": "collection",
                        "id": "collection_handle",
                        "label": "Collection"
                    },                    
                    {
                        "type": "text",
                        "id": "title",
                        "label": "Box heading"
                    },
                    {
                        "type": "image_picker",
                        "id": "image",
                        "label": "Box image"
                    }
                ]
            }
        ]
      
    }
{% endschema %}
2

G’day mate!!

It looks like the code you posted was the collection section (sections/collection.liquid). I would presume that your current collection page is a .liquid template (in the templates directory).

You will need to create a new collection.json template to add dynamic sections.

Be warned!! You will have to re-add the setting to the new sections if you change over to a .json template. Your current data could be lost and the store could break. Make a duplicate of the live theme to make changes to, and then publish once done.

3

Thank you for your reply
could you please give a deeper explanation how I do?

4

This would be the steps you would need to take:

  1. Login to Shopify backend
  2. Online Store > Themes
  3. On the live theme, Actions > Duplicate
  4. On the duplicate theme, Actions > Edit Code
  5. Templates > Add new template
  6. Enter: Collection, JSON, collection.new.json
  7. Back to Online Store > Themes
  8. On the duplicate theme, Customize
  9. Top box, Collection > collection.new
  10. Add old + sections and all data to collection.new
  11. Product > Collection select template > collection.new
2 Likes
5

Hello
When I make a new json file named collection.new.json it is empty!

6

That is intentional!

The new json templates require you to put in the sections you require by going into the Customize section and adding them in.

Read more about it here

1 Like
7

Thanks, it’s fixed!

1 Like
8

Beautiful!

Glad I could help :slightly_smiling_face:

Happy selling!

1 Like