How can I embed an image in a section block?

Technical Q&A

Topic summary

A Shopify developer is attempting to add image blocks to a custom section called “media-url-with-text” but wants to embed images via URL input rather than using Shopify’s standard image picker.

The Problem:

  • When trying to implement an image block with a URL field type, an error appears: “Invalid preset ‘Media-URL with text’: invalid block ‘image’: undefined block type”
  • The developer specifically wants to use metafield URLs to add images, not the built-in image selection interface

Attempted Solutions:

  • Another user suggested using image_picker type instead of url type for the block settings
  • This standard approach was tested but doesn’t meet the requirement since it uses Shopify’s image picker rather than URL input

Current Status:

  • The conversation has moved to direct email communication for personalized assistance
  • The core issue remains unresolved: how to configure a section block that accepts image URLs (potentially from metafields) rather than using Shopify’s native image picker
  • The provided code snippets contain some reversed/garbled text, making technical review challenging
Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hello at all,

i try to embed an Image in a Section block but it doesn´t work. Maybe someone can help me.

I am new with Shopify and need some help.

Here is the section block I want to add:

“blocks”: [
{
“type”: “image”,
“name”: “Image”,
“settings”: [
{
“type”: “url”,
“id”: “link”,
“label”: “Image”
},

]

and here is are my section-properties:

<div {% render ‘section-properties’ %}>


{%- for block in section.blocks -%}
<div id=“block-{{ section.id }}-{{ block.id }}” class=“media-with-text__item” {{ block.shopify_attributes }}>


{%- if block.type == ‘image’ -%}
{%- if block.settings.image != blank -%}
{%- assign width_ratio = 100.0 | divided_by: block.settings.media_width -%}
{%- assign maximum_image_width = settings.page_width | divided_by: width_ratio -%}

{%- capture sizes -%}(max-width: 999px) 100vw, min({{ maximum_image_width | ceil }}px, {{ block.settings.media_width }}vw){% endcapture %}

{{- block.settings.image | image_url: width: block.settings.image.width | image_tag: loading: ‘lazy’, sizes: sizes, widths: ‘300,400,500,600,700,800,1000,1200,1400,1600,1800,2000,2200,2400,2600’ -}}
{%- else -%}
{{- ‘image’ | placeholder_svg_tag: ‘aspect-short placeholder’ -}}
{%- endif -%}
{%- else -%}
{%- if block.settings.video -%}

{{- block.settings.video | video_tag: playslinline: true, muted: true, loop: true, preload: ‘metadata’ -}}

{%- else -%}


{%- if block.settings.external_video_url.type == ‘youtube’ -%}

{%- elsif block.settings.external_video_url.type == ‘vimeo’ -%}

{%- endif -%}


{%- endif -%}
{%- endif -%}

{%- capture content_class -%}media-with-text__content {% unless section.settings.spacing == ‘none’ %}rounded{% endunless %}{%- endcapture -%}
<div {% render ‘surface’, class: content_class, background: block.settings.background, background_gradient: block.settings.background_gradient, text_color: block.settings.text_color %}>


{%- if block.settings.custom_icon != blank -%}
{%- capture sizes -%}{{ block.settings.icon_width }}px{%- endcapture -%}
{%- capture widths -%}{{ block.settings.icon_width }}, {{ block.settings.icon_width | times: 2 | at_most: block.settings.custom_icon.width }}{%- endcapture -%}
{{- block.settings.custom_icon | image_url: width: block.settings.custom_icon.width | image_tag: loading: ‘lazy’, sizes: sizes, widths: widths, class: ‘media-with-text__icon’ -}}
{%- elsif block.settings.icon != ‘none’ -%}
{%- render ‘icon’ with block.settings.icon, width: block.settings.icon_width, height: block.settings.icon_width, class: ‘media-with-text__icon’ -%}
{%- endif -%}

{%- if block.settings.subheading != blank -%}

{{ block.settings.subheading | escape }}


{%- endif -%}

{%- if block.settings.title != blank -%}


{%- render ‘styled-text’, content: block.settings.title, gradient: block.settings.text_gradient -%}


{%- endif -%}

{{- block.settings.content -}}

{%- if block.settings.link_text != blank -%}
{%- render ‘button’, href: block.settings.link_url, content: block.settings.link_text, size: ‘xl’, background: block.settings.button_background, text_color: block.settings.button_text_color -%}
{%- endif -%}




{%- endfor -%}

I think one code is missing but i don´t know which one in the section-properties.

Can someone help me?

Thank you

Andy

2 
"blocks": [
{
"type": "image_block",
"name": "image_block",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image "
}

]

Use this paragraph to configure if you just want to add blocks of images.

3

Hello,

If I try to add this code to my liquid, I get this error:

  • Invalid preset “Media-URL with text”: invalid block “image”: undefined block type.

I want to add images in the section via URL (metafield)

I do not want to add images via selection

Do you have any Idea why this error is showing up?

Thanks Andy

4

I’ve tried this code on my side and it doesn’t report an error, if it does it may be due to the brackets, if you need me to check it for you you can contact me.Try this

"blocks": [
{
    "type": "image_block",
    "name": "image_block",
    "settings": [
          {
          "type": "image_picker",
          "id": "image",
          "label": "Image "
          }
      ]
    }
]
5

hmm.. no it doesn´t work without this message…

would be great if you could assist me.

the section is called:

“media-url-with-text”

I want to embed images via URL and with the current settings I am not able to choose a URL Metafield - just Data Metafields.

My URL is:
https://bavariashop-mei-lebensgfui.myshopify.com/

can you apply for access?

6

I have applied, please tell me what you need to do now. Configure the metafield? Or do you go ahead and implement adding blocks to configure images?

If you need to, you can contact me by email.

My Email:d1300715301@gmail.com

7

We want to go ahead to get a possibility to add images via URL in this section.

Thank you, I already sent an email.