Passing data from App metafields to the shopify theme editor sidebar?

Extensions
1

I am building an app, in which you create “objects” with custom data.

The workflow is supposed to be like this:

  1. Build your custom “objects”
  2. Add the block to your product page.
  3. Select the block and use the theme editor sidebar to select one of these objects.
  4. The block is filled with data from said object.

However I was not able so far to make that work. It seems like I can’t get the objects from the app metafields, where the data is stored to show up in the theme editor sidebar. I want to have them show up in a dropdown with their name showing.

Is this even possible? ChatGPT told me, that data can not me dynamically created here.
THat’s why I switched to metafield reference, but here I also have problems.

Can somebody tell me if I am on the right path or is what I want to do not doable at all?

1 Like
2

Hi there,

It’s great to see you’re exploring the use of metaobjects in your app!

At the moment, the metaobject theme input setting doesn’t support app metaobjects the way you’re intending to use them.

As an alternative approach, you can include a text input setting for the merchant to enter the handle of a metaobject entry. Then use that handle to retrieve the metaobject entry’s data and populate the block’s content that way.

To illustrate, this is a basic test I’ve done:

{% liquid
  assign entry_handle = block.settings.metaobject_entry_handle
  assign metaobject_entry = shop.metaobjects['$app:autofill_content'][entry_handle]
%}

<div id="test-app-block" class="autofill-block">
  {% if metaobject_entry %}

    {% if metaobject_entry.content %}
    <span style="color:{{ block.settings.color }}">
      {{ metaobject_entry.content.value }}
    </span>
    {% endif %}

    {% if metaobject_entry.image %}
      <img
        src="{{ metaobject_entry.image | image_url: width: 200 }}"
        alt="{{ metaobject_entry.title.value }}"
        width="200"
        height="200"
      >
    {% endif %}

  {% else %}
    <p>No content found for handle: {{ entry_handle }}</p>
  {% endif %}

</div>


{% schema %}
{
  "name": "Autofill App Block",
  "target": "section",
  "settings": [
    {
      "type": "text",
      "id": "metaobject_entry_handle",
      "label": "Metaobject Entry Handle",
      "info": "Enter the handle of the autofill content",
      "default": "test-promotion"
    },
    {
      "type": "color",
      "id": "color",
      "label": "Color",
      "default": "#ff0000"
    }
  ]
}
{% endschema %}

For metaobject with this structure:

metaobject definition in the admin
metaobject definition in the admin1466×1102 58.5 KB

I hope that helps! Let me know if you have any questions about this approach.