How to Dynamically Populate Dropdown with API Response in Shopify Liquid Template?

Technical Q&A
,
1

I’m working on a Shopify Liquid template where I need to display a dropdown list of carousel names fetched from an API.

{
  "carousels": [
    { "id": "1c934d10-41a8-4869-9f78-642b8b984e4b", "name": "My Carousel 1" },
    { "id": "47290bc1-878e-417b-80d8-f8c5c714c0d5", "name": "My Carousel 2" }
  ]
}

Currently, the carousel name is a static text field in the Liquid schema like this:

{
  "type": "text",
  "id": "carousel_name",
  "label": "Carousel Name",
  "default": "Homepage 1"
}

Instead, I want to,

Fetch all carousel names from the API dynamically when the page loads.

Populate the carousel names as options in a dropdown list within the section.

Here is the entire liquid file:

{% assign base_template = template | split: '.' | first %}

{% if base_template == 'product' or base_template == 'collection' %}
  <!-- Product/collection section -->
  <div id="instasell-live-short-videos" class="page-width"></div>
  <script>
    window.__INSTASELL_LIVE_CONFIG__ = window.__INSTASELL_LIVE_CONFIG__ || {};
    __INSTASELL_LIVE_CONFIG__.pageType = "{{ base_template }}";
    {% if base_template == 'product' %}
      __INSTASELL_LIVE_CONFIG__.currentProductId = "{{ product.id }}";
    {% elsif base_template == 'collection' %}
      __INSTASELL_LIVE_CONFIG__.currentCollectionId = "{{ collection.id }}";
    {% endif %}
  </script>
{% else %}
  <!-- Section-specific container for all other pages -->
  <div id="instasell-carousel-{{ section.id }}" 
       data-carousel-name="{{ block.settings.carousel_name | default: 'Homepage 1' }}" 
       class="page-width">
  </div>

  <script>
    window.__INSTASELL_LIVE_CONFIG__ = window.__INSTASELL_LIVE_CONFIG__ || {};
    __INSTASELL_LIVE_CONFIG__.pageType = "home";
    __INSTASELL_LIVE_CONFIG__.homeCarousels = __INSTASELL_LIVE_CONFIG__.homeCarousels || [];
    
    __INSTASELL_LIVE_CONFIG__.homeCarousels.push({
      elementId: "instasell-carousel-{{ section.id }}",
      name: "{{ block.settings.carousel_name | escape }}" || "Homepage 1"
    });
  </script>
{% endif %}

<!-- Global script inclusion -->
{% unless globals_loaded %}
  <script type="module" async src="https://d1w3cluksnvflo.cloudfront.net/short-videos/index.js"></script>
  <link rel="stylesheet" href="https://d1w3cluksnvflo.cloudfront.net/short-videos/index.css">
  {% assign globals_loaded = true %}
{% endunless %}

{% schema %} 
{ 
  "name": "Instasell Short Videos", 
  "target": "section", 
  "settings": [
    { 
      "type": "text", 
      "id": "carousel_name", 
      "label": "Carousel Name", 
      "info": "Enter the name of the carousel.", 
      "default": "Homepage 1" 
    }
  ]
} 
{% endschema %}

Please help me with this