section.settings.input_name Returns Empty String

Shopify Discussion
1

I’m experiencing an issue where section.settings.carousel_name always returns an empty string, even though the merchant inputs a valid value for the carousel name in the theme editor. The goal is for the merchant to only enter the name in the theme editor, and we handle everything else dynamically in the code. Despite entering a value, section.settings.carousel_name keeps returning an empty string when accessed in the Liquid code

{% if template == 'index' %}
  <!-- Section-specific container for homepage carousels -->
  <div id="dummy-carousel-{{ section.id }}" 
       data-carousel-name="{{ section.settings.carousel_name | default: 'Default Carousel' }}" 
       class="page-width">
  </div>

<script>
  window.DUMMY_LIVE_CONFIG = window.DUMMY_LIVE_CONFIG || {};

  // Debug: Log carousel name from section settings
  const carouselName = "{{ section.settings.carousel_name | escape }}";
  console.log("Carousel Name Debug:", {
    rawName: "{{ section.settings.carousel_name }}",
    processedName: carouselName
  });

  if (!DUMMY_LIVE_CONFIG.pageType) {
    DUMMY_LIVE_CONFIG.pageType = "home";
    DUMMY_LIVE_CONFIG.homeCarousels = DUMMY_LIVE_CONFIG.homeCarousels || [];
    
    DUMMY_LIVE_CONFIG.homeCarousels.push({
      elementId: "dummy-carousel-{{ section.id }}",
      name: carouselName || "Default Carousel"
    });
  }
  console.log("DUMMY_LIVE_CONFIG:", window.DUMMY_LIVE_CONFIG);
</script>

{% elsif template == 'product' or template == 'collection' %}
  <!-- Product/collection section remains untouched -->
  <div id="dummy-live-short-videos" class="page-width"></div>
  <script>
    window.DUMMY_LIVE_CONFIG = window.DUMMY_LIVE_CONFIG || {};
    DUMMY_LIVE_CONFIG.pageType = "{{ template }}";
    {% if template == 'product' %}
      DUMMY_LIVE_CONFIG.currentProductId = "{{ product.id }}";
    {% elsif template == 'collection' %}
      DUMMY_LIVE_CONFIG.currentCollectionId = "{{ collection.id }}";
    {% endif %}
  </script>
{% endif %}

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

{% schema %}
{
  "name": "Dummy Short Videos",
  "target": "section",
  "settings": [
    {
      "type": "text",
      "id": "carousel_name",
      "label": "Carousel Name",
      "info": "Enter the name of the carousel to display on the homepage.",
      "default": "Home Carousel"
    }
  ],
  "templates": ["index"]
}
{% endschema %}