SHOP NOW Homepage Button Position On Mobile (Dawn 9.0.0)

NickRE8 · March 31, 2024, 4:13pm

Hey community! Needing some help here. On the site www.Reshoevn8r.com - there is a custom image section “custom-image-banner.liquid” for the website landing page hero image. Within the section there is IMAGE, TEXT, BUTTON. (Self explanatory) but my question comes from the button positioning options. You can see desktop has the options of placing the button and text almost anywhere on the image, however the MOBILE version places it right in the middle, and you can left, center, or right justify it.

How can I modify this section to provide the same choices for mobile placement as the desktop version?

custom-image-banner.liquid code:

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- if section.settings.image_height == 'adapt' and section.settings.image != blank -%}
  {%- style -%}
    @media screen and (max-width: 749px) {
      #Banner-{{ section.id }}::before,
      #Banner-{{ section.id }} .banner__media::before,
      #Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
        padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }

    @media screen and (min-width: 750px) {
      #Banner-{{ section.id }}::before,
      #Banner-{{ section.id }} .banner__media::before {
        padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }
  {%- endstyle -%}
{%- endif -%}

{%- style -%}
  #Banner-{{ section.id }}::after {
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }
{%- endstyle -%}

{%- liquid
  if section.settings.image_behavior == 'ambient'
    assign half_width = '60vw'
    assign full_width = '120vw'
    assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
    assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
  else
    assign half_width = '50vw'
    assign full_width = '100vw'
    assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
    assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
  endif
-%}

<div
  id="Banner-{{ section.id }}"
  class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}"
>
   {% for block in section.blocks %}
    {% if block.settings.button_link_1 == blank %}
      <a href="{{ section.settings.section_url }}" class="image_sec_url"></a>
    {% endif %}
      {% endfor %}
  {%- if section.settings.video_file_link != blank or section.settings.video_url != blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
      {%- liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank
          assign image_class = 'banner__media-image-half'
        endif
        if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
          assign sizes = stacked_sizes
        elsif section.settings.image_2 != blank
          assign sizes = half_width
        else
          assign sizes = full_width
        endif
      -%}
      {% comment %}
      {{
        section.settings.image
        | image_url: width: 3840
        | image_tag:
          loading: '',
          width: section.settings.image.width,
          height: image_height,
          class: image_class,
          sizes: sizes,
          widths: widths
      }}
    {% endcomment %}
      {% assign play_button = section.settings.style %}
      <div class="video-section{% unless section.settings.full_width %} page-width{% endunless %}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %} banner--content-align-{{ section.settings.desktop_content_alignment }}">
        {% if section.settings.video_style contains 'external-video' %}
            <deferred-media class="video-section__media deferred-media no-js-hidden" data-media-id="{{ section.settings.video_url.id }}"
              {% if section.settings.cover_image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.cover_image.aspect_ratio | times: 100 }}%;"{% endif %}
            >
              <button
                id="Deferred-Poster-Modal-{{ section.settings.video_url.id }}"
                class="video-section__poster media deferred-media__poster media--landscape"
                type="button"
              >
          Play
                {%- if section.settings.cover_image != blank -%}
                <img
                srcset="{%- if section.settings.cover_image.width >= 375 -%}{{ section.settings.cover_image | img_url: '375x' }} 375w,{%- endif -%}
                  {%- if section.settings.cover_image.width >= 750 -%}{{ section.settings.cover_image | img_url: '750x' }} 750w,{%- endif -%}
                  {%- if section.settings.cover_image.width >= 1100 -%}{{ section.settings.cover_image | img_url: '1100x' }} 1100w,{%- endif -%}
                  {%- if section.settings.cover_image.width >= 1500 -%}{{ section.settings.cover_image | img_url: '1500x' }} 1500w,{%- endif -%}
                  {%- if section.settings.cover_image.width >= 1780 -%}{{ section.settings.cover_image | img_url: '1780x' }} 1780w,{%- endif -%}
                  {%- if section.settings.cover_image.width >= 2000 -%}{{ section.settings.cover_image | img_url: '2000x' }} 2000w,{%- endif -%}
                  {%- if section.settings.cover_image.width >= 3000 -%}{{ section.settings.cover_image | img_url: '3000x' }} 3000w,{%- endif -%}
                  {%- if section.settings.cover_image.width >= 3840 -%}{{ section.settings.cover_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                src="{{ section.settings.cover_image | img_url: '1920x' }}"
                sizes="{% if section.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}"
                alt="{{ 'sections.video.load_video' | t: description: section.settings.description | escape }}"
                loading=""
                width="{{ section.settings.cover_image.width }}"
                height="{{ section.settings.cover_image.height }}"
              >
                {%- else -%}
                  {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                {%- endif -%}
                <span class="deferred-media__poster-button motion-reduce">
                  {%- render 'icon-play' -%}
                </span>
              </button>
              {% comment %}
              <template>
                {%- if section.settings.video_url.type == 'youtube' -%}
               
                  <iframe src="https://www.youtube.com/embed/{{ section.settings.video_url.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
                {%- else -%}
                  <iframe src="https://player.vimeo.com/video/{{ section.settings.video_url.id }}" class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
                {%- endif -%}
              </template>
              {% endcomment %}
          
          
              
              <div class="Yvideo">
                  <div class="btn-group">
                    <button id="mute" type="button" class="btn btn-primary disabled">Mute</button>
                  </div>
                  <div id="player-container">
                    <div id="player-div"></div>
                  </div>
              </div>
              <button type="button" id="muted" class="btn mutebutton">
                {% render 'icon-audio' %}
              {% render 'icon-volume' %}
              </button>
              
          
              
          
            </deferred-media>
            {% endif %}
            {% if section.settings.video_style contains 'mp4' %}
            <div class="Video">
            <div class="mp4Video">
              <video id="banner-video" class="video-section-wrapper--{{ section.settings.file_video_height }}
                        video-section-wrapper--min-height" {% if play_button == 'image_with_play' %}preload="auto"{% endif %} {% if play_button == 'background' %}autoplay muted playsinline{% endif %} loop width="100%">
              <source src="{{ section.settings.video_file_link }}" type="video/mp4" id="{{ section.id }}">
              </video>
            </div>
            <button type="button" id="muteed" class="btn mutebutton">
              {% render 'icon-audio' %}
              {% render 'icon-volume' %}
            </button>
            <!-- <button type="button" id="play-push" class="btn playpush">
              {%- render 'icon-play' -%}
            </button> -->
          </div>
                {% endif %}
            </div>
          
    </div>
  {%- elsif section.settings.image_2 == blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
      {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
    </div>
  {%- endif -%}
  {%- if section.settings.image_2 != blank -%}
    <div class="banner__media media{% if section.settings.video_file_link != blank or section.settings.video_url != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}" {% if section.settings.mobile_image == blank %}style="display:block;"{% endif %}>
      {%- liquid
        assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
        if section.settings.image != blank
          assign image_class_2 = 'banner__media-image-half'
        endif
        if section.settings.image != blank and section.settings.stack_images_on_mobile
          assign sizes = stacked_sizes
        elsif section.settings.image_2 != blank
          assign sizes = half_width
        else
          assign sizes = full_width
        endif
      -%}
      {{
        section.settings.image_2
        | image_url: width: 3840
        | image_tag:
          loading: '',
          width: section.settings.image_2.width,
          height: image_height_2,
          class: image_class_2,
          sizes: sizes,
          widths: widths
      }}
    </div>
  {%- endif -%}
  {%- if section.settings.mobile_image != blank -%}
    <div class="banner__media mobile_image media{% if section.settings.video_file_link != blank or section.settings.video_url != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
      {%- liquid
        assign image_height_2 = section.settings.mobile_image.width | divided_by: section.settings.mobile_image.aspect_ratio
        if section.settings.mobile_image != blank
          assign image_class_2 = 'banner__media-image-half'
        endif
        if section.settings.mobile_image != blank and section.settings.stack_images_on_mobile
          assign sizes = stacked_sizes
        elsif section.settings.mobile_image != blank
          assign sizes = half_width
        else
          assign sizes = full_width
        endif
      -%}
      {{
        section.settings.mobile_image
        | image_url: width: 3840
        | image_tag:
          loading: '',
          width: section.settings.mobile_image.width,
          height: image_height_2,
          class: image_class_2,
          sizes: sizes,
          widths: widths
      }}
    </div>
  {%- endif -%}
  <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
    <div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'heading' -%}
            <h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>{{ block.settings.heading }}</h2>
          {%- when 'text' -%}
            <div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
              <p>{{ block.settings.text }}</p>
            </div>
          {%- when 'buttons' -%}
            <div
              class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}"
              {{ block.shopify_attributes }}
            >
              {%- if block.settings.button_label_1 != blank -%}
                <a
                  {% if block.settings.button_link_1 == blank %}
                    role="link" aria-disabled="true"
                  {% else %}
                    href="{{ block.settings.button_link_1 }}"
                  {% endif %}
                  class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"
                >
                  {{- block.settings.button_label_1 | escape -}}
                </a>
              {%- endif -%}
              {%- if block.settings.button_label_2 != blank -%}
                <a
                  {% if block.settings.button_link_2 == blank %}
                    role="link" aria-disabled="true"
                  {% else %}
                    href="{{ block.settings.button_link_2 }}"
                  {% endif %}
                  class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
                >
                  {{- block.settings.button_label_2 | escape -}}
                </a>
              {%- endif -%}
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
  </div>
</div>
<style>
    button#muted {
      position: absolute;
      right: 20px;
      width: 40px;
      height: 40px;
      background-color: #fff;
      border: 0 none;
      color: #000;
      top: 20px;
      z-index: 2;
  }
  button#muteed {
      position: absolute;
      left: 20px;
      width: 30px;
      height: 30px;
      background-color: #fff;
      border: 0 none;
      color: #000;
      bottom: 20px;
      z-index: 2;
      cursor: pointer;
      top: auto;
  }

  button#play-push {
      background-color: transparent;
      border: 0 none;
      position: absolute;
      right: 70px;
      width: 40px;
      height: 40px;
      top: 20px;
      background-color: #fff;
      cursor: pointer;
  }
  button#play-push svg.icon.icon-play {
      width: 20px;
      height: 20px;
      color: gray;
  }
  .deferred-media__poster {
    display: none;
  }
  .Video {
    position: relative;
  }
  .custom-image-banner .video-section.page-width {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}
.custom-image-banner .video-section.page-width .Video .mp4Video, .custom-image-banner .video-section.page-width .Video {
    height: 100%;
    border: 0;
}
.custom-image-banner .video-section.page-width .Video video#banner-video {
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width:767px){
    .custom-image-banner .banner__media.media.banner__media-half {
    width: 100%;
  } 
.custom-image-banner .banner:not(.banner--stacked) {
    flex-direction: column;
    flex-wrap: wrap;
}
.custom-image-banner .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media{
    height: 25rem;
}
.custom-image-banner .banner__media.media.banner__media-half:nth-of-type(2){
  display:none

}
    .Video .mutebutton svg {
    width: 22px;
  }
    button#muteed { 
      padding: 0 5px;
    }
}
  .custom-image-banner .video-section.page-width .Video .mp4Video {
    padding-bottom: 0;
    z-index: 1;
}
  #muteed.mutebutton .volume {
    display: none;
}
    #muteed.mutebutton.active .volume {
      display: block;
    }
  #muteed.mutebutton.active .mute {
    display: none;
  }
  #player-container iframe {
      position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
  }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {
  document.querySelector("#muteed").addEventListener("click", myFunction);
});
      function myFunction() {
        video = document.querySelector('video#banner-video'); 
        video.muted = !video.muted;
        this.classList.toggle('active');
        // alert(video.muted);
      }
  
      var player;
  
  // This code loads the IFrame Player API code asynchronously. This is the Youtube-recommended script loading method
  var tag = document.createElement("script");
  tag.src="https://youtube.com/iframe_api";
  tag.id = "youtubeScript";
  var firstScriptTag = document.getElementsByTagName("script")[1];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  
  
  // Create youtube player (function called by YouTube API)
  function onYouTubeIframeAPIReady() {
      player = new YT.Player("player-div", {
          width: "562",
          videoId: "{{ section.settings.video_url.id }}",
          playerVars: {
              autoplay: {% if section.settings.style contains 'background' %}1{% else %}0{% endif %},
              controls: 0,
              rel: 0,
              fs: 0,
              showinfo: 0,
              modestbranding: 0
          },
          events: {
              onReady: onPlayerReady,
              onStateChange: onPlayerStateChange
          }
      });
  }
  // Player ready handler. Autoplay video when player is ready
  function onPlayerReady(event) {
      $('.btn').removeClass( "disabled" );
  }
  if(document.querySelector("#muted")!=undefined)
  {
  document.querySelector("#muted").addEventListener("click", mute);
  function mute() {
    if(player.isMuted())
      {
          player.unMute();
          // $('#muted').text('Mute');
      }
      else
      {
          player.mute();
          // $('#muted').text('Unmute');
      }
      }
    }
  
  function onPlayerStateChange(event) {
  
  }
 </script>

{% schema %}
{
  "name": "Custom Image Banner",
  "tag": "section",
  "class": "section custom-image-banner",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "image_2",
      "info": "Image Size: 950x545",
      "label": "Desktop Image"
    },
    {
		"type": "image_picker",
		"id": "mobile_image",
       "info": "Image Size: 436X480",
		"label": "Mobile Image"
	},
    {
		"type": "url",
		"id": "section_url",
		"label": "URL"
	},
    {
        "type": "header",
        "content": "Video Settings"
    },
    {
        "type": "select",
        "id": "video_style",
        "label": "Video Type",
        "default": "mp4",
        "options": [
          {
            "label": "MP4",
            "value": "mp4"
          }
        ]
      },
      {
        "type": "text",
        "id": "video_file_link",
        "label": "File Video URL",
        "default": "https://cdn.shopify.com/s/files/1/2018/8867/files/ice.mp4"
      },
      {
        "type": "select",
        "id": "style",
        "label": {
          "cs": "Styl",
          "da": "Stil",
          "de": "Stil",
          "en": "Style",
          "es": "Estilo",
          "fi": "Tyyli",
          "fr": "Style",
          "hi": "अंदाज",
          "it": "Stile",
          "ja": "スタイル",
          "ko": "스타일",
          "nb": "Stil",
          "nl": "Stijl",
          "pl": "Styl",
          "pt-BR": "Estilo",
          "pt-PT": "Estilo",
          "sv": "Stil",
          "th": "สไตล์",
          "tr": "Stil",
          "vi": "Kiểu",
          "zh-CN": "样式",
          "zh-TW": "樣式"
        },
        "default": "background",
        "options": [
          {
            "label": {
              "cs": "Obrázek s tlačítkem přehrávání",
              "da": "Billede med afspilningsknap",
              "de": "Foto mit Play Button",
              "en": "Image with play button",
              "es": "Imagen con el botón de reproducir",
              "fi": "Kuva jossa toistopainike",
              "fr": "Image avec bouton de lecture",
              "hi": "प्ले बटन के साथ इमेज",
              "it": "Immagine con pulsante play",
              "ja": "再生ボタン付き画像",
              "ko": "재생 버튼이 있는 이미지",
              "nb": "Bilde med avspillingsknapp",
              "nl": "Afbeelding met knop afspelen",
              "pl": "Obraz z przyciskiem odtwarzania",
              "pt-BR": "Imagem com botão de reprodução",
              "pt-PT": "Imagem com botão de reprodução",
              "sv": "Bild med uppspelningsknapp",
              "th": "รูปภาพพร้อมปุ่มเล่น",
              "tr": "Oynat düğmesi bulunan görsel",
              "vi": "Hình ảnh có nút phát",
              "zh-CN": "带播放按钮的图片",
              "zh-TW": "附播放按鈕的圖片"
            },
            "value": "image_with_play"
          },
          {
            "label": {
              "cs": "Video na pozadí",
              "da": "Baggrundsvideo",
              "de": "Hintergrund-Video",
              "en": "Background video",
              "es": "Video de fondo",
              "fi": "Taustavideo",
              "fr": "Vidéo d'arrière-plan",
              "hi": "पृष्ठभूमि वीडियो",
              "it": "Video in background",
              "ja": "背景ビデオ",
              "ko": "배경 동영상",
              "nb": "Bakgrunnsvideo",
              "nl": "Achtergrondvideo",
              "pl": "Film w tle",
              "pt-BR": "Vídeo de fundo",
              "pt-PT": "Vídeo de fundo",
              "sv": "Bakgrundsvideo",
              "th": "วิดีโอพื้นหลัง",
              "tr": "Arka plan videosu",
              "vi": "Video nền",
              "zh-CN": "背景视频",
              "zh-TW": "背景影片"
            },
            "value": "background"
          }
        ]
      },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "t:sections.image-banner.settings.image_overlay_opacity.label",
      "default": 0
    },
    {
      "type": "select",
      "id": "image_height",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.image-banner.settings.image_height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.image-banner.settings.image_height.options__2.label"
        },
        {
          "value": "medium",
          "label": "t:sections.image-banner.settings.image_height.options__3.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-banner.settings.image_height.options__4.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.image-banner.settings.image_height.label",
      "info": "t:sections.image-banner.settings.image_height.info"
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "top-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "top-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "top-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
        },
        {
          "value": "middle-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
        },
        {
          "value": "middle-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
        },
        {
          "value": "middle-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
        },
        {
          "value": "bottom-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
        },
        {
          "value": "bottom-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
        },
        {
          "value": "bottom-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
        }
      ],
      "default": "middle-center",
      "label": "t:sections.image-banner.settings.desktop_content_position.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_box",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_box.label"
    },
    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.desktop_content_alignment.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Gray Background"
        },
        {
          "value": "accent-2",
          "label": "Red Background"
        },
        {
          "value": "background-1",
          "label": "White Background"
        },
        {
          "value": "background-2",
          "label": "Concrete or Anti-Flash White Background"
        },
        {
          "value": "inverse",
          "label": "Black Background"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.image-banner.settings.color_scheme.info"
    },
    {
      "type": "header",
      "content": "t:sections.all.animation.content"
    },
    {
      "type": "select",
      "id": "image_behavior",
      "options": [
        {
          "value": "none",
          "label": "t:sections.all.animation.image_behavior.options__1.label"
        },
        {
          "value": "ambient",
          "label": "t:sections.all.animation.image_behavior.options__2.label"
        }
      ],
      "default": "none",
      "label": "t:sections.all.animation.image_behavior.label"
    },
    {
      "type": "header",
      "content": "t:sections.image-banner.settings.mobile.content"
    },
    {
      "type": "select",
      "id": "mobile_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.mobile_content_alignment.label"
    },
    {
      "type": "checkbox",
      "id": "stack_images_on_mobile",
      "default": true,
      "label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_below",
      "default": true,
      "label": "Underneath text on mobile"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-banner.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Image banner",
          "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h2",
              "label": "t:sections.all.heading_size.options__1.label"
            },
            {
              "value": "h1",
              "label": "t:sections.all.heading_size.options__2.label"
            },
            {
              "value": "h0",
              "label": "t:sections.all.heading_size.options__3.label"
            }
          ],
          "default": "h1",
          "label": "t:sections.all.heading_size.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-banner.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "text",
          "default": "Give customers details about the banner image(s) or content on the template.",
          "label": "t:sections.image-banner.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
            },
            {
              "value": "caption-with-letter-spacing",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
            }
          ],
          "default": "body",
          "label": "t:sections.image-banner.blocks.text.settings.text_style.label"
        }
      ]
    },
    {
      "type": "buttons",
      "name": "t:sections.image-banner.blocks.buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label_1",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_1",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_2",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Image Banner",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}

section-banner.css

.banner {
  display: flex;
  position: relative;
  flex-direction: column;
}

.banner__box {
  text-align: center;
}

@media only screen and (max-width: 1199px) {
  .banner--content-align-mobile-right .banner__box {
    text-align: right;
  }

  .banner--content-align-mobile-left .banner__box {
    text-align: left;
  }
}

@media only screen and (min-width: 1200px) {
  .banner--content-align-right .banner__box {
    text-align: right;
  }

  .banner--content-align-left .banner__box {
    text-align: left;
  }

  .banner--content-align-left.banner--desktop-transparent .banner__box,
  .banner--content-align-right.banner--desktop-transparent .banner__box,
  .banner--medium.banner--desktop-transparent .banner__box {
    max-width: 68rem;
  }
}

@media screen and (max-width: 1199px) {
  .banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 28rem;
  }

  .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 34rem;
  }

  .banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 39rem;
  }

  .banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 28rem;
  }

  .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 34rem;
  }

  .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 39rem;
  }
}

@media screen and (min-width: 1200px) {
  .banner {
    flex-direction: row;
  }

  .banner--small:not(.banner--adapt) {
    min-height: 42rem;
  }

  .banner--medium:not(.banner--adapt) {
    min-height: 56rem;
  }

  .banner--large:not(.banner--adapt) {
    min-height: 60rem;
  }

  .banner__content.banner__content--top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .banner__content.banner__content--top-center {
    align-items: flex-start;
    justify-content: center;
  }

  .banner__content.banner__content--top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .banner__content.banner__content--middle-left {
    align-items: center;
    justify-content: flex-start;
  }

  .banner__content.banner__content--middle-center {
    align-items: center;
    justify-content: center;
  }

  .banner__content.banner__content--middle-right {
    align-items: center;
    justify-content: flex-end;
  }

  .banner__content.banner__content--bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }

  .banner__content.banner__content--bottom-center {
    align-items: flex-end;
    justify-content: center;
  }

  .banner__content.banner__content--bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }
}
@media screen and (max-width: 1280px) {
  .banner--large:not(.banner--adapt) {
    min-height: 48rem;
  }
}
@media screen and (max-width: 1199px) {
  .banner:not(.banner--stacked) {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .banner--stacked {
    height: auto;
  }

  .banner--stacked .banner__media {
    flex-direction: column;
  }
}

.banner__media {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.banner__media-half {
  width: 50%;
}

.banner__media-half + .banner__media-half {
  right: 0;
  left: auto;
}

@media screen and (max-width: 1199px) {
  .banner--stacked .banner__media-half {
    width: 100%;
  }

  .banner--stacked .banner__media-half + .banner__media-half {
    order: 1;
  }
}

@media screen and (min-width: 1200px) {
  .banner__media {
    height: 100%;
  }
}

.banner--adapt,
.banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
  height: auto;
}

@media screen and (max-width: 1199px) {
  .banner--mobile-bottom .banner__media,
  .banner--stacked:not(.banner--mobile-bottom) .banner__media {
    position: relative;
  }
  .slideshow .banner__media {
    position: relative;
}

  .banner--stacked.banner--adapt .banner__content {
    height: auto;
  }

  .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
    background: transparent;
    --color-foreground: 255, 255, 255;
    --color-button: 255, 255, 255;
    --color-button-text: 0, 0, 0;
  }

  .banner:not(.banner--mobile-bottom) .banner__box {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .banner:not(.banner--mobile-bottom) .button--secondary {
    --color-button: 255, 255, 255;
    --color-button-text: 255, 255, 255;
    --alpha-button-background: 0;
  }

  .banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    position: absolute;
    height: auto;
  }

  .banner--stacked.banner--adapt:not(.banner--mobile-bottom) .banner__content {
    max-height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .banner--stacked:not(.banner--adapt) .banner__media {
    position: relative;
  }

  .banner::before {
    display: none !important;
  }

  .banner--stacked .banner__media-image-half {
    width: 100%;
  }
}

.banner__content {
  padding: 0;
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

@media screen and (min-width: 1200px) {
  .banner__content {
    padding: 5rem;
  }

  .banner__content--top-left {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .banner__content--top-center {
    align-items: flex-start;
    justify-content: center;
  }

  .banner__content--top-right {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .banner__content--middle-left {
    align-items: center;
    justify-content: flex-start;
  }

  .banner__content--middle-center {
    align-items: center;
    justify-content: center;
  }

  .banner__content--middle-right {
    align-items: center;
    justify-content: flex-end;
  }

  .banner__content--bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
  }

  .banner__content--bottom-center {
    align-items: flex-end;
    justify-content: center;
  }

  .banner__content--bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
  }
}

@media screen and (max-width: 1199px) {
  .banner--mobile-bottom:not(.banner--stacked) .banner__content {
    order: 2;
  }

  .banner:not(.banner--mobile-bottom) .field__input {
    background-color: transparent;
  }
}

.banner__box {
  padding: 4rem 3.5rem;
  position: relative;
  height: fit-content;
  align-items: center;
  text-align: center;
  width: 100%;
  word-wrap: break-word;
  z-index: 1;
}

@media screen and (min-width: 1200px) {
  .banner--desktop-transparent .banner__box {
    background: transparent;
    --color-foreground: 255, 255, 255;
    --color-button: 255, 255, 255;
    --color-button-text: 0, 0, 0;
    max-width: 89rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .banner--desktop-transparent .button--secondary {
    --color-button: 255, 255, 255;
    --color-button-text: 255, 255, 255;
    --alpha-button-background: 0;
  }

  .banner--desktop-transparent .content-container:after {
    display: none;
  }
}

@media screen and (max-width: 1199px) {
  .banner--mobile-bottom::after,
  .banner--mobile-bottom .banner__media::after {
    display: none;
  }
}

.banner::after,
.banner__media::after {
  content: '';
  position: absolute;
  top: 0;
  background: #000000;
  opacity: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.banner__box > * + .banner__text {
  margin-top: 1.5rem;
}

@media screen and (min-width: 1200px) {
  .banner__box > * + .banner__text {
    margin-top: 2rem;
  }
}

.banner__box > * + * {
  margin-top: 1rem;
}

.banner__box > *:first-child {
  margin-top: 0;
}

@media screen and (max-width: 1199px) {
  .banner--stacked .banner__box {
    width: 100%;
  }
}

@media screen and (min-width: 1200px) {
  .banner__box {
    width: auto;
    max-width: 71rem;
    min-width: 45rem;
  }
}

@media screen and (min-width: 1400px) {
  .banner__box {
    max-width: 90rem;
  }
}

.banner__heading {
  margin-bottom: 0;
}

.banner__box .banner__heading + * {
  margin-top: 1rem;
}

.banner__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 45rem;
  word-break: break-word;
}

@media screen and (max-width: 1199px) {
  .banner--content-align-mobile-right .banner__buttons--multiple {
    justify-content: flex-end;
  }

  .banner--content-align-mobile-center .banner__buttons--multiple > * {
    flex-grow: 1;
    min-width: 22rem;
  }
}

@media screen and (min-width: 1200px) {
  .banner--content-align-center .banner__buttons--multiple > * {
    flex-grow: 1;
    min-width: 22rem;
  }

  .banner--content-align-right .banner__buttons--multiple {
    justify-content: flex-end;
  }
}

.banner__box > * + .banner__buttons {
  margin-top: 2rem;
}

@media screen and (max-width: 1199px) {
  .banner:not(.slideshow) .rte a,
  .banner:not(.slideshow) .inline-richtext a:hover,
  .banner:not(.slideshow) .rte a:hover {
    color: currentColor;
  }
}

@media screen and (min-width: 1200px) {
  .banner--desktop-transparent .rte a,
  .banner--desktop-transparent .inline-richtext a:hover,
  .banner--desktop-transparent .rte a:hover {
    color: currentColor;
  }
}
@media screen and (min-width: 750px) and (max-width:1199px) {
  .slideshow .banner__box {
  padding: 1rem 3.5rem;
}
}

@media screen and (min-width: 1200px) {
  .custom-image-banner  .banner--medium:not(.banner--adapt) {
    min-height: 67rem;
}
}
.custom-image-banner .banner__media {
  background-color: #ffffff;
  overflow:hidden;
}

.custom-image-banner .banner__box h2.banner__heading.h1 {
  text-transform: uppercase
}

@media screen and (min-width: 1200px) {
.custom-image-banner .banner__box {
    padding: 4rem;
    width: auto;
    /* padding-bottom: 0; */
}
.custom-image-banner .banner--medium:not(.banner--adapt) {
  min-height: auto;
  margin-bottom: 40px;
  padding-bottom: 100px;
  padding-top: 100px;
}
}

.custom-image-banner .banner__box .banner__text {
  color: white;
}
@media screen and (max-width: 1199px) {
  .custom-image-banner .banner__box .banner__text {
    color: #8B8B87;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .video-section .banne__content_wrapper .banner__content .banner__box{
    padding: 4rem 3.5rem 30px;
  }
  .section-brand-slider-sec .brand-slider-sec-section {
      padding-top: 0;
      padding-bottom: 40px;
  }
}

.custom-image-banner .banner__media.mobile_image {
    display: none;
}
@media screen and (max-width: 767px) {
  .custom-image-banner .banner__media.mobile_image {
    display: block;
}
}
a.image_sec_url{
  position: absolute;
 left: 0;
 right: 0;
 margin: auto;
 display: block;
 top: 0;
 bottom: 0;
 z-index: 3;
}

Thank you and much love to community!

LuffyOnePiece · April 2, 2024, 5:25am

Hi @NickRE8

Follow these Steps:

Go to Online Store
Edit Code
Find theme.liquid file
Add the following code just above tag

Add This Css in your Edit Code > Base.css File

@media screen and (max-width: 768px){
    .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
        min-height: 48rem;
    }
    .banner__content.banner__content--bottom-center.page-width {
        display: flex;
        justify-content: center;
        align-items: end;
    }
}

Result:

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

NickRE8 · April 2, 2024, 12:37pm

@LuffyOnePiece Thank you for the assistance, but there was no code shown in the reply. Also, I need to modify the section block on for the user to have the same customizable choices as the desktop version inside the dropdown. So they can choose: Top center, bottom center, top left corner, top right corner, etc. etc. etc. The image changes all the time and the shop now button has to be digitally added at the moment for their placement choice. Let me know if that make sense.

Topic		Replies	Views
Customize placement of button on image banner section dawn theme Store Design design , customizations , landing-page , css , html	1	55	October 21, 2024
Change mobile hero to vertical on Brooklyn theme Store Design	34	52	December 19, 2021
Shopify banner on website doesn't downsize on mobile Store Design	9	25	August 22, 2022
How to make both desktop and mobile homepage banner clickable? Only my desktop image works now. Store Design	10	45	November 26, 2024
Image banner Store Design design , css , shopify-themes	6	44	July 1, 2024

SHOP NOW Homepage Button Position On Mobile (Dawn 9.0.0)

Topic summary

Related topics