Image-banner.liquid code request

Technical Q&A
, , , ,
2

Hi @kyle6661

To add the custom banner, create a new section file in your theme’s code editor named custom-image-banner.liquid. Delete any default code in that new file and paste the complete code block below. Once saved, you can add and customize your new “Image Banner” section from the theme editor.

<style>
  .custom-banner { position: relative; width: 100%; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; }
  .custom-banner--small { min-height: 280px; }
  .custom-banner--medium { min-height: 400px; }
  .custom-banner--large { min-height: 550px; }
  .custom-banner__content { padding: 20px; background-color: rgba(0, 0, 0, 0.3); border-radius: 5px; }
  .custom-banner__heading { font-size: 2.5rem; margin: 0 0 15px; }
  .custom-banner__button { display: inline-block; padding: 12px 24px; background-color: #000; color: #fff; text-decoration: none; border-radius: 3px; font-weight: bold; }
  .custom-banner__image--desktop { display: none; }
  .custom-banner__image--mobile { display: block; }
  @media screen and (min-width: 768px) {
    .custom-banner__image--desktop { display: block; }
    .custom-banner__image--mobile { display: none; }
  }
</style>

{%- liquid
  assign section_height = section.settings.section_height
  assign desktop_image = section.settings.desktop_image
  assign mobile_image = section.settings.mobile_image
  assign bg_image_desktop = desktop_image | image_url: width: 1920
  assign bg_image_mobile = mobile_image | image_url: width: 750
  if mobile_image == blank
    assign bg_image_mobile = bg_image_desktop
  endif
-%}

<div class="custom-banner custom-banner--{{ section_height }}" style="background-image: url('{{ bg_image_mobile }}');" {%- if desktop_image != blank %} data-desktop-image="url('{{ bg_image_desktop }}')" {% endif %}>
  <div class="custom-banner__content">
    {%- if section.settings.heading_text != blank -%}
      <h2 class="custom-banner__heading">{{ section.settings.heading_text | escape }}</h2>
    {%- endif -%}
    {%- if section.settings.button_text != blank and section.settings.button_link != blank -%}
      <a href="{{ section.settings.button_link }}" class="custom-banner__button">{{ section.settings.button_text | escape }}</a>
    {%- endif -%}
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const banner = document.querySelector('.custom-banner');
    const desktopImage = banner.getAttribute('data-desktop-image');
    function handleResize() {
      if (window.innerWidth >= 768 && desktopImage) {
        banner.style.backgroundImage = desktopImage;
      } else {
        banner.style.backgroundImage = `url('${banner.style.backgroundImage.slice(5, -2)}')`;
      }
    }
    handleResize();
    window.addEventListener('resize', handleResize);
  });
</script>

{% schema %}
{
  "name": "Image Banner",
  "settings": [
    { "type": "image_picker", "id": "desktop_image", "label": "Desktop Image" },
    { "type": "image_picker", "id": "mobile_image", "label": "Mobile Image", "info": "If blank, desktop image is used." },
    { "type": "select", "id": "section_height", "label": "Section Height", "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" }
      ], "default": "medium" },
    { "type": "text", "id": "heading_text", "label": "Heading", "default": "My Banner" },
    { "type": "text", "id": "button_text", "label": "Button Text", "default": "Shop Now" },
    { "type": "url", "id": "button_link", "label": "Button Link" }
  ],
  "presets": [{ "name": "Image Banner" }]
}
{% endschema %}

Hope this helps!