How to add customizable settings for an app embed

didierdonne
Shopify Partner
8 0 1

Hi everyone,

 

I have an embedded app block that I would like to have input options for the store owner to set.  How would I - for example - add a drop down menu in the area [below extension-test] you see in the attached image?

 

Screenshot 2023-06-18 at 3.16.11 PM.png

 

Some research I've done is look at the settings attribute for the schema but this does not seem to have any effect.

 

 

 

 

{% schema %}
{
  "name": "App Embed",
  "target": "head",
  "enabled_on": {
    "templates": ["product"]
  },
  "javascript": "app.js",
  "settings": [
    {
      "type": "select",
      "id": "my_option",
      "label": "Sample Option",
      "options": [
        {
          "value": 2,
          "label": "2"
        },
        {
          "value": 3,
          "label": "3"
        }
      ]
    }
  ],
  "default": 2
}
{% endschema %}

 

 

 

 

Thank you!

 

Replies 4 (4)

Liam
Shopify Staff
2731 299 769

Hi Didierdonne,

This schema looks to be set up correctly - are other settings not appearing if you test, or just `select`?

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

didierdonne
Shopify Partner
8 0 1

Hi Liam,

 

This is the only setting I have on the extension.  Could there be a caching issue perhaps?  The reason why I ask is, the name "Star Rating" isn't declared anywhere in any of the files.  Perhaps I'm missing something that needs to be cleared/refreshed?

 

Thanks!

didierdonne
Shopify Partner
8 0 1

It looks to be working now.  I re-installed on the dev store.  I also noticed the "default" was outside of the settings array and changed all values to strings.  

 

 

 

Liam
Shopify Staff
2731 299 769

Great to hear it's working as expected now!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog