<div class="whatmore-base" style="min-height: 380px;">  
    <div>
      <div id="whatmoreShopId" data="{{ shop.id }}"> </div>
    
      {%- if section.settings.heading -%}
          <div id="whatmoreHeading" data="{{ section.settings.heading }}"> </div>
      {%- endif -%}
    
      {%- if section.settings.color-primary -%}
          <div id="whatmorePrimaryColor" data="{{ section.settings.color-primary }}"> </div>
      {%- endif -%}
    
      {%- if section.settings.color-secondary  -%}
          <div id="whatmoreSecondaryColor" data="{{ section.settings.color-secondary }}"> </div>
      {%- endif -%}
    
      {%- if section.settings.title-font-size  -%}
          <div id="whatmoreTitleFontSize" data="{{ section.settings.title-font-size }}"> </div>
      {%- endif -%}
  
      {%- if section.settings.landscape-padding  -%}
        <div id="whatmoreLandscapePadding" data="{{ section.settings.landscape-padding }}"> </div>
      {%- endif -%}

      {%- if section.settings.top-bottom-padding  -%}
        <div id="whatmoreTopBottomPadding" data="{{ section.settings.top-bottom-padding }}"> </div>
      {%- endif -%}

      {%- if section.settings.scroll-video-tile-size  -%}
        <div id="whatmoreVideoTileSize" data="{{ section.settings.scroll-video-tile-size }}"> </div>
      {%- endif -%}
    
      {%- if section.settings.title-font  -%}
          {% assign title_font = section.settings.title-font %}
    
          {% style %}
            {{ title_font | font_face | replace_first: title_font.family, "whatmoreTitleFontFamily"}}
          {% endstyle %}
    
          <!-- <div id="whatmoreTitleFont" data={{ title_font.family }}> </div> -->
          <div id="whatmoreTitleFont" data="whatmoreTitleFontFamily"> </div>
      {%- endif -%}

      {%- if section.settings.primary-font  -%}
          {% assign primary_font = section.settings.primary-font %}

          {% style %}
            {{ primary_font | font_face | replace_first: primary_font.family, "whatmorePrimaryFontFamily"}}
          {% endstyle %}

          <div id="whatmorePrimaryFont" data="whatmorePrimaryFontFamily"> </div>
      {%- endif -%}
      
      {%- if section.settings.show-views  -%}
        <div id="whatmoreShowViews" data="{{ section.settings.show-views }}"> </div>
      {%- endif -%}

      {%- if section.settings.template-type  -%}
        <div class="whatmore-template-type" data="{{ section.settings.template-type }}"> </div>
      {%- endif -%}

      {% if request.design_mode %}
        <div id="whatmoreIsInDesignMode" data='true'> </div>
      {% else %}
        <div id="whatmoreIsInDesignMode" data='false'> </div>
      {% endif %}
    
      <div class="whatmore-render-root"></div>
    
    </div>
  </div>
  
  
  {% schema %}
    {
      "name": "Whatmore Carousel",
      "tag": "section",
      "class": "section",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Watch and Buy!"
        },
        {
          "type": "select",
          "id": "template-type",
          "label": "Tile Type",
          "options": [
            {
              "value": "template-a",
              "label": "Video-Card"
            },
            {
              "value": "template-feed-a",
              "label": "Video-Card feed"
            },
            {
              "value": "template-a-1",
              "label": "Video-Card with see-more option."
            },
            {
              "value": "template-b",
              "label": "Product-Video-Card"
            },
            {
              "value": "template-c",
              "label": "Grid Style - Theme Border"
            },
            {
              "value": "template-d",
              "label": "Grid Style - No Border"
            },
            {
              "value": "template-e",
              "label": "Single Tile"
            },
						{
							"value": "template-f",
							"label": "Video-card with product-info"
						}

          ],
          "default": "template-f"
        },
        {
          "type": "select",
          "id": "show-views",
          "label": "Video View Count",
          "options": [
            {
              "value": "show",
              "label": "Show Views"
            },
            {
              "value": "hide",
              "label": "Hide Views"
            }
          ],
          "default": "show"
        },
        {
          "label": "UI Theme",
          "id": "ui-theme",
          "type": "select",
          "options": [
            {
              "value": "round",
              "label": "Rounded Corners"
            },
            {
              "value": "square",
              "label": "Squared Corners"
            }
          ],
          "default": "round"
        },
        {
          "label": "Primary Theme Color",
          "id": "color-primary",
          "type": "color",
          "default": "#343434"
        },
        {
          "label": "Secondary Theme Color",
          "id": "color-secondary",
          "type": "color",
          "default": "#343434"
        },
        {
          "type": "font_picker",
          "id": "title-font",
          "label": "Title font",
          "default": "sans-serif"
        },
        {
          "type": "font_picker",
          "id": "primary-font",
          "label": "Primary font",
          "default": "sans-serif"
        },
        {
          "type": "range",
          "id": "title-font-size",
          "min": 8,
          "max": 101,
          "step": 1,
          "unit": "px",
          "label": "Title Font size",
          "default": 40
        },
        {
          "type": "number",
          "id": "landscape-padding",
          "label": "Horizontal padding in Desktop/Laptop",
          "default": 40
        },
        {
          "type": "number",
          "id": "top-bottom-padding",
          "label": "Vertical padding",
          "default": 20
        },
        {
          "type": "range",
          "id": "scroll-video-tile-size",
          "label": "Scroll-Video-Tile size ( in percentage ) ",
          "default": 80,
          "step": 5,
          "min": 40,
          "max": 200
        }
      ],
      "presets": [
        {
          "name": "Whatmore Carousel"
        }
      ]
  }
  {% endschema %}
  
  {% stylesheet %}
  {% endstylesheet %}
  
  {% javascript %}
  {% endjavascript %}

https://github.com/projectx-tech/whatmorelive/blob/50c5b4146ccfbff352326b5a65c246c27b2e31eb/theme-app-extension-liquid/block-stories.liquid