Shopify Question posted in
The Shopify help center can be found here.

Referencing a product in Shopify

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!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    [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 %}

  2. 0

    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.
    enter image description here

    Update: you can use it like
    enter image description here

    This is the settings json code:
    enter image description here

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search