Why isn't my custom block image picker functioning properly?

Technical Q&A
,
1

Hello, I am having issues with the custom shopify section I have been developing. I am fairly new as well and this is the first time i’m developing a section that contains 2 image pickers. I want one to be able to pass a regular image, and the second to pass an icon (formatted as a png).

My code appears to be fine, but the moment I try to link the image to the block, the image appears to be broken for some reason. Here’s a screenshot:

Viiictoria_0-1709631974558.png
Viiictoria_0-1709631974558.png253×207 4.78 KB

I will leave parts of my code, but as I said i don’t really understand what is happening. Also I have tried different images as well, random ones as well as the free to use ones shopify offers to see if it was the images itself causing the issue, but I doubt it:

<body>
    <main class="rowSalePoint">
      <section class="sale-point-section">
        <p>{{ section.settings.desc }}</p>
      </section>
      {% for block in section.blocks %}
        <section class="contentBlock">
          {% if block.settings.img %}
            <img
              class="saleImg"
              src="{{ block.settings.img | asset_url }}"
              alt="Sale Image"
              width="276"
              height="189"
            >
          {% endif %}
          {% if block.settings.icon %}
            <img
              class="saleIcon"
              src="{{ block.settings.icon | asset_url }}"
              alt="Icon"
              width="43.56"
              height="43.56"
            >
          {% endif %}
          <p class="percentage">
            {{ block.settings.numbPercent -}}
            <span>%</span>
          </p>
          <h5 class="titleSP">{{ block.settings.saleTitle }}</h5>
          <p class="descSP">{{ block.settings.salesDesc }}</p>
        </section>
      {% endfor %}
    </main>
  </body>

here is the schema code:

{% schema %}
{
  "name": "BWQuickPoints",
  "settings": [
    {
      "type": "richtext",
      "label": "General Description",
      "id": "desc",
      "default": "<p>Add description for this section</p>"
    }
  ],
  "presets": [
    {
      "name": "BW - Sale Points"
    }
  ],
  "blocks": [
    {
      "type": "salepoint",
      "name": "Sale point",
      "settings": [
        {
          "type": "image_picker",
          "label": "Sale image",
          "id": "img"
        },
        {
          "type": "image_picker",
          "label": "Icon",
          "id": "icon"
        },
        {
          "type": "text",
          "label": "Percentage Number",
          "id": "numbPercent",
          "default": "100"
        },
        {
          "type": "text",
          "label": "Sale title",
          "id": "saleTitle",
          "default": "Here's the column sale title"
        },
        {
          "type": "richtext",
          "label": "Sale Description",
          "id": "salesDesc",
          "default": "<p>Here's the column sale description</p>"
        }
      ]
    }
  ]
}
{% endschema %}

If it helps, I am currently developing over the Dawn theme.

Thanks in advance!

2

Hello @Viiictoria ,

I have tested your code and found some minor mistakes in your image tag filter. Please try the updated code above.
1 Like
3

Thank you so much! it seems to work now, could you please explain what was wrong with my code? I want to know so I dont make the same mistake anymore

4

You’re welcome. You have used the wrong filter for the image tag, which is

asset_url

The correct filter should be

img_url: 'master'
1 Like
5

I recommend you use image_url instead of asset_url