Ok, I’ll bite! But only because I still don’t get it and appreciate you answering (thanks!) 
So here’s the contents of my index.json (as per Dawn) -
{
"sections": {
"image_banner": {
"type": "image-banner",
"blocks": {
"heading": {
"type": "heading",
"settings": {
"heading": "Talk about your brand"
}
},
"button": {
"type": "buttons",
"settings": {
"button_label_1": "Shop all",
"button_link_1": "shopify:\/\/collections\/all",
"button_style_secondary_1": false,
"button_label_2": "",
"button_link_2": "",
"button_style_secondary_2": false
}
}
},
"block_order": [
"heading",
"button"
],
"settings": {
"desktop_text_box_position": "flex-end",
"color_scheme": "background-1",
"stack_images_on_mobile": true,
"adapt_height_first_image": false
}
},
"featured_products": {
"type": "featured-collection",
"settings": {
"title": "Featured products",
"collection": "",
"products_to_show": 4,
"show_view_all": true,
"swipe_on_mobile": false,
"image_ratio": "adapt",
"show_secondary_image": false,
"add_image_padding": false,
"show_vendor": false
}
},
"image_text": {
"type": "image-with-text",
"blocks": {
"heading": {
"type": "heading",
"settings": {
"heading": "Image with text"
}
},
"text": {
"type": "text",
"settings": {
"text": "
Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>"
}
},
"button": {
"type": "button",
"settings": {
"button_label": "Button label",
"button_link": ""
}
}
},
"block_order": [
"heading",
"text",
"button"
],
"settings": {
"height": "adapt",
"color_scheme": "background-1",
"layout": "image_first"
}
}
},
"order": [
"image_banner",
"featured_products",
"image_text"
]
}
Here’s a grab of my index / home in ‘Customize’ -
That makes sense, I can see how it relates to the json. Now if I click add section I see:
None of these are referenced in index.json - so let’s look at some of the sections themselves (because how does it know to show all those?). Here’s a short one, custom-liquid.liquid -
{{ section.settings.custom_liquid }}
{% schema %}
{
"name": "t:sections.custom-liquid.name",
"tag": "section",
"class": "spaced-section",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label"
}
],
"presets": [
{
"name": "t:sections.custom-liquid.presets.name"
}
]
}
{% endschema %}
Ok, so I can’t see anywhere in there that say where this can and can’t be used (as per https://shopify.dev/themes/architecture/sections/section-schema#templates - “templates”: [“article”, “index”, “page”, “product”] - for instance). So maybe this can be used everywhere, right, which is why we see it in that list on the index?
But then look at the liquid for product-recommendations.liquid -
{% javascript %}
class ProductRecommendations extends HTMLElement {
constructor() {
super();
const handleIntersection = (entries, observer) => {
if (!entries[0].isIntersecting) return;
observer.unobserve(this);
fetch(this.dataset.url)
.then(response => response.text())
.then(text => {
const html = document.createElement('div');
html.innerHTML = text;
const recommendations = html.querySelector('product-recommendations');
if (recommendations && recommendations.innerHTML.trim().length) {
this.innerHTML = recommendations.innerHTML;
}
})
.catch(e => {
console.error(e);
});
}
new IntersectionObserver(handleIntersection.bind(this), {rootMargin: '0px 0px 200px 0px'}).observe(this);
}
}
customElements.define('product-recommendations', ProductRecommendations);
{% endjavascript %}
{% schema %}
{
"name": "t:sections.product-recommendations.name",
"tag": "section",
"class": "spaced-section",
"settings": [
{
"type": "header",
"content": "t:sections.product-recommendations.settings.header__1.content",
"info": "t:sections.product-recommendations.settings.header__1.info"
},
{
"type": "text",
"id": "heading",
"label": "t:sections.product-recommendations.settings.heading.label",
"default": "You may also like"
},
{
"type": "header",
"content": "t:sections.product-recommendations.settings.header__2.content"
},
{
"type": "select",
"id": "image_ratio",
"label": "t:sections.product-recommendations.settings.image_ratio.label",
"default": "adapt",
"options": [
{
"value": "adapt",
"label": "t:sections.product-recommendations.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.product-recommendations.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.product-recommendations.settings.image_ratio.options__3.label"
}
]
},
{
"id": "show_secondary_image",
"type": "checkbox",
"default": false,
"label": "t:sections.product-recommendations.settings.show_secondary_image.label"
},
{
"id": "add_image_padding",
"type": "checkbox",
"default": false,
"label": "t:sections.product-recommendations.settings.add_image_padding.label"
},
{
"id": "show_vendor",
"type": "checkbox",
"default": false,
"label": "t:sections.product-recommendations.settings.show_vendor.label"
}
]
}
{% endschema %}
No mention of templates in this one either, right? But this section isn’t in the list on the index page.
Why?!!
Genuinely appreciate the help - I’m sure I’m missing something simple/obvious - but I’ve had a lot of late nights recently and it’s not sinking in…
That’s connected the dots for me!
