Referencing a product in 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.