homepage-hero.liquid

<section class="sec-HomepageHero js-HomepageHero"
         data-section-id="{{ section.id }}"
         data-section-type="homepage-hero"
         data-module-class="js-HomepageHero">
  <div class="sec-HomepageHero_Mobile">
    <div class="sec-HomepageHero_ImageContainer">
      {%- include 'responsive-image' with
        image: section.settings.mobile_image,
        max_width: 375,
        size_by_width: true
      -%}
    </div>

    <div class="sec-HomepageHero_Content lyt-Container">
      {%- assign mobile_block = section.blocks[0] -%}

      <h2 class="sec-HomepageHero_Title">{{ mobile_block.settings.title }}</h2>

      {%- if mobile_block.settings.button_text != blank -%}
        <a class="sec-HomepageHero_Link btn-Primary">{{ mobile_block.settings.button_text }}</a>
      {%- endif -%}
    </div>
  </div>

  <div class="sec-HomepageHero_Slides js-HomepageHero_Slides">
    {%- for block in section.blocks -%}
      <div class="sec-HomepageHero_Slide js-HomepageHero_Slide" {{ block.shopify_attributes }}>
        <div class="sec-HomepageHeroSlide">
          <div class="sec-HomepageHeroSlide_ImageContainer">
            {%- include 'responsive-image' with
              image: block.settings.image,
              max_width: 2560 -%}
          </div>

          <div class="sec-HomepageHeroSlide_Content sec-HomepageHeroSlide_Content-{{ block.settings.content_style }}">
            {%- if block.settings.title -%}
              <h2 class="sec-HomepageHeroSlide_Title">{{ block.settings.title }}</h2>
            {%- endif -%}

            {%- if block.settings.button_text != blank -%}
              <a class="sec-HomepageHeroSlide_Link btn-{{ block.settings.button_style | capitalize }}">{{ block.settings.button_text }}</a>
            {%- endif -%}
          </div>
        </div>
      </div>
    {%- endfor -%}
  </div>

  <div class="sec-HomepageHero_Dots js-HomepageHero_Dots">
    {%- for i in (1..section.blocks.size) -%}
      <div class="sec-HomepageHero_Dot js-HomepageHero_Dot" role="button"{% if forloop.first %} aria-current="true"{% endif %}></div>
    {%- endfor -%}
  </div>
</section>

{% schema %}
  {
    "name": "Hero",
    "settings": [
      {
        "type": "image_picker",
        "id": "mobile_image",
        "label": "Mobile image",
        "info": "Suggested size is: 750x470. On mobile the carousel is hidden and this image is used as a fallback."
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Image",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image",
            "info": "Suggested size is: 5120x2080"
          },
          {
            "type": "select",
            "id": "content_style",
            "label": "Content style",
            "options": [
              {
                "value": "light",
                "label": "Light"
              },
              {
                "value": "dark",
                "label": "Dark"
              }
            ],
            "default": "light"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Title"
          },
          {
            "type": "select",
            "id": "button_style",
            "label": "Button style",
            "options": [
              {
                "value": "secondary",
                "label": "Light"
              },
              {
                "value": "primary",
                "label": "Dark"
              }
            ],
            "default": "primary"
          },
          {
            "type": "text",
            "id": "button_text",
            "label": "Button text",
            "info": "You can leave this blank and no button will show"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Link"
          }
        ]
      }
    ],
    "presets": [
      {
        "category": "Homepage",
        "name": "Hero",
        "blocks": [
          {
            "type": "image"
          },
          {
            "type": "image"
          },
          {
            "type": "image"
          }
        ]
      }
    ]
  }
{% endschema %}