Referencing a product in Shopify - shopify

Question

I'm developing a Shopify website for a client who wasn't happy with the native related products section.
I started developing a custom section where my client can choose the products to display.
The only problem is I'm having a hard time find documentation relative to the product object. Or at least not understanding it well.
In my schema I added a product setting which allows to choose the product I want:
{
"type": "product",
"label": "Produit 1",
"id": "produit_premier"
}
This works fine, but the only output I'm getting is the name of my product.
How can I achieve displaying the product image?
Thanks for your help!

Answer 1

When you use the input type product in Shopify it returns to your handle of the product.
You need to use the all_products object to get more information regarding the product.
Update: you can use it like
This is the settings json code:

Answer 2

[UPDATED - FINAL]
Finished working on this, here's the final code:
<!-- GETS PRODUCT HANDLE AND ASSIGNS TO VARIABLE -->
<div class="hidden">
{% assign product = section.settings.produit_quatrieme %}
</div>
<!-- GETS PRODUCT FIRST IMAGE + LINK -->
{% for image in all_products[product].images %}
{% if forloop.first == true %}
<a href=" {{ all_products[product].url }} ">
<img src="{{image.src | img_url:"grande"}}" />
</a>
{% endif %}
{% endfor %}
<!-- GETS PRODUCT TITLE + LINK -->
{% for title in all_products[product].title %}
{% if forloop.first == true %}
<a href=" {{ all_products[product].url }} ">
<h2 class="ProductItem__Title Heading margin-none"> {{ all_products[product].title }} </h2>
</a>
{% endif %}
{% endfor %}

Answer 3

Add schema code to the section blocks instead of section settings. Then you can select as many products as you want.
{% for block in section.blocks %}
{% assign product = all_products[block.settings.produit_quatrieme] %}
<a href=" {{ product.url }} ">
<img src="{{product.featured_image| img_url:"grande"}}" />
</a>
<a href=" {{ product.url }} ">
<h2 class="ProductItem__Title Heading margin-none"> {{ product.title }} </h2>
</a>
{% endfor %}
If you want to display a single product then just add section instead of block, then no need to use for loop.