I want to add a custom section into mt collections page

[Pickleball2]

I have a custom section that uses metatags to read info for collections page, but not sure how to add to the collections.json

[Moeed]

Hey @Pickleball2

Welcome to the community!

Just to confirm, do you want to add that specific section in the Default Collection template? If yes, then what exactly the issue you’re facing? Let me know.

Best,
Moeed

[Pickleball2]

I created a new collections template based on the original. I just need to figure out the text to add the section to the new template json

[Laza_Binaery]

Hi @Pickleball2

Think you need to add text/code to a section and not directly to collection.json. So, if you have collection-banner.liquid or to sections you already have, add it there. Or just create a new simple section or copy of an existing section so it does not appear on other templates.

[Pickleball2]

Thank you I will give that a try.

[Pickleball2]

OK, maybe I am not explaining this correctly. I have created a new section that has metadata tags in it saying if they have data show the section if not just leave blank. I need to call this section in my revised collection template. Any suggestions on adding this section?

[PaulNewton]

Hi @Pickleball2 If you need this customization done then reach out to me for services.
Click my profile pic for options to connect.
ALWAYS please provide context in ALL new correspondence., examples: this post url(s) , store url, theme name, , or any further detail .

@Pickleball2

I have created a new section that has metadata tags

Probably mean metafields and liquid condition logic. The logic should go in a main-collection.liquid or some such the JSON section should reference.

[ajaycodewiz]

Hey @Pickleball2,

@Laza_Binaery is right, you don’t put Liquid/metafield logic in the JSON template itself.
The JSON template only lists which sections render and in what order - all the actual
markup and metafield conditionals live in the section file.

Here’s the exact wiring for an Online Store 2.0 theme (Dawn and anything Dawn-based):

1. Your section file (e.g. sections/collection-metafield-banner.liquid) does the
   metafield check and only outputs markup when there’s data:

{% if collection.metafields.custom.promo_banner.value != blank %}
  <div class="page-width">
    <div class="collection-metafield-banner color-{{ section.settings.color_scheme }}">
      {{ collection.metafields.custom.promo_banner.value }}
    </div>
  </div>
{% endif %}

{% schema %}
{
  "name": "Metafield promo banner",
  "settings": [
    { "type": "color_scheme", "id": "color_scheme", "label": "Color scheme", "default": "scheme-2" }
  ],
  "presets": [{ "name": "Metafield promo banner" }]
}
{% endschema %}

2. Your collection JSON template just references that section by its filename
   (minus .liquid) under a unique key, and adds that key to order:
   Here you will be adding metafield-promo part. The rest were cloned from the existing collection template.

{
  "sections": {
    "banner": { "type": "main-collection-banner", "settings": { "...": "..." } },
    "metafield-promo": {
      "type": "collection-metafield-banner",
      "settings": { "color_scheme": "scheme-2" }
    },
    "product-grid": { "type": "main-collection-product-grid", "settings": { "...": "..." } }
  },
  "order": ["banner", "metafield-promo", "product-grid"]
}

“type” has to match the section filename exactly (collection-metafield-banner.liquid
→ “type”: “collection-metafield-banner”). The key you pick for it in “sections”
(metafield-promo here) is just an internal id, put that same string in "order"
wherever you want it to render.

3. Apply the template. Save the JSON as “templates/collection..json”
   (e.g. “collection.metafield-promo.json”), then on the collection go to
   Online Store > Collections > (your collection) > Theme template and pick it from
   the dropdown.
   

   
   
   Note: In the Theme template dropdown, change from “Default template” to “metafield-promo” .

4. Set the metafield: Add a collection metafield definition (Settings → Custom data
   → Collections), give it namespace/key “custom.promo_banner” (or whatever you use in the section), fill it in on a collection, and the section appears - leave it blank and the {% if %} keeps it out of the page entirely, no empty div.

Tested on a Dawn store: with the metafield blank the section renders nothing, with a value set the banner shows between the collection banner and the product grid, in the position and order I put it in the JSON.

If you paste your actual section code I can point out anything specific to your setup.

[devcoders]

Hi @Pickleball2

Has your issue been resolved, or is it still pending?

Best regards,
Devcoder

[Pickleball2]

Sorry got called out of town. Still having a problem. Here is code I have and getting a file save error.

Section is called pbb-collection-hero-carousel.liquid

code is

*/

{

“sections”: {

"carousel": {

  "type": "pbb-collection-hero-carousel",

  "settings": { "color_scheme": "scheme-053ea910-6eb4-4198-8577-e17b5ab7c241" }

},

"banner": {

  "type": "main-collection-banner",

  "settings": {

    "show_collection_description": false,

    "show_collection_image": false,

    "color_scheme": "scheme-053ea910-6eb4-4198-8577-e17b5ab7c241"

  }

},



"product-grid": {

  "type": "main-collection-product-grid",

  "settings": {

    "products_per_page": 16,

    "columns_desktop": 4,

    "color_scheme": "scheme-3d15634b-0baa-4ff1-ad0f-9827dfe07203",

    "image_ratio": "portrait",

    "image_shape": "default",

    "show_secondary_image": true,

    "show_vendor": false,

    "show_rating": false,

    "quick_add": "none",

    "enable_filtering": true,

    "filter_type": "horizontal",

    "enable_sorting": true,

    "columns_mobile": "2",

    "padding_top": 36,

    "padding_bottom": 36

  }

}

},

“order”: [

"carousel"

"banner",

"product-grid"

]

}

Not sure what I am missing

[Laza_Binaery]

Why are you focused on collection JSON code?

Any reason you can not just add that carousel in theme cusrtomizer?

And any error when you do save that file?

[Pickleball2]

@Pickleball2

getting a file save error.

and I only want it to appear if the metafield is populated

[Laza_Binaery]

Ok then, can you share a code from pbb-collection-hero-carousel.liquid ?

[Pickleball2]

pbb-collection-hero-carousel.liquid

{% if collection.metafields.custom.hero_images.value != blank %}

{% render ‘collection-hero-carousel’ %}

{% elsif collection.image %}

{% render ‘collection-featured-image’ %}

{% else %}

{% render ‘collection-header’ %}

{% endif %}

[Laza_Binaery]

Ok a few things to check. You have 3 render blocks but are you sure that all collection-hero-carousel, collection-featured-image, and collection-header are snippets? And not sections themselves?

If all that is good, you can add schema code to the end so it does show in section list in theme customizer.

{% if collection.metafields.custom.hero_images.value != blank %}

  {% render 'collection-hero-carousel' %}

{% elsif collection.image %}

  {% render 'collection-featured-image' %}

{% else %}

  {% render 'collection-header' %}

{% endif %}

{% schema %}
{
  "name": "Collection Hero",
  "settings": [],
  "presets": [
    {
      "name": "Collection Hero"
    }
  ]
}
{% endschema %}

[Pickleball2]

OK, think I am moving in the right direction. They are not snippets or sections. I was given this code for the section and told to put in a new collection template. I think they left out several steps. I did add the schema and get error message

Liquid error (sections/pbb-collection-hero-carousel line 6): Could not find asset snippets/collection-header.liquid

[Laza_Binaery]

Not sure if it is right direction but at lest we are moivng

{% render 'collection-header' %}

this code say render content from snippets/collection-header.liquid file. But the error says you do not have that file. So maybe the code you were given was meant for some other theme.

Note you did not mention what theme you have and also sharing your store link can help.

But as a test you can just remove that line

{% render 'collection-header' %}

and see what is happening. Also check the snippets folder and see if you have some other snippet that could be used. For example, your theme could have collection-banner, but also check what the original collection template is using.

[Pickleball2]

Dawn 2.0 and www.pickleballbella.com

[Maximus3]

It sounds like there are some missing pieces, and there is some misunderstanding. Just in case you are confused here are some general rules you can follow to find, verify, and change what you need to do.

1. The JSON template contains NO liquid code. Liquid code doesn’t belong in the JSON template. The JSON has very specific format. Look at this Collection template. It contain only 2 sections, then lists the order of the sections:

   

2. The main-collection-banner section is in the Sections folder. This file contains the liquid code.

   

3. In main-collection-product-grid, there is a “render” line. This means it calls a Snippet from the Snippets folder. This is how Snippets work. They must be rendered in the section code.

   

4. Loading-spinner.liquid is a Snippet, so you will find it in the Snippets folder. Snippets are also liquid files containing liquid and html and javascript if need be.

   

So the Template says what Sections are there and in what order. The Sections have the code, and also render the Snippet. This is how it is usually done. No matter what you are adding, you can always come back to this basic concept.

There are other things to keep in mind, like Sections having Schema code at the bottom for being able to control the settings in the theme editor, while Snippets do not.

Also, a simple liquid code to render some snippets, could be done directly in the theme editor by adding a Custom Liquid Section and pasting your code there:

Either way you do it, remember that the Section is the primary code holder. If you have a Snippet, it must be rendered in a section.