Shopify - Adding choosable related products on product page

Question

I am creating a new custom section and I would like to add different kind of blocks in it. But I can't find any list of the existing / available / native blocks types (block.type).

EDIT : I was looking for available "specialized input settings" and not "block types". Here the related documentation !

My final goal would be to add meta field to the product entity, allowing an admin to pick a selection of products from an existing product, then to bind this meta product field, to a 'products' block type in my new custom section.

EDIT : Added a solution in reply.

Answer 1

Alright, so thanks to @Onkar and Patrick from discord, here the related documentation : https://shopify.dev/themes/architecture/settings/input-settings#specialized-input-settings

In order to do what I described above, I created a dedicated new meta field "related_product" for product entities : Backend > Settings > Metafields > Custom fields > Products (type Product : List of products).

Then I created a new section in my theme files (sections/product-related.liquid) :

{%- liquid
    assign grid = section.settings.per_row
-%}

{% unless section.settings.product_list == empty %}
    <div class="product-recommendations row" data-product-id="{{ product.id }}">
            <div class="section-title {% if settings.section_titles == 'lines' %}lines {% elsif settings.section_titles == 'btm_border' %}btm_border {% endif %} desktop-12 tablet-6 mobile-3">
                <h2>{{ section.settings.heading }}</h2>
            </div>
        <div class="product-loop">
            {%- for product in section.settings.product_list limit: section.settings.limit -%}
                <div class="product product-index js-product-listing">
                    {% render 'product-listing', template: 'product', product: product %}
                </div>
            {%- endfor -%}
        </div>
    </div>
{% endunless %}

{% schema %}
    {
        "name": "Related Products",
        "settings": [
            {
                "type": "text",
                "id": "heading",
                "label": "Heading",
                "default": "You may also like"
            },
            {
                "type": "product_list",
                "id": "product_list",
                "label": "Products",
                "limit": 12
            },
            {
                "type": "range",
                "id": "per_row",
                "min": 2,
                "max": 4,
                "step": 1,
                "label": "Products per row",
                "default": 4
            },
            {
                "type": "range",
                "id": "limit",
                "min": 2,
                "max": 6,
                "step": 1,
                "label": "Products shown",
                "default": 4
            }
        ],
        "presets": [
            {
                "name": "Related Products"
            }
        ],
        "templates": [
            "product"
        ]
    }
{% endschema %}

{% stylesheet %}
    .product-recommendations .product-loop {
        margin: 20px auto;
        display: grid;
        width: 100%;
        margin-left: 1.04166667%;
        margin-right: 1.04166667%;
        grid-template-columns: repeat({{ grid }}, 1fr);
        grid-row-gap: 25px;
        grid-column-gap: 40px;
    }
    @media screen and (min-width: 741px) and (max-width: 980px){
        .product-recommendations .product-loop {
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }
    }
    @media screen and (max-width: 740px){
        .product-recommendations .product-loop {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 10px;
            margin: 0 auto;
        }
    }
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

After that I was able to add the section to my product template from Theme customisation. Last thing to do was to map / bind my custom meta field to the 'product_list' block / input. And voila !