<div class="whatmore-base" style="position: relative; min-height: 120px;">  
      <div id="whatmoreShopId" data-wh="{{ shop.id }}"> </div>
    
      {%- if section.settings.color-primary -%}
          <div id="whatmorePrimaryColor" data-wh="{{ section.settings.color-primary }}"> </div>
      {%- endif -%}
    
      {%- if section.settings.color-secondary  -%}
          <div id="whatmoreSecondaryColor" data-wh="{{ section.settings.color-secondary }}"> </div>
      {%- endif -%}

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

      {%- if section.settings.story-tile-size  -%}
        <div id="whatmoreStoryTileSize" data-wh="{{ section.settings.story-tile-size }}"> </div>
      {%- endif -%}

      {%- if section.settings.story-tile-size-desktop  -%}
        <div id="whatmoreStoryTileSizeDesktop" data-wh="{{ section.settings.story-tile-size-desktop }}"> </div>
      {%- endif -%}

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

          <div id="whatmorePrimaryFont" data-wh={{primary_font}}> </div>
      {%- endif -%}

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

      {% if request.design_mode %}
        <div id="whatmoreIsInDesignMode" data-wh='true'> </div>
      {% else %}
        <div id="whatmoreIsInDesignMode" data-wh='false'> </div>
      {% endif %}
      <div class="whatmore-widget" data-wh="stories"></div>
      <div class="whatmore-render-root"></div>
    
  </div>
  
  
  {% schema %}
    {
      "name": "Whatmore Stories",
      "tag": "section",
      "class": "section",
      "settings": [
        {
          "type": "select",
          "id": "template-type",
          "label": "Tile Type",
          "options": [
            {
              "value": "template-stories-a",
              "label": "Stories-Circle"
            },
            {
              "value": "template-stories-b",
              "label": "Stories-Square"
            }
          ],
          "default": "template-stories-a"
        },
        {
          "type": "number",
          "id": "stories-top-bottom-padding",
          "label": "Stories vertical padding",
          "default": 0
        },
        {
          "type": "range",
          "id": "story-tile-size",
          "label": "Mobile - story tile size ( in percentage ) ",
          "default": 45,
          "step": 5,
          "min": 20,
          "max": 100
        },
        {
          "type": "range",
          "id": "story-tile-size-desktop",
          "label": "Desktop - story tile size ( in percentage ) ",
          "default": 45,
          "step": 5,
          "min": 20,
          "max": 100
        }
      ],
      "presets": [
        {
          "name": "Whatmore Stories"
        }
      ]
  }
  {% endschema %}
  
  {% stylesheet %}
  {% endstylesheet %}
  
  {% javascript %}
  {% endjavascript %}