HELP Image uploaded using image_picker not displaying

New Member
7 0 0

Hi for some reason, the image I uplaoded using image picker (I created a section block and put image picker) is not displaying and only showing a no image icon

 

https://kingvlad.myshopify.com/pages/macbook-pro

 

heres my block section code

<div id="products">
  <div class="macbook">
        <img src="{{ section.settings.sampleid | img_url: '200x200' }}" />
    test - {{ product.title }}
  </div>
 
</div>
 
{% schema %}
{
  "name": "image",
"max_blocks": 3,
 
  "blocks": [
    {
      "type": "image",
      "name": "Product Image",
      "settings": [
        {
        "id": "product",
        "type": "image_picker",
        "label": "Product Image"
        },
{
"type": "product",
        "id": "sampleid",
        "label": "Product"
}
      ]
    }
  ]
}
 
{% endschema %}
 
{% stylesheet %}
{% endstylesheet %}
 
{% javascript %}
{% endjavascript %}

heres my template code for the page I created

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>

<div class="rte">
{{ page.content }}
</div>
</div>
</div>
</div>


{% section 'block-sample' %}

and no, im not asking someone for help WITH payment, Im asking here to learn. 

0 Likes
Astronaut
1014 131 241

Are you planning on using more than 1 image? That would be what you would use blocks for, and you have to loop through them. Like this with your code:

 

<div id="products">
  <div class="macbook">
    {% for block in section.blocks %}
        <img src="{{ block.settings.product | img_url: '200x200' }}" />
        test - {{ product.title }}
    {% endfor %}
  </div>
 
</div>
 
{% schema %}
{
  "name": "image",
"max_blocks": 3,
 
  "blocks": [
    {
      "type": "image",
      "name": "Product Image",
      "settings": [
        {
        "id": "product",
        "type": "image_picker",
        "label": "Product Image"
        },
{
"type": "product",
        "id": "sampleid",
        "label": "Product"
}
      ]
    }
  ]
}
 
{% endschema %}
 
{% stylesheet %}
{% endstylesheet %}
 
{% javascript %}
{% endjavascript %}

If you have any other questions about sections you can send me a direct message. I just recently learned more about them and developed one for a client that turned out pretty well, I learned a lot. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like