Add Second Button to Video Hero - Impulse Theme

chels_grove
Shopify Partner
58 0 20

Hi, 

 

My client would like to add a second button to the Video Hero in the Impulse theme - here is the Hero Video code for reference.

 

Thank you!

{%- style -%}
  .hero--{{ section.id }} .hero__title {
    font-size: {{ section.settings.title_size | times: 0.5 }}px;
  }
  @media only screen and (min-width: 769px) {
    .hero--{{ section.id }} .hero__title {
      font-size: {{ section.settings.title_size }}px;
    }
  }

  {%- assign button_alpha = section.settings.color_accent | color_extract: 'alpha' -%}
  {% unless button_alpha == 0.0 %}
    .hero--{{ section.id }} .btn {
      background: {{ section.settings.color_accent }} !important;
      border-color: {{ section.settings.color_accent }} !important;

      {%- assign accent_brightness = section.settings.color_accent | color_extract: 'lightness' -%}

      {% if accent_brightness > 40 %}
        color: #000 !important;
      {% endif %}
    }

    {% if settings.button_style == 'angled' %}
      .hero--{{ section.id }} .btn:before,
      .hero--{{ section.id }} .btn:after {
        background: {{ section.settings.color_accent }} !important;
        border-color: {{ section.settings.color_accent }} !important;
      }
    {% endif %}
  {% endunless %}

  {% if section.settings.overlay_opacity > 0 %}
    .hero--{{ section.id }} .hero__text-wrap:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 3;
      background-color: #000;
      opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }};
    }
  {% endif %}
{%- endstyle -%}

<div
  data-section-id="{{ section.id }}"
  data-section-type="video-section"
  class="video-parent-section hero hero--{{ section.id }} hero--{{ section.settings.section_height }} hero--mobile--{{ section.settings.mobile_height }}"
  data-mobile-natural="false"
  data-aos="hero__animation">

  <div class="hero__media hero__media--{{ section.id }}">
    <div class="hero__media-container">

      {%- if section.settings.video_url contains 'youtube.com/watch' -%}
        {%- assign video_id = section.settings.video_url | split: 'v=' -%}
        {%- assign video_id = video_id[1] | split: '&' | first -%}
        <div
          id="YouTubeVideo-{{ section.id }}"
          class="video-div"
          data-type="youtube"
          data-video-id="{{ video_id }}"></div>
      {%- endif -%}

      {%- if section.settings.video_url contains 'youtu.be/' -%}
        {%- assign video_id = section.settings.video_url | split: '.be/' -%}
        {%- assign video_id = video_id[1] | split: '&' | first -%}
        <div
          id="YouTubeVideo-{{ section.id }}"
          class="video-div"
          data-type="youtube"
          data-video-id="{{ video_id }}"></div>
      {%- endif -%}

      {%- if section.settings.video_url contains 'vimeo.com' -%}
        {%- assign video_id = section.settings.video_url | split: '.com/' -%}
        {%- assign video_id = video_id[1] | split: '/' | first -%}
        <div
          id="Vimeo-{{ section.id }}"
          class="video-div"
          data-type="vimeo"
          data-video-id="{{ video_id }}"></div>
      {%- endif -%}

      {%- if section.settings.video_url contains '.mp4' or section.settings.video_url contains '.MP4' -%}
        <video
          id="Mp4Video-{{ section.id }}"
          class="video-div"
          data-type="mp4"
          src="{{ section.settings.video_url }}"
          loop muted playsinline autoplay></video>
      {%- endif -%}

    </div>
  </div>

  <div class="hero__text-wrap">
    <div class="page-width">
      <div class="hero__text-content {{ section.settings.text_align }}">
        <div class="hero__text-shadow">
          {%- if section.settings.video_url contains 'vimeo.com' -%}
            <button type="button" id="VimeoTrigger-{{ section.id }}" class="vimeo-mobile-trigger medium-up--hide">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-play" viewBox="18.24 17.35 24.52 28.3"><path fill="#323232" d="M22.1 19.151v25.5l20.4-13.489-20.4-12.011z"/></svg>
            </button>
          {%- endif -%}

          {%- unless section.settings.title == blank -%}
            <h2 class="h1 hero__title">
              <div class="animation-cropper"><div class="animation-contents">
              {{ section.settings.title | newline_to_br }}
              </div></div>
            </h2>
          {%- endunless -%}
          {%- if section.settings.subheading or section.settings.link -%}
            {%- unless section.settings.subheading == blank -%}
              <div class="hero__subtitle">
                <div class="animation-cropper"><div class="animation-contents">
                  {{ section.settings.subheading | escape }}
                </div></div>
              </div>
            {%- endunless -%}
            {%- if section.settings.link_text != blank -%}
              {%- assign link_href = section.settings.link -%}
              {%- if section.settings.link == blank -%}
                {%- assign link_href = section.settings.video_url -%}
              {%- endif -%}
              <div class="hero__link">
                <div class="animation-cropper">
                  <div class="animation-contents">
                    <a href="{{ link_href }}" class="btn{% if section.settings.color_accent and section.settings.color_accent == 'rgba(0,0,0,0)' %} btn--inverse{% endif %}"
                      {%- if section.settings.video_url contains 'vimeo.com' -%}
                        data-video-id="{{ video_id }}"
                      {%- endif -%}
                    >
                      {%- if link_href contains 'youtube.com/watch' or link_href contains 'youtu.be/' -%}
                        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-play" viewBox="18.24 17.35 24.52 28.3"><path fill="#323232" d="M22.1 19.151v25.5l20.4-13.489-20.4-12.011z"/></svg>
                      {%- endif -%}
                      {{ section.settings.link_text }}
                    </a>
                  </div>
                </div>
              </div>
            {%- endif -%}
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>

</div>

{% schema %}
{
  "name": "t:sections.hero-video.name",
  "class": "index-section--hero",
  "settings": [
    {
      "type": "textarea",
      "id": "title",
      "label": "t:sections.hero-video.settings.title.label",
      "default": "Bring your\nbrand to life."
    },
    {
      "type": "range",
      "id": "title_size",
      "label": "t:sections.hero-video.settings.title_size.label",
      "default": 80,
      "min": 40,
      "max": 100,
      "unit": "px"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "t:sections.hero-video.settings.subheading.label",
      "default": "Seamless hero videos"
    },
    {
      "type": "text",
      "id": "link_text",
      "label": "t:sections.hero-video.settings.link_text.label",
      "default": "Optional button"
    },
    {
      "type": "url",
      "id": "link",
      "label": "t:sections.hero-video.settings.link.label",
      "info": "t:sections.hero-video.settings.link.info"
    },
    {
      "type": "color",
      "id": "color_accent",
      "label": "t:sections.hero-video.settings.color_accent.label",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "select",
      "id": "text_align",
      "label": "t:sections.hero-video.settings.text_align.label",
      "default": "vertical-center horizontal-center",
      "options": [
        {
          "value": "vertical-center horizontal-left",
          "label": "t:sections.hero-video.settings.text_align.options.vertical-center_horizontal-left.label"
        },
        {
          "value": "vertical-center horizontal-center",
          "label": "t:sections.hero-video.settings.text_align.options.vertical-center_horizontal-center.label"
        },
        {
          "value": "vertical-center horizontal-right",
          "label": "t:sections.hero-video.settings.text_align.options.vertical-center_horizontal-right.label"
        },
        {
          "value": "vertical-bottom horizontal-left",
          "label": "t:sections.hero-video.settings.text_align.options.vertical-bottom_horizontal-left.label"
        },
        {
          "value": "vertical-bottom horizontal-center",
          "label": "t:sections.hero-video.settings.text_align.options.vertical-bottom_horizontal-center.label"
        },
        {
          "value": "vertical-bottom horizontal-right",
          "label": "t:sections.hero-video.settings.text_align.options.vertical-bottom_horizontal-right.label"
        }
      ]
    },
    {
      "type": "text",
      "id": "video_url",
      "label": "t:sections.hero-video.settings.video_url.label",
      "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
      "info": "t:sections.hero-video.settings.video_url.info"
    },
    {
      "type": "range",
      "id": "overlay_opacity",
      "label": "t:sections.hero-video.settings.overlay_opacity.label",
      "info": "t:sections.hero-video.settings.overlay_opacity.info",
      "default": 0,
      "min": 0,
      "max": 100,
      "step": 2,
      "unit": "%"
    },
    {
      "type": "select",
      "id": "section_height",
      "label": "t:sections.hero-video.settings.section_height.label",
      "default": "650px",
      "options": [
        {
          "label": "t:sections.hero-video.settings.section_height.options.450px.label",
          "value": "450px"
        },
        {
          "label": "t:sections.hero-video.settings.section_height.options.550px.label",
          "value": "550px"
        },
        {
          "label": "t:sections.hero-video.settings.section_height.options.650px.label",
          "value": "650px"
        },
        {
          "label": "t:sections.hero-video.settings.section_height.options.750px.label",
          "value": "750px"
        },
        {
          "label": "t:sections.hero-video.settings.section_height.options.100vh.label",
          "value": "100vh"
        }
      ]
    },
    {
      "type": "select",
      "id": "mobile_height",
      "label": "t:sections.hero-video.settings.mobile_height.label",
      "default": "auto",
      "options": [
        {
          "label": "t:sections.hero-video.settings.mobile_height.options.auto.label",
          "value": "auto"
        },
        {
          "label": "t:sections.hero-video.settings.mobile_height.options.250px.label",
          "value": "250px"
        },
        {
          "label": "t:sections.hero-video.settings.mobile_height.options.300px.label",
          "value": "300px"
        },
        {
          "label": "t:sections.hero-video.settings.mobile_height.options.400px.label",
          "value": "400px"
        },
        {
          "label": "t:sections.hero-video.settings.mobile_height.options.500px.label",
          "value": "500px"
        },
        {
          "label": "t:sections.hero-video.settings.mobile_height.options.100vh.label",
          "value": "100vh"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.hero-video.presets.video_hero.name"
    }
  ],
  "disabled_on": {
    "groups": ["footer", "header", "custom.popups"]
  }
}
{% endschema %}
Reply 1 (1)

sgsaul
Visitor
2 0 0

Hi @chels_grove, have you found a way to do this? Many thanks!